如何创建级联下拉列表

Question

我有两个用于过滤的下拉列表。如何将此下拉列表更改为 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>

Answer 1

级联下拉菜单的想法是，您在第一个下拉菜单中选择一个值，它会触发一些操作来加载第二个下拉菜单的选项。一个典型的例子是 Country 下拉菜单和 State 下拉菜单。每次用户选择一个国家时，国家下拉菜单都应该更新为该国家下的州。

我将为您提供一个非常通用的 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 操作）将监听第一个下拉列表（国家）的 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 属性。