如何用asp.net mvc ajax填充第二个组合框

时间:2014-12-19 11:14:13

标签: c# asp.net ajax asp.net-mvc

我在Visual Studio 2014.1中使用aspnet MVC 5 我有一个填充了数据库中数据的组合框:

ViewBag.Brans = new SelectList(db.Brans.OrderBy(m => m.Ad), "No", "Ad");
@Html.DropDownList("Brans", null, htmlAttributes: new { @class = "form-control" })

然后我有另一个组合框。我想从第一个组合中选择一个选项后填充该组合框。 它就像从第一个组合中选择国家一样。然后城市将出现在第二个城市。

你们有谁知道怎么做?

3 个答案:

答案 0 :(得分:1)

其中一个选项是将Ajax请求发送到将返回列表项的操作

  public virtual JsonResult GetCountryStates()
        {
            return Json(
                new
                {
                    new List<SelectListItem>() {YOUR ITEMS HERE}
                });
        }

然后在你的Ajax回调体中放置类似的代码

function (data) {
                //var selValue;

                data = $.map(data, function (item, a) {
                    if (item.Selected) {
                        selValue = item.Value;
                    }
                    return "<option value=\"" + item.Value + "\" " + (item.Selected ? "selected" : "") + ">" + item.Text + "</option>";
                });
                $('statesSelect').html(data.join(""));
                $('statesSelect').val(selValue);
            },

答案 1 :(得分:0)

@fly_ua:填充依赖下拉列表的好方法 但是,如果我们发布表单和选定的值,我们从控制器获取下一个下拉数据并再次重新加载表单?这可能是安全的方式,而不是进行AJAX调用。

答案 2 :(得分:0)

$('#@Html.Encode(Html.IdFor(x => x.YourProperty))')on("Change", function (event) {
    event.preventDefault();
    var id = $(this).val();

    $.ajax({
        url: '@Url.Action("ActionName", "ControllerName")',
        type: "GET",
        data: {
            id: id,
        },
        success: function (result) {
            $('#@Html.Encode(Html.IdFor(x => x.SecondDropDownProperty))').html(result)
        }
    });
});

使用下拉列表创建一个视图,使用此视图创建rendor razor JSON

通过这样做,您将创建通用的依赖下拉列表。