asp.net - ASP.NET MVC 4 允许用户选择州然后加载城市

Question

我有 3 个班级和桌子

1. 状态
2. 城市
3. 区域

StateId 是 FK 到 City Table，CityId 是 FK 到 Area

在创建区域表单时，我想添加 State DropDown。我在 ViewBag 中发送状态列表，但不知道如何绑定它。同样默认情况下，它会带上所有城市，大约 100 多个我只想在状态更改时绑定城市，不希望模型在第一次加载时从城市表中带来所有行。

提前致谢

Answer 1

我最近写了一篇关于 MVC4 中的级联下拉列表的博客，我认为这就是您所追求的（尽管更详细一点将不胜感激）。

http://jnye.co/Posts/12/creating-cascading-dropdownlists-using-mvc-4-and-jquery

本质上，在您的控制器中：

public ActionResult Index()  
{  
    // These countries are equivalent to your states
    var states = new List<string> {"Ohio", "California", "Florida"};  
    var stateOptions = new SelectList(states);  
    ViewBag.States = stateOptions;  
    return View();  
}  

public JsonResult GetCities(string state)  
{  
    var cities = new List<string>();  
    switch (country)  
    {  
        case "Florida":  
            states.Add("City1");  
            states.Add("City2");  
            states.Add("City3");  
            break;  
        case "Ohio":  
            states.Add("City4");  
            states.Add("City5");  
            break;  
        case "California":  
            states.Add("City6");  
            states.Add("City7");  
            break;  
    }  
    //Add JsonRequest behavior to allow retrieving states over http get  
    return Json(cities, JsonRequestBehavior.AllowGet);  
}  

那么，在你看来：

@using (Html.BeginForm())  
{  
    <div>Select state:</div>  
    <div>@Html.DropDownList("state",   
                            ViewBag.States as SelectList,   
                            "Please select",   
                            new { id = "state" })  
    </div>  
    <div>Select City:</div>  
    <div>  
        <select id="city" disabled="disabled"></select>  
    </div>  
    <input type="submit" value="Submit"/>  
}  

@section scripts{  
    <script type="text/javascript">  
        $(function() {  
            $('#state').on('change', function() {  
                var cityDropdown = $('#city');  
                //disable city drop down  
                cityDropdown.prop('disabled', 'disabled');  
                //clear drop down of old city
                cityDropdown.empty();  

                //retrieve selected state
                var state = $(this).val();  
                if (state.length > 0) {  
                    // retrieve data using a Url.Action() to construct url  
                    $.getJSON('@Url.Action("GetCities")', {  
                        state: state  
                    })  
                    .done(function (data) {  
                        //re-enable city drop down  
                        cityDropdown.removeProp('disabled');  
                        //for each returned state  
                        $.each(data, function (i, city) {  
                            //Create new option  
                            var option = $('<option />').html(city);  
                            //append city states drop down  
                            cityDropdown.append(option);  
                        });  
                    })  
                    .fail(function (jqxhr, textStatus, error) {  
                        var err = textStatus + ", " + error;  
                        console.log("Request Failed: " + err);  
                    });  
                }  
            });  
        })  
    </script>  
}