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

Question

我正在使用 Mvc3 我有 2 个下拉菜单，BankBranch 和城市。在第一次加载视图时，我在没有级联的情况下绑定了两个 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; }
}

控制器：

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>