MVC 4 Razor - 创建动态 DropDownList

我正在尝试创建一个具有两个 DropDownList 的视图。第二个 DropDownList 中的可用选项取决于用户在第一个 DropDownList 中选择的选项。我将此数据传递到 ViewBag 中的视图，如下所示：

   List<SelectListItem> firstBoxChoices =  ViewBag.firstBoxChoices;
   Dictionary<string, List<SelectListItem>> secondBoxDict = ViewBag.secondBoxDict;

第一个对象具有第一个 DropDownList 的选项。当用户选择其中之一时，我需要从我的词典中获取第二个 DropDownList 的适当选项列表。我只是不知道如何实现这一目标。如果我在 Javascript onchange() 函数中获得第一个 DropDownList 的新选择，则似乎没有任何方法可以使用该值作为我的 C# 字典的键。

当然，我在网上看到过这个功能，所以我知道它一定是可能的。我怎样才能实现这个目标？

Thanks!

有几种方法可以做到这一点，而不强迫您在模型中存储所有可能的数据项，我更喜欢使用 Javascript/JQuery。以下是国家/州级联下拉列表的示例：

当选择一个国家/地区时，Javascript 用于获取状态：

<script type="text/javascript">
    function AppendUrlParamTokens(url, params) {

        for (var param in params) {
            if (params[param] == null) {
                delete params[param];
            }
        }

        return url + "?" + jQuery.param(params);
    }

    function OnCountriesChange(ddl) {
        jQuery.getJSON(AppendUrlParamTokens('@Url.Action("GetStates", "Data")', { countryId: ddl.options[ddl.selectedIndex].value }), function (result) {
            var target = jQuery('#states_ddl');
            target.empty();
            jQuery(result).each(function() {
                jQuery(document.createElement('option'))
                    .attr('value', this.Value)
                    .text(this.Text)
                    .appendTo(target);
            });
        });
    };
</script>

国家/地区下拉列表：

@Html.DropDownListFor(model => model.Country, new SelectList(Model.Countries, "Value", "Text", Model.PreviousCountrySelected), "(Select One)", new { id = "countries_ddl", onchange = "OnCountriesChange(this)" })

状态下拉列表：

Html.DropDownListFor(model => model.State,
                              Model.States != null
                                       ? new SelectList(Model.States, "Value", "Text", Model.PreviousStateSelected)
                                       : new SelectList(new List<SelectListItem>(), "Value", "Text"),
                              new { id = "states_ddl" })

检索状态的控制器方法：

public ActionResult GetStates(short? countryId)
{
    if (!countryId.HasValue)
    {
        return Json(new List<object>(), JsonRequestBehavior.AllowGet);
    }

    var data = GetAllStatesForCountry(countryId.Value).Select(o => new { Text = o.StateName, Value = o.StateId });

    return Json(data, JsonRequestBehavior.AllowGet);
}

这个想法是，在选择下拉菜单 1 时，您使用 ajax 来检索第二个下拉菜单的值。

Edit:忘记包含构建 url 的实用方法