本文记录了一个在MVC4中使用PartialView实现级联效果的小例子。

准备工作

首先准备一下要级联的数据，新建两个类：Province和City

public class Province    {        public string Id { get; set; }        public string Name { get; set; }    }    public class City    {        public string Id { get; set; }        public string Name { get; set; }        public string Province { get; set; }    }

并在Controller中准备好数据，

List
     
       provinceList = new List
      
       ();        List
       
         cityList = new List
        
         ();        private void InitData()        {            provinceList.Add(new Province { Id = "1", Name = "河北省" });            provinceList.Add(new Province { Id = "2", Name = "河南省" });            provinceList.Add(new Province { Id = "3", Name = "广东省" });            cityList.Add(new City { Id = "11", Name = "石家庄", Province = "1" });            cityList.Add(new City { Id = "12", Name = "邢台", Province = "1" });            cityList.Add(new City { Id = "13", Name = "保定", Province = "1" });            cityList.Add(new City { Id = "21", Name = "郑州", Province = "2" });            cityList.Add(new City { Id = "22", Name = "安阳", Province = "2" });            cityList.Add(new City { Id = "23", Name = "洛阳", Province = "2" });            cityList.Add(new City { Id = "31", Name = "广州", Province = "3" });            cityList.Add(new City { Id = "32", Name = "中山", Province = "3" });            cityList.Add(new City { Id = "33", Name = "佛山", Province = "3" });        }
        
       
      
     

 

Controller

在控制器中创建一个返回分步视图的Action，在前台第一级调用的时候触发这个action，返回第二级需要的数据。

public ActionResult ShowCity(string provinceId)        {            InitData();            var result = cityList.Where(city => city.Province == provinceId);            ViewBag.City = result;            return PartialView("PartialCity");        }

 

View

先创建一个PartialView：PartialCity.cshtml，如下：

@{    ViewBag.Title = "PartialCity";}城市: @Html.DropDownList("city_dropdownlist", new SelectList(ViewBag.City, "Id", "Name"))

在主View中的使用这个PartialView，

     
              省份: @Html.DropDownList("province_dropdownlist", new SelectList(ViewBag.Province, "Id", "Name"))    
     
    
     
              @Html.Partial("PartialCity")    
     

最后，需要在主View页面写几行js代码，给第一级dropdownlist注册一个change事件，并且在事件触发的时候调用刚刚创建的ShowCity方法

@Scripts.Render("~/Scripts/jquery-1.7.1.min.js");

 

这样，就实现了级联效果。

以上