동적으로 ASP .NET MVC 면도기보기에서 자바 스크립트/jQuery를

Question

를 사용하여 드롭 다운 목록을 채우고, 나는 드롭 다운 목록을 가지고있다.

Javascript/jQuery/Ajax를 사용하여 버튼 클릭이나 다른 드롭 다운 선택과 같은 클라이언트 측 동작에 따라 동적으로 DeviceModelList를 채울 수 있습니까?

당신은에이 드롭 다운을 구체화 할 수

Answer 1

부분 : 메인 뷰에서 다음

@model MyViewModel 
@Html.DropDownListFor(model => model.SelectedDeviceModel, Model.DeviceModelList) 

일부 컨테이너 내부를 포함

@model MyViewModel 
... 
<div id="ddlcontainer"> 
    @Html.Partial("Foo", Model) 
</div> 
... 

은 다음 몇 가지 매개 변수를 컨트롤러 액션을 가질 수 있으며, 이 값을 기반으로이 부분을 렌더링합니다.

public ActionResult Foo(string someValue) 
{ 
    MyViewModel model = ... go ahead and fill your view model 
    return PartialView(model); 
} 

지금 마지막 부분은 AJAX 요청을 보내 이벤트가 발생할 때 드롭 다운 목록을 새로 고치는 것입니다. 예를 들어, 다른 DDL 변경의 값 (또는 뭔가 다른, 버튼이 클릭 또는 무엇이든) 때

$(function() { 
    $('#SomeOtherDdlId').change(function() { 
     // when the selection of some other drop down changes 
     // get the new value 
     var value = $(this).val(); 

     // and send it as AJAX request to the newly created action 
     $.ajax({ 
      url: '@Url.Action("foo")', 
      type: 'POST', 
      data: { someValue: value }, 
      success: function(result) { 
       // when the AJAX succeeds refresh the ddl container with 
       // the partial HTML returned by the Foo controller action 
       $('#ddlcontainer').html(result); 
      } 
     }); 
    }); 
}); 

또 다른 가능성은 JSON을 사용으로 구성되어 있습니다. Foo 컨트롤러 동작은 새 키/값 컬렉션을 포함하는 Json 객체 만 반환하고 AJAX 요청의 성공 콜백에서는 드롭 다운 목록을 새로 고칩니다. 이 경우 별도의 부분으로 외부화 할 필요가 없습니다. 예를 들어 :

$(function() { 
    $('#SomeOtherDdlId').change(function() { 
     // when the selection of some other drop down changes 
     // get the new value 
     var value = $(this).val(); 

     // and send it as AJAX request to the newly created action 
     $.ajax({ 
      url: '@Url.Action("foo")', 
      type: 'POST', 
      data: { someValue: value }, 
      success: function(result) { 
       // when the AJAX succeeds refresh the dropdown list with 
       // the JSON values returned from the controller action 
       var selectedDeviceModel = $('#SelectedDeviceModel'); 
       selectedDeviceModel.empty(); 
       $.each(result, function(index, item) { 
        selectedDeviceModel.append(
         $('<option/>', { 
          value: item.value, 
          text: item.text 
         }) 
        ); 
       }); 
      } 
     }); 
    }); 
}); 

그리고 마지막으로 당신의 푸 컨트롤러 액션 JSON을 반환합니다

public ActionResult Foo(string someValue) 
{ 
    return Json(new[] { 
     new { value = '1', text = 'text 1' }, 
     new { value = '2', text = 'text 2' }, 
     new { value = '3', text = 'text 3' } 
    }); 
} 

을 비슷한 예를 들어 당신이 following answer 한 번 봐 걸릴 수 있습니다.