MVC4中使用Html.DropDownList實現級聯

本文記錄了一個在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<Province> provinceList = new List<Province>();
        List<City> cityList = new List<City>();

        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，

    <div id="province">
        省份: @Html.DropDownList("province_dropdownlist", new SelectList(ViewBag.Province, "Id", "Name"))
    </div>
    <div id="city">
        @Html.Partial("PartialCity")
    </div>

最后，需要在主View頁面寫幾行js代碼，給第一級dropdownlist注冊一個change事件，並且在事件觸發的時候調用剛剛創建的ShowCity方法

@Scripts.Render("~/Scripts/jquery-1.7.1.min.js");
<script type="text/javascript">
    $(document).ready(init);

    function init() {
        $("select[name='province_dropdownlist']").change(function () {
            var selectedProvince = $(this).val();
            ShowCityWithSelectedProvince(selectedProvince);
        });
    }

    function ShowCityWithSelectedProvince(province) {
        $.ajax({
            url: "@Url.Action("ShowCity", "Home")",
            data: { provinceId: province },
            success: function (data) {
                $("#city").html(data);
            }
        });
    }

 

這樣，就實現了級聯效果。

以上