C# 基于另一个Dropdownlist（级联Dropdownlist）使用MVC2填充Dropdownlist

我正在制作一个关于车辆的应用程序。我需要两个下拉列表：

• 品牌：所有汽车品牌
• 模型：属于选定对象的模型 Make DropDownList的值

在MVC2中是如何实现的？

我的想法是：当我的第一个列表被选中时，我是否使用ajax调用，然后将模型向后拉以绑定到模型DDL？模型绑定将如何以这种方式发挥作用

更新我发布了我最后做的事情作为答案。它是超级简单的，效果非常好

---

如果你觉得有这种倾向，你也可以使用get，但你必须指定你想这样做<代码>返回Json（citiesList，JsonRequestBehavior.AllowGet）

这里有一个很好的方法：

假设我们有两个下拉列表“国家”和“城市”，默认情况下，“城市”下拉列表处于禁用状态，当选择国家时，会发生以下情况：

1. city drop down list gets enabled.
2. An AJAX call is made to an action method with the selected country and a list of cities is returned.
3. the city drop down list is populated with the JSON data sent back.

原始代码的学分从转到。此示例是从中提取的简化版本。

HTML

<select id="Country">
// a List of Countries Options Goes Here.
</select></div>

<select id="City" name="City" disabled="disabled">
// To be populated by an ajax call
</select>

---

行动方法

[HttpGet]
public ActionResult GetCities(string country)
{
    Check.Require(!string.IsNullOrEmpty(country), "State is missing");

    var query  = // get the cities for the selected country.

    // Convert the results to a list of JsonSelectObjects to 
    // be used easily later in the loadSelect Javascript method.         
    List<JsonSelectObject> citiesList = new List<JsonSelectObject>();
        foreach (var item in query)
        {
            citiesList.Add(new JsonSelectObject { value = item.ID.ToString(),
                                                  caption = item.CityName });
        }        

    return Json(citiesList, JsonRequestBehavior.AllowGet);
}

2.函数

loadSelect

是一个助手方法，它获取原始类型为

JsonSelectObject

的json对象列表，将其转换为要在调用下拉列表中插入的选项列表。这是源代码中引用的“jQuery In Action”一书中的一个很酷的技巧，它包含在您需要引用的

jQuery.jqia.selects.js

文件中。下面是该js文件中的代码：

(function($) {
    $.fn.emptySelect = function() {
        return this.each(function() {
            if (this.tagName == 'SELECT') this.options.length = 0;
        });
    }

    $.fn.loadSelect = function(optionsDataArray) {
        return this.emptySelect().each(function() {
            if (this.tagName == 'SELECT') {
                var selectElement = this;
                selectElement.add(new Option("[Select]", ""), null);
                $.each(optionsDataArray, function(index, optionData) {
                    var option = new Option(optionData.caption,
                                  optionData.value);
                    if ($.browser.msie) {
                        selectElement.add(option);
                    }
                    else {
                        selectElement.add(option, null);
                    }
                });
            }
        });
    }

})(jQuery);

此方法可能很复杂，，，但最终您将拥有一个干净紧凑的代码，可以在其他任何地方使用

我希望这会有帮助

---

更新

在AJAX调用中使用POST而不是GET

您可以用以下代码替换

$.getJSON

调用，以使用POST而不是GET进行ajax调用

$.post("/City/GetCities/", { country: countryVal }, function(data) {
     citySet.loadSelect(data);
 });

还请记住，通过使用[HttpPost]更改[HttpGet]注释来更改操作方法以接受POST请求，并在操作方法中返回结果时删除

JsonRequestBehavior.AllowGet

重要提示

请注意，我们使用的是选定项的值，而不是名称。例如，如果用户选择了以下选项

<option value="US">United States</option>

并使用与ViewModel属性相同的名称命名select元素

<select id="Maker" name="Maker">
// a List of Countries Options Goes Here.
</select></div>

<select id="Model" name="Model" disabled="disabled">
// To be populated by an ajax call
</select>

//这里有一个国家选项列表。
//由ajax调用填充

然后，选定的值将自动绑定到ViewModel，您可以在操作方法中直接访问它们

如果该页面是针对该ViewModel的强类型页面，则此操作将起作用。

---

注意：对于第一个列表（Makers列表），您可以在ViewModel中创建SelectList类型的Makers列表，并使用HTML帮助器自动使用ViewModel中的列表填充Makers下拉列表。代码将如下所示：

<%= Html.DropDownListFor(model => model.Maker, Model.MakersList) %>

model.Maker，model.MakersList）%>

在这种情况下，此选择的生成名称也将是“Maker”（ViewModel中属性的名称）

---

我希望这就是您想要的答案。

最简单的方法是使用jQuery“cascade”插件。 （请看演示页面）

如果您想使用ajax解析值，它还可以帮助您，并且可以从前面的答案中删除大量代码，因此您可以专注于您的逻辑：）

您可以在google中找到许多示例，但最终只得到以下脚本：

$('#myChildSelect').cascade('#myParentSelect', 
{
    ajax: '/my/url/action',
    template: function(item) {
        return "<option value='" + item.value + "'>" + item.text + "</option>"; },
    match: function(selectedValue) { return this.when == selectedValue; }    
});

$（“#myChildSelect”）.cascade（“#myParentSelect”，
{
ajax:“/my/url/action”，
模板：功能（项目）{
返回“+item.text+”；}，
匹配：函数（selectedValue）{返回this.when==selectedValue；}
});

这就是我最后做的。。。不需要额外的插件/1000行代码

Html

//第一个DDL是从my ViewModel中的列表馈送的，您可以更改此设置。。。

JQuery

$（文档）.ready（函数（）{
$（'#MakeList'）。更改（函数（）{
$.ajaxSetup（{cache:false}）；
var selectedItem=$（this.val（）；
如果（selectedItem==“”| | selectedItem==0）{
//什么也不做或隐藏。。。？
}否则{
$.post（“”+$（“#MakeList>option:selected”）.attr（“值”）、函数（数据）{
var项目=”；
$。每个（数据，函数（i，数据）{
项目+=“”+数据。名称+“”；
});
$（“#ModelID”）.html（项目）；
$（“#ModelID”）.removeAttr（'disabled'）；
});
}
});
});

行动

[HttpPost]
公共操作结果GetModelsByMake（int id）
{
Models.TheDataContext db=新的Models.TheDataContext（）；
List models=db.models.Where（p=>p.MakeID==id.ToList（）；
返回Json（模型）；
}

Whoah，我正要发布一个答案，但它不会像这一个那么全面。干得好（+1）。另外，对于json web服务，尝试使用POST而不是GET-更安全。除此之外，答案还不错。我相信如果我理解了你的问题，你能更具体地说明你想绑定到的模型吗？我想我的问题是，我如何访问控制器中那些dropdownlists的选定值？有没有办法将它绑定到我的viewmodel？我现在知道你的问题了，我会在一分钟内用答案更新帖子。酷-谢谢。更新DDL真是太复杂了=/感谢您分享您的解决方案+1，最好将Ajax调用的逻辑移动到一个单独的文件中，并将select填充到一个新方法中。这样它就更容易重复使用。真的吗

<select id="Maker" name="Maker">
// a List of Countries Options Goes Here.
</select></div>

<select id="Model" name="Model" disabled="disabled">
// To be populated by an ajax call
</select>

<%= Html.DropDownListFor(model => model.Maker, Model.MakersList) %>

$('#myChildSelect').cascade('#myParentSelect', 
{
    ajax: '/my/url/action',
    template: function(item) {
        return "<option value='" + item.value + "'>" + item.text + "</option>"; },
    match: function(selectedValue) { return this.when == selectedValue; }    
});

//The first DDL is being fed from a List in my ViewModel, You can change this...
<%: Html.DropDownList("MakeList", new SelectList(Model.Makes, "ID", "Name")) %>
<select id="ModelID" name="ModelID" disabled="disabled"></select>

    $(document).ready(function () {
        $('#MakeList').change(function () {
            $.ajaxSetup({ cache: false });
            var selectedItem = $(this).val();
            if (selectedItem == "" || selectedItem == 0) {
                //Do nothing or hide...?
            } else {
                $.post('<%: ResolveUrl("~/Sell/GetModelsByMake/")%>' + $("#MakeList > option:selected").attr("value"), function (data) {
                    var items = "";
                    $.each(data, function (i, data) {
                        items += "<option value='" + data.ID + "'>" + data.Name + "</option>";
                    });
                    $("#ModelID").html(items);
                    $("#ModelID").removeAttr('disabled');
                });
            }
        });
    });

    [HttpPost]
    public ActionResult GetModelsByMake(int id)
    {
        Models.TheDataContext db = new Models.TheDataContext();
        List<Models.Model> models = db.Models.Where(p=>p.MakeID == id).ToList();

        return Json(models);
    }