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()方法使用的特殊类，并且不适合构建您的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

1 个答案: