MVC4中使用Html.DropDownList實現級聯
阿新 • • 發佈:2018-11-16
準備工作
首先準備一下要級聯的資料,新建兩個類: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); } }); }
這樣,就實現了級聯效果。
以上