在一个ASP .NET MVC剃刀观，我有一个下拉列表如下：

In an ASP .NET MVC Razor view, I have a dropdown list as follows:

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

DeviceModelList只是一个SelectList的。

DeviceModelList is just a SelectList.

我如何动态地填补取决于就像一个按钮，点击或其他下拉选择使用客户端操作的DeviceModelList的Javascript / jQuery的/阿贾克斯？

How can I dynamically fill the DeviceModelList depending on a client side action like a button click or another drop down selection using Javascript/jQuery/Ajax?

推荐答案

您可以外部化此下拉到部分：

You could externalize this dropdown into a partial:

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

然后在主视图包括它的一些容器内：

then in your main view include it inside some container:

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

，那么你可以有一个控制器操作这需要一些参数，并根据其值也呈现此部分：

then you could have a controller action which takes some parameter and based on its value it renders this partial:

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

现在的最后部分是发送AJAX请求，当一些事件发生时刷新下拉列表中。例如，当其他一些DDL的值更改（或别的东西，点击一个按钮或其他）：

Now the last part is to send the AJAX request to refresh the drop down list when some event occurs. For example when the value of some other ddl changes (or something else, a button click or whatever):

$(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。你的富控制器动作只会返回一个包含了新的键/值集合了一些JSON对象，你会在AJAX请求成功回调刷新下拉列表中。在这种情况下，你不需要外部化到一个单独的部分。例如：

Another possibility consists into using JSON. Your Foo controller action would only return some Json object containing the new key/value collection and in the success callback of the AJAX request you would refresh the drop down list. In this case you don't need to externalize it into a separate partial. For example:

$(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：

and finally your Foo controller action will return 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回答。

For a similar example you may take a look at the following answer.