Mvc3中的級聯下拉菜單

Question

我正在使用Mvc3我有2個下拉菜單，BankBranch和城市。 在第一次查看負載我綁定兩個dropdon沒有級聯。那麼如果用戶選擇城市，我想根據那個更改bankbranch。 我很困惑，我怎麼能一起實現這兩件事。

在此先感謝。

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>