[asp.net-mvc]填充一个下拉列表中使用 Javascript/jQuery 动态

发布时间: 2017/3/25 11:33:30
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

在 ASP.NET MVC Razor 视图中,我有一个下拉列表,如下所示︰

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

DeviceModelList 是只是此时。

我如何可以动态填充取决于客户端操作,如单击按钮或另一个下拉选择使用 jQuery 诫 DeviceModelList?

解决方法 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
                        })
                    );
                });
            }
        });
    });
});

并且最后你 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' }
    });
}

为一个类似的例子你可以看看以下的答案

赞助商