ASP.NET MVC 2로 jQuery 선택 플러그인을 사용하여 선택한 항목 게시

Question

ASP.NET MVC 2 with jQuery를 사용하여 개발중인 응용 프로그램을 보유하고 있습니다. 내 페이지에 표시된 항목 목록과 각 항목에서 수행 할 수있는 일련의 작업이 있습니다. 각 목록 항목에 대한 링크 또는 아이콘을 반복하는 대신 목록의 맨 위에있는 가상 도구 모음에 표시합니다.

jQuery UI Selectable 플러그인을 사용하여 목록 항목 선택을 관리합니다. 지금은 두 가지를 수행해야합니다

1. 나는 버튼 중 하나를 클릭

   , 나는 요청에 인수로 선택한 목록 항목의 ID를 제출해야합니다. 예를 들어, "편집"버튼을 클릭하면 목록의 선택된 항목에서 'id'가 추출 된 편집 메소드 (int id)와 일치해야합니다. (Btw, 'id'는 요소 id가 아니며 응답에 포함해야하는 서버의 식별자이므로 서버에서 항목을 식별하는 데 사용할 수 있습니다.)

2. 다른 요인에 따라 버튼을 활성화/비활성화 할 수 있습니다. 예를 들어, 하나의 목록 항목은 '닫혀 있기'때문에 편집 할 수 없습니다. 일단 어떤 항목이 선택되었는지 ($ (".ui-selected")를 사용하여 추측합니다), 어떤 버튼이 활성화 또는 비활성화되었는지를 결정하는 데 필요한 다른 속성을 전달하는 가장 좋은 방법은 무엇입니까? 이러한 정보를 클라이언트 측 스크립트에 전달하는 숨겨진 필드는 내 유일한 옵션입니까? 그래서 아무 AJAX -

UPDATE

더 읽은 후 나는 내가 비동기 적으로 작업을 수행 할되지 않는다는 것을 명확히해야한다 생각합니다. 나는 버튼에 대한 일반적인 action-link 유형 비헤이비어를 사용하려고합니다.

Answer 1

폐쇄를 위해 다음과 같은 결론을 얻었습니다. 더 좋은 해결책이 있다면 의견을 말하십시오!)는 :

내보기에

,이 같은 "그루터기"양식을 구현 :

위에서 언급 한 바와 같이

<% using (Html.BeginForm("Command", "MyController")) 
    { %> 
    <%= Html.Hidden("CommandName") %> 
    <%= Html.Hidden("CommandArgument") %> 
<% } %> 

, 나는 플러그인 항목과 선택의 목록을 관리하기 위해 jQuery를 선택를 사용하고 있습니다 . 각 항목에는 어떤 버튼이 활성화 또는 비활성화되었는지 확인하는 데 필요한 모든 데이터 포인트에 대한 숨김 필드가 있습니다. 여기에서 I는 선택 가능한 플러그인을 구현하는 방법이다 :

var selectedValue = null; 
var selectedItemHasChildren = false; 

$(function() { 
    $(".my_list").selectable({ 
     filter: "tr", 
     selected: function (e, ui) { 
      var item = $(ui.selected).children("td"); 

      selectedValue = item.children("input[name=ItemID]").first().val(); 
      selectedItemHasChildren = (item.children("input[name=HasChildren]") 
             .first() 
             .val() == 1); 

      UpdateButtonStates(); 
     } 
    }); 
}); 

UpdateButtonStates 방법 버튼이 표시 및/또는 활성화해야 결정하는 두 변수를 사용한다.

내 경우에는 각 버튼이 실제로 이미지 버튼으로 구현되므로 < > 래퍼가있는 범위가됩니다. href를 속성은 다음과 같은 방법에 관한됩니다 :

당신이 볼 수 있듯이, 나는 다시 내 컨트롤러에 원하는 작업 및 지원 인수를 전달하기 위해 위에서 정의 된 양식을 사용하고

function Button_Click(action) { 
    $("#CommandName").val(action); 
    $("#CommandArgument").val(selectedValue); 
    $("form").submit(); 
} 

. 물론 CommandName 양식 필드를 없애고 $ ("form"). attr ("action", action)과 같은 것을 사용하여 양식 자체를 원하는 작업으로 리디렉션 할 수있었습니다. API로 개별 액션을 노출시키지 않기 때문에이 경로를 선택했습니다. 게다가 이것은 전통적인 ASP.NET Button 서버 컨트롤에 의해 노출 된 Command 이벤트와 비슷하다고 생각하여 다른 개발자의 학습 곡선을 최소화 할 수있었습니다.

Answer 2

jQuery UI Selectable 플러그인을 특별히 사용하지는 않았지만 설명하는 것과 매우 비슷한 것을 개발 했으므로 2 센트를 제안합니다. 주어진 객체에 대해 수행 할 수있는 작업을 결정하는 많은 속성이있는 경우 각 행 (또는 div 또는 양식을 배치하는 것)에 양식을 넣는 것이 좋습니다. 행동을 취할 수 있습니다. 이렇게하면 jQuery의 .serializeArray() 메소드를 유용하게 사용할 수있다. 할 때마다 체크 박스 후, 조치 (예를 들어, 수행 할 수있는 결정 로직을 실행하려는시기에 따라

<table> 
<tr> 
<td> 
    <form> 
    <input type="checkbox" name="id" value="1" /> 
    <input type="hidden" name="color" value="red" /> 
    <input type="hidden" name="size" value="large" /> 
    </form> 
</td> 
</tr><tr> 
<td> 
    <form> 
    <input type="checkbox" name="id" value="2" /> 
    <input type="hidden" name="color" value="orange" /> 
    <input type="hidden" name="size" value="small" /> 
    </form> 
</td> 
</tr> 
</table> 

: 각 개체에 대한 테이블 행이있는 경우,이 같은 것을 보일 수 있습니다 체크) 자바 스크립트는 다음과 같이 보일 수 있습니다

$(function(){ 

$('[name="id"]').bind('click', function(){ 

    var actionableObjects = []; 

    $.each($('[name="id"]'), function(){ 

    if($(this).is(':checked')){ 

     var obj = {}, 
      arr = $(this).parents('form:first').serializeArray(); 

     $.each(arr, function(index, p){ obj[p.name] = p.value; }) 

    actionableObjects.push(obj); 

    } 

    }) 

    updateActionIcons(actionableObjects); 

}) 

}) 

이 당신에게 작업 할 JSON 객체의 좋은 깨끗한 배열을 제공해야합니다.

이것이 최선의 방법인지 확실하지 않지만 저에게 도움이되었습니다.

마지막으로 데이터를 제출하는 한, AJAX를 사용하지 않으려면 작업 버튼을 클릭하고 .trigger ('submit')를 수행하면 jQuery로 새 양식을 작성합니다. .

답변을 제출하는 것은 이번이 처음이기 때문에 이해하기 쉽도록 형식이 바뀌었기를 바랍니다.