如何在另一个下拉列表更改后刷新 Html.DropDownGroupList

Question

我很难刷新Html.DropDownGroupList。我有两个相互依赖的下拉菜单：品牌和型号。模型下拉列表应分组，如所附屏幕截图所示。

当我进入页面时，模型下拉列表中充满了数据并且分组正确，但是当我更改第一个下拉列表时，模型没有正确刷新。

在控制器中我有这个代码：

public ActionResult GetModels(string id)
    {
        if (!string.IsNullOrEmpty(id))
        {
            int number;
            bool result = Int32.TryParse(id, out number);
            if (!result)
                return Json(null);

            var selectedMake = makeRepository.GetMakeByID(number);
            var list1 = db.Models.Where(m => m.MakeID == selectedMake.ID).ToList();

            List<GroupedSelectListItem> models = new List<GroupedSelectListItem>();
            foreach (var items in list1)
            {
                models.Add(new GroupedSelectListItem
                {
                    Text = items.Name,
                    Value = items.ID.ToString(),
                    GroupName = items.GroupName,
                    GroupKey = items.GroupName
                });
            }
            ViewBag.Alma = models;
            return Json(models, JsonRequestBehavior.AllowGet);                
        }
        return Json(null);
    }

并在视图中：

@Html.DropDownGroupList("models", ViewBag.Alma as List<GroupedSelectListItem>, "Select Model", new
{
    @class = "dropdown-toggle col-md-9 form-control"
})

这是我尝试刷新下拉列表的代码：

$.ajax({
    type: 'POST',
    url: '@Url.Action("GetModels")',
    dataType: 'json',
    data: { id: $("#makes").val() },
    success: function (models) {
        if (window.console) {
            console.log(JSON.stringify(models))
        }
        $.each(models, function (i, model) {                        
            $("#models").append
                ('<optgroup label="'+ model.GroupName + '"><option value="' + model.Value + '">' +
                 model.Text + '</option></optgroup>'
                 );
        });
    }
});

这是刷新后下拉列表的显示方式

分组不再有效。我知道这是问题所在：

$("#models").append('<optgroup label="'+ model.GroupName + '"><option value="' + model.Value + '">' + model.Text + '</option></optgroup>');

但是如何 ajax 调用来对我的下拉菜单进行分组？我对 ajax、javascript.

没有太多经验

请问如何刷新模型下拉列表？

Answer 1

您的 GetModels() 方法返回 List<GroupedSelectListItem>，这是 DropDownGroupList() 方法使用的特殊 class，不适合构建您的 html（至少没有很多额外的代码来对脚本中的数据进行分组。

首先创建视图模型来表示您需要的分层数据

public class GroupVM
{
    public string Name { get; set; }
    public IEnumerable<OptionVM> Options { get; set; }
 }
public class OptionVM
{
    public int Value { get; set; }
    public string Text { get; set; }
}

然后修改控制器以对数据进行分组并将结果投影到视图模型

public ActionResult GetModels(int? id)
{
    if (!id.HasValue)
    {
        return Json(null);
    }
    var data = db.Models.Where(x => x.MakeID == id.Value).GroupBy(x => x.GroupName).Select(x => new GroupVM()
    {
        Name = x.Key,
        Options = x.Select(y => new OptionVM()
        {
            Value = y.ID,
            Text= y.Name
        })
    });
    return Json(data);
}

并将您的脚本修改为

var models = $('#models'); // cache it
$('#makes').change(function () {
    var id = $(this).val();
    $.ajax({
        type: 'POST',
        url: '@Url.Action("GetModels")',
        dataType: 'json',
        data: { id: id },
        success: function (data) {
            models.empty(); // clear existing options
            $.each(data, function (index, group) {
                var optGroup = $('<optgroup></optgroup>').attr('label', group.Name);
                $.each(group.Options, function (index, option) {
                    var option = $('<option></option>').val(option.Value).text(option.Text);
                    optGroup.append(option);
                });
                models.append(optGroup);
            });
        }
    });
})

如何在另一个下拉列表更改后刷新 Html.DropDownGroupList

How to refresh Html.DropDownGroupList after another dropdown changes

asp.net-mvc

html.dropdownlistfor