ASP.Net에서 동적으로 부분 뷰 렌더링하기 MVC3 Ajax 호출로 작업 수행

Question

'작업 항목'을 만들기 위해 단일 페이지 양식을 생성하려고합니다. 속성 중 하나는 '작업 항목 유형'에 대한 드롭 다운입니다.

작업 항목 유형에 따라 사용자가 이름 - 값 쌍 스타일 속성 표 (속성 시트)에 추가 정보를 제공해야 할 수 있습니다.

작업 항목 유형을 선택하거나 변경하자마자 속성 시트를 동적으로 렌더링하고 싶습니다. 사용자가 모든 정보를 제공하면 제출을 클릭하여 '작업 항목'을 만듭니다.

public ActionResult AttributeData(int id = 0) 
{ 
    var attributes = _workItemDataService.ListWorkItemTypeAttributes(id); 
    return PartialView("EditWorkItemAttributesPartialView", attributes); 

} 

지금 내가 드롭이를 연결하고 싶습니다 :

이

@using (Ajax.BeginForm("AttributeData", new AjaxOptions() { UpdateTargetId="AttributeDataCell" })) 
{ 

     <div style="float:left"> 

@{ 
    Html.RenderPartial("CreateWorkItemPartialView"); 
} 
</div>  

<div id="AttributeDataCell" style="float:right"> 
    @Html.Action("AttributeData", new {id = 1}) 
</div> 
} 

컨트롤러의 AttributeData 조치는 단순히 부분 뷰를 렌더링 :

이

내가 지금까지 무엇을 가지고 선택 목록의 선택 이벤트가 발생하여 모든 선택 변경시 부분 표 시가 위의 표 셀에서 다시 렌더링됩니다. 선택한 값을 id로 전달하고 싶습니다.

한 가지 방법은 양식을 강제로 제출하여 다시 렌더링하는 것입니다.

1. 이것이 올바른 접근 방법이라면 어떻게해야할까요? Esp., 다시 렌더링 할 속성 시트 만 만드는 방법은 무엇입니까?

2. 상기를 달성하는 더 좋은 방법이 있으면 알려주십시오.

감사

Answer 1

드롭 다운의 .change() 이벤트에 가입하고 AJAX 요청을 트리거 할 수 :

$(function() { 
    $('#Id_Of_Your_Drop_Down').change(function() { 
     // This event will be triggered when the dropdown list selection changes 

     // We start by fetching the form element. Note that if you have 
     // multiple forms on the page it would be better to provide it 
     // an unique id in the Ajax.BeginForm helper and then use id selector: 
     var form = $('form'); 

     // finally we send the AJAX request: 
     $.ajax({ 
      url: form.attr('action'), 
      type: form.attr('method'), 
      data: form.serialize(), 
      success: function(result) { 
       // The AJAX request succeeded and the result variable 
       // will contain the partial HTML returned by the action 
       // we inject it into the div: 
       $('#AttributeDataCell').html(result); 
      } 
     }); 
    }); 
});