asp.net-mvc-3 - Mvc3 中的级联下拉菜单

Question

我正在使用 Mvc3，我有 2 个下拉菜单，银行分行和城市。 第一次加载 View 时，我绑定(bind)两个 dropdon 而无需级联。然后，如果用户选择城市，我想据此更改银行分行。 我很困惑如何才能同时实现这两件事。

提前致谢。

Answer 1

这篇博文应该可以帮助您入门。它提供了普通表单帖子、microsoft ajax 表单帖子、jquery ajax 等示例。

http://weblogs.asp.net/raduenuca/archive/2011/03/06/asp-net-mvc-cascading-dropdown-lists-tutorial-part-1-defining-the-problem-and-the-context.aspx

编辑: 通用代码说明

型号

public class CascadeModel {
    public SelectList<City> Cities { get; set; }
    public SelectList<BankBranch> BankBranches { get; set;}
    public int CityId { get; set; }
    public int BranchId { get; set; }
}

public class Branch {
    public int Id { get; set;}
    public string Name { get; set; }
}

Controller :

public ActionResult BranchSelector() {
     var viewData = new CascadeModel();
     viewData.Cities = new SelectList(Repository.GetAllCities(), "Id", "Name", selectedCity);
     viewData.BankBranches = new SelectList(Repository.GetBranchesByCity(selectedCity), "Id", "Name", "");
     return View(viewData);
}

public JsonResult GetBranches(int id) {
    return Json(Repository.GetBranchesByCity(id), JsonRequestBehavior.AllowGet);
}

查看:

@model CascadeModel


@Html.DropDownListFor(m => m.CityId, Model.Cities, new { style = "width:250px" })
<br />
@Html.DropDownListFor(m => m.BranchId, Model.BankBranches, new { style = "width:250px" })

<script type="text/javascript">
    $(document).ready(function() {
         $("#CityId").bind('change', function() {
             $.ajax({
                 url: '/Controller/GetBranches/' + $(this).val(),
                 success: function(data) {
                     //Clear the current branch ddl
                     //Load the new Branch data returned from the jquery call in the branches ddl
                 }
             });
         };
    });
</script>