asp.net-mvc-3 - 如何在 mvc 中使用级联下拉列表

Question

我正在使用 asp.net mvc3，我有 2 个表，我想根据这个另一个下拉列表从下拉列表中获取数据。例如，如果我选择国家，它必须显示属于该国家的状态，我使用以下代码在控制器中。

ViewBag.country= new SelectList(db.country, "ID", "Name", "--Select--");
 ViewBag.state= new SelectList("", "stateID", "Name");

   @Html.DropDownListFor(model => model.Country, (IEnumerable<SelectListItem>)ViewBag.country, "-Select-")

   @Html.DropDownListFor(model => model.state, (IEnumerable<SelectListItem>)ViewBag.state, "-Select-")

但是通过使用它，我只能获得国家。

Answer 1

有一个很好的jQuery 插件可以帮助解决这个问题......

您不想在每次有人更改国家/地区下拉列表时刷新整个页面 - 简单地更新状态下拉列表的 ajax 调用更加用户友好。

Answer 2

尝试这个，

<script type="text/javascript">
    $(document).ready(function () {
        $("#Country").change(function () {

            var Id = $("#Country").val();
            $.ajax({
                url: '@Url.Action("GetCustomerNameWithId", "Test")',
                type: "Post",
                data: { Country: Id },
                success: function (listItems) {
                    var STSelectBox = jQuery('#state');
                    STSelectBox.empty();
                    if (listItems.length > 0) {
                        for (var i = 0; i < listItems.length; i++) {
                            if (i == 0) {
                                STSelectBox.append('<option value="' + i + '">--Select--</option>');
                            }
                            STSelectBox.append('<option value="' + listItems[i].Value + '">' + listItems[i].Text + '</option>');

                        }

                    }
                    else {
                        for (var i = 0; i < listItems.length; i++) {
                            STSelectBox.append('<option value="' + listItems[i].Value + '">' + listItems[i].Text + '</option>');

                        }
                    }
                }


            });

        });
});
</script>

看法

@Html.DropDownList("Country", (SelectList)ViewBag.country, "--Select--")
    @Html.DropDownList("state", new SelectList(Enumerable.Empty<SelectListItem>(), "Value", "Text"), "-- Select --")

控制器

  public JsonResult GetCustomerNameWithId(string Country)
        {
            int _Country = 0;
            int.TryParse(Country, out _Country);
            var listItems = GetCustomerNameId(_Country).Select(s => new SelectListItem { Value = s.CountryID.ToString(), Text = s.CountryName }).ToList<SelectListItem>();
            return Json(listItems, JsonRequestBehavior.AllowGet);
        }

Answer 3

Jquery Ajax 是这类问题的最佳选择。

脚本代码如下

<script type="text/javascript">
     $(function() {
            $("#@Html.FieldIdFor(model => model.Country)").change(function() {
                var selectedItem = $(this).val();
                var ddlStates = $("#@Html.FieldIdFor(model => model.state)");

                $.ajax({
                    cache:false,
                    type: "GET",
                    url: "@(Url.Action("GetStatesByCountryId", "Country"))",
                    data: "countryId=" ,
                    success: function (data) {
                        ddlStates.html('');
                        $.each(data, function(id, option) {
                            ddlStates.append($('<option></option>').val(option.id).html(option.name));//Append all states to state dropdown through returned result
                        });
                        statesProgress.hide();
                    },
                    error:function (xhr, ajaxOptions, thrownError){
                        alert('Failed to retrieve states.');
                        statesProgress.hide();
                    }  
                });
            });
        });
</script>

控制器：

public ActionResult GetStatesByCountryId(string countryId)
        {
            // This action method gets called via an ajax request
            if (String.IsNullOrEmpty(countryId))
                throw new ArgumentNullException("countryId");

            var country = GetCountryById(Convert.ToInt32(countryId));
            var states = country != null ? GetStatesByConutryId(country.Id).ToList() : new List<StateProvince>();//Get all states by countryid
            var result = (from s in states
                          select new { id = s.Id, name = s.Name }).ToList();

            return Json(result, JsonRequestBehavior.AllowGet);
        }