Mvc3中的级联下拉

时间:2012-06-15 04:50:51

标签: asp.net-mvc-3

我正在使用Mvc3我有2个下拉列表,BankBranch和城市。 在第一次加载视图时,我绑定了没有级联的dropdon。然后如果用户选择城市我想根据那个改变银行分行。 我很困惑,我怎么能同时实现这两件事。

提前致谢。

1 个答案:

答案 0 :(得分:4)

这篇博客文章应该可以帮到你。它提供了普通表单帖子,microsoft ajax表单post,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>