级联下拉列表的想法是,您在第一个下拉列表中选择一个值,它会触发一些操作来加载第二个下拉列表的选项。一个典型的例子是国家下拉菜单和州下拉菜单。每次用户选择一个国家/地区时,国家/地区下拉列表都应更新为该国家/地区下的州。
我将为您提供一个非常通用的国家/地区用例示例。您可以使用相同的概念来构建您的特定用例
首先,为您的视图创建一个视图模型。创建类型的属性List<SelectListItem>
用于传递构建 SELECT 元素所需的选项列表以及存储所选选项值的另一个属性。我们将为两个 SELECT 元素执行此操作。
public class CreateUserVm
{
public List<SelectListItem> Countries { set;get;}
public int SelectedCountryId { set;get;}
public List<SelectListItem> States { set;get;}
public int SelectedStateId { set;get;}
public CreateUserVm()
{
this.Countries = new List<SelectListItem>();
this.States = new List<SelectListItem>();
}
}
现在,在 GET 操作方法中,创建此视图模型的对象,初始化第一个下拉菜单的选项,在本例中为Countries
属性并将其发送到视图。
public ActionResult Create()
{
var vm=new CreateUserVm();
vm.Countries = GetCountries();
return View(vm);
}
private List<SelectListItem> GetCountries()
{
var list = new List<SelectListItem>
{
new SelectListItem() {Value = "1", Text = "USA"},
new SelectListItem() {Value = "2", Text = "India"},
};
return list;
}
现在在您的视图中,它是我们视图模型的强类型。我们将使用DropDownListFor
渲染下拉列表的辅助方法
@model CreateUserVm
@using (Html.BeginForm("Index", "Home"))
{
@Html.DropDownListFor(a=>a.SelectedCountryId,Model.Countries,"Select one")
@Html.DropDownListFor(a => a.SelectedStateId, Model.States, "Select one",
new { data_url = Url.Action("GetStates") })
<input type="Submit" />
}
这将呈现 2 个下拉菜单,其中一个带有Country
选项,第二个将为空(因为我们没有加载任何内容到States
财产)。现在我们将有一些 javascript(我们在这里使用 jquery 来轻松操作 DOM),它将监听change
第一个下拉菜单(国家/地区)的事件,读取所选值并对GetStates
方法并传递所选国家/地区选项值。
您可以看到,我为第二个下拉列表设置了 html5 数据属性,其中我将 url 存储到GetStates
方法。因此,在我的 javascript 中,我可以简单地读取此数据属性值并调用该 url 来获取数据。
$(function () {
$("#SelectedCountryId").change(function () {
var v = $(this).val();
var url = $("#SelectedStateId").data("url") + '?countryId=' + v;
var $states = $("#SelectedStateId");
$.getJSON(url, function (states) {
$states.empty();
$.each(states, function (i, item) {
$states.append($("<option>").text(item.Text).val(item.Value));
});
});
});
});
现在,让我们添加一个GetStates
接受的动作方法countryId
并在列表中返回该国家/地区的州SelectListItem
作为 JSON 数组。
public ActionResult GetStates(int countryId)
{
var states = new List<SelectListItem>();
if (countryId == 1)
{
states.Add(new SelectListItem() {Value = "101", Text = "Michigan"});
states.Add(new SelectListItem() { Value = "102", Text = "New York" });
}
else if (countryId == 2)
{
states.Add(new SelectListItem() { Value = "103", Text = "Kerala" });
states.Add(new SelectListItem() { Value = "104", Text = "Goa" });
}
return Json(states, JsonRequestBehavior.AllowGet);
}
在这里,我对国家和州进行了硬编码。但是,如果您的数据库包含此数据,请将硬编码值替换为表中的数据。
当您编辑记录时,您所要做的就是加载States
基于保存的 CountryId 的 GET 操作中的属性。