我有两个下拉列表用于过滤目的。如何将此下拉列表更改为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视图
<div class="form-group ">
@Html.DropDownList("Subdivision", (IEnumerable<SelectListItem>)ViewBag.Subdivision, "Select Region", new { @class = "form-control", @id = "subDivision" })
</div>
<div class="form-group ">
@Html.DropDownList("Underwriter_Name", (IEnumerable<SelectListItem>)ViewBag.UnderwriterName, "Select Underwriter", new { @class = "form-control", @id = "uwriter" })
</div>
级联下拉的想法是,您在第一个下拉列表中选择一个值,并触发一些操作来加载第二个下拉列表的选项。一个典型的例子是Country下拉和State下拉。每次用户选择国家/地区时,都应使用该国家/地区下的州更新国家/地区下拉菜单。
我将为您提供一个非常通用的国家/地区用例示例。您可以使用相同的概念来构建特定用例
首先,为视图创建视图模型。创建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操作),它将监听第一个下拉列表(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($("<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);
}
在这里,我对国家和国家进行了硬编码。但是,如果您有一个包含此数据的数据库,请将硬编码值替换为表中的数据。
在编辑记录时,您只需要根据保存的CountryId在GET操作中加载States
属性。