在ASP .NET MVC Razor视图中,我有一个下拉列表,如下所示:
@Html.DropDownListFor(model => model.SelectedDeviceModel, Model.DeviceModelList)
DeviceModelList只是一个SelectList。
如何根据客户端操作(例如单击按钮或使用Javascript / jQuery/Ajax进行的其他下拉选择)动态填充DeviceModelList?
您可以将此下拉列表局部化:
@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请求的成功回调中,您将刷新下拉列表。在这种情况下,您无需将其外部化为单独的部分。例如:
Foo
$(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 }) ); }); } }); }); });
最后,您的Foo控制器动作将返回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' } }); }