如何在另一个下拉列表更改后刷新Html.DropDownGroupList
问题描述:
刷新Html.DropDownGroupList时遇到困难。 我有两个取决于对方的下拉列表:制作和模型。您应该将Models下拉列表分组,如您在附件截图中看到的那样。如何在另一个下拉列表更改后刷新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。
你能建议如何刷新模型下拉?
答
您的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);
});
}
});
})
+0
工作正常! :) 非常感谢你! – Orsi
你使用什么插件('DropDownGroupList()'不是MVC的一部分) ?你为什么要更新第二个下拉列表 –
你需要为你的'GetModels()'方法显示控制器方法 - 它没有以正确的结构返回数据,它需要是一个嵌套集合 - 也就是一个集合查看模型,其中包含组名称的属性和包含选项值和文本属性的视图模型的集合 –
我更新了问题,我添加了GetModels()方法。我遵循DrodownGroupList的这个例子:http://www.jquery2dotnet.com/2014/01/html5-dropdownlist-optgroup-tag-in-mvc.html – Orsi