ASP.NET MVC多个组合框

Question

我想有一个小例子屏幕应该有两个组合.第一个应该显示国家/地区表中的国家/地区名称,并在组合中选择国家/地区名称时,下一个组合应显示为区域名称.

国家表结构:

Country Name,
Country Id

区表结构.

District id
Country id
District name

有人可以帮帮我吗？

Answer 1

这有点容易......

第一次下拉很容易,只需通过IEnumerable模型和voilá.

在第二个下拉菜单是一样简单,但只是需要一点点的代码:

所有你需要做的是调用的方法和发送第一个下拉的值,然后在你的方法,只需要调用数据库,并返回一个 JsonResult

例:

<select id="dropdown1">
    <option value="" selected="true">Select country</option>
    <% foreach(var country in Model.Countries) { %>
        <option value="<%= country.Id %>"><%= country.Name %></option>
    <% } %>
</select><br/>
<select id="dropdown2"></select>

在页面的末尾

<script>

 $(document).ready( function() {

    $("#dropdown1").bind("change", function() {
        // everytime the value of the dropdown 1 is changed, do this:

        var countryId = $("#dropdown1").val();

        $.get("/country/getDistricts", { 'country' : countryId }, function(data) { 
            $("#dropdown2").empty(); // clear old values if exist

            var options = "";

            for(i = 0; i < data.length; i++) { // build options
                options += ("<option value='" + data[i].districtId + "'>" + data[i].districtName + "</option>");
            }
            $("#dropdown2").append(options);
        });
    });
 });

</script>

在你的country控制器行动中

public ActionResult getDistricts(string country)
{
    List<Districts> districts = dbRepository.GetDistrictsByCountryId(country);

    return Json(districts, JsonRequestBehavior.AllowGet);
}