如何创建级联下拉列表
我有两个下拉列表用于过滤目的。如何将此下拉列表更改为catchcadaing下拉列表
public ActionResult Index() { REFINED_DBEntities db = new REFINED_DBEntities(); ViewBag.Subdivision = new SelectList(db.Retention_Model_Predictions_DS_Manual.Select(m => m.Subdivision).Distinct().OrderBy(c=>c.ToUpper()), "Subdivision"); ViewBag.UnderwriterName = new SelectList(db.Retention_Model_Predictions_DS_Manual.Select(m => m.Underwriter_Name).Distinct(), "Underwriter_Name"); return View(); }
HTML视图
@Html.DropDownList("Subdivision", (IEnumerable)ViewBag.Subdivision, "Select Region", new { @class = "form-control", @id = "subDivision" }) @Html.DropDownList("Underwriter_Name", (IEnumerable)ViewBag.UnderwriterName, "Select Underwriter", new { @class = "form-control", @id = "uwriter" })
级联下拉列表的概念是,您在第一个下拉列表中选择一个值,并触发一些操作来加载第二个下拉列表的选项。 一个典型的例子是Country下拉和State下拉。 每次用户选择国家/地区时,都应使用该国家/地区下的州更新国家/地区下拉菜单。
我将为您提供一个非常通用的国家/地区用例示例。 您可以使用相同的概念来构建特定用例
首先,为视图创建视图模型。 创建List
类型的属性,用于传递构建SELECT元素所需的选项列表,以及另一个存储所选选项值的属性。 我们将为SELECT元素执行此操作。
public class CreateUserVm { public List Countries { set;get;} public int SelectedCountryId { set;get;} public List States { set;get;} public int SelectedStateId { set;get;} public CreateUserVm() { this.Countries = new List (); this.States = new List (); } }
现在,在您的GET操作方法中,创建此视图模型的对象,初始化第一个下拉列表的选项,在本例中为Countries
属性并将其发送到视图。
public ActionResult Create() { var vm=new CreateUserVm(); vm.Countries = GetCountries(); return View(vm); } private List GetCountries() { var list = new List { 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") }) }
这将呈现2个下拉列表,一个带有Country
选项,第二个将为空(因为我们没有向States
属性加载任何内容)。 现在我们将有一些javascript(我们在这里使用jquery进行简单的DOM操作),它将监听第一个下拉列表(Country)的change
事件,读取所选值并对GetStates
方法进行ajax调用并传递选定的国家/地区选项
你可以看到,我为第二个下拉列表设置了一个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($("
现在,让我们添加一个GetStates
动作方法,该方法接受countryId
并在SelectListItem
列表中将该国家/地区的状态作为JSON数组返回。
public ActionResult GetStates(int countryId) { var states = new List(); 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); }
在这里,我对国家和国家进行了硬编码。 但是,如果您有一个包含此数据的数据库,请将硬编码值替换为表中的数据。
在编辑记录时,您只需要根据保存的CountryId在GET操作中加载States
属性。