Question

我有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>  
}

ASP.NET MVC 4允许用户选择状态然后加载城市

1 个答案: