Question

我正在尝试创建级联下拉列表，用户选择国家/地区下拉列表，然后根据所选国家/地区填充第二个下拉列表中的州。我已经设法用下面的代码来做到这一点。但是，当用户选择国家/地区时，如何还返回包含一些其他数据的部分视图以及要绑定到州下拉列表的状态列表？

让我试着解释一下。我有3个下拉列表（国家，州，城市）。加载页面时，将填充国家/地区下拉列表。当用户选择美国时。我希望在所有美国州填写州下拉列表，但也返回部分视图，该视图将显示所选美国国家的一些信息，如人口和国会大厦。当用户选择州时（例如：德克萨斯州）。我想在德克萨斯州的所有城市填充“城市”下拉列表，并返回包含其他一些数据的视图。级联就像向下钻一棵树。由于某些限制，我无法使用树。因此，我正在做这个级联下拉列表。这可能吗？

public JsonResult CountryList()
    {
        List<Country> countries = Country.GetCountries();
        return Json(countries, JsonRequestBehavior.AllowGet);
    }

    public JsonResult StateList(string CountryCode)
    {
        List<State> states = State.GetStates().Where(x => x.CountryCode == CountryCode).ToList();
        return Json(states, JsonRequestBehavior.AllowGet);
    }



<script type="text/javascript">
$(document).ready(function () {
    $.getJSON("/Home/CountryList", null, function (data) {
        var items = "<option>Select Country</option>";
        $.each(data, function (i, item) {
            items += "<option value=" + item.CountryCode + ">" + item.CountryName + "</option>";
        });
        $("#Countries").html(items);
    });

    $("#Countries").change(function () {
        var Param = { CountryCode: $("#Countries > option:selected").attr("value") };
        $.getJSON("/Home/StateList/", Param, function (data) {
            var items = "<option>Select State</option>";
            $.each(data, function (i, state) {
                items += "<option value=" + state.StateID + ">" + state.StateName + "</option>";
            });
            $("#States").html(items);
        });
    });
});

Answer 1

我认为这不是一个巧妙的方法。但是，您始终可以返回部分视图并将项目数据放置在隐藏字段中，或者返回包含所有项目的JSON，以及可应用于页面的html字符串。就个人而言，我不喜欢这些选择。

为什么通过一个请求获取项目和部分视图如此重要？为什么不做两个ajax请求？第一个获取项目（您已经拥有它），第二个获取部分视图。您可以使用JQuery GET方法轻松完成它。代码应如下所示：

$.get( "Controller/Action", { param1: "value1" } )
  .done(function( data ) {
    $('#infoContainer').html(data);
  });

通过这种方式，您可以保持代码干净，简单易懂，因为您只需要一个操作来获取下拉项目，另外一个来获取所选项目描述。

MVC级联下拉列表onchange加载另一个下拉列表和部分视图

1 个答案: