asp.net MVC 下拉多级联动及编辑

多级联动实现，附源码。当前，部分代码是参与博客园其它网友。

新增，前台代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<script src="~/Scripts/jquery-1.10.2.js"></script> <script type="text/javascript">     $(function () {         GetProvince(); //加载省份         $("#Province").change(function () {             GetCity();         });     });     function GetProvince() {         //        $("#Province").empty();         $.getJSON(             "/Home/GetProvincelist",             function (data) {                   $.each(data, function (i, item) {                     $("<option></option>").val(item["PID"]).text(item["ProvinceName"]).appendTo($("#Province"));                 })             });         //            GetCity();     }     function GetCity() {         $("#City").empty();         $.getJSON(         "/Home/GetCitylist",         { pid: $("#Province").val() },         function (data) {             $.each(data, function (i, item) {                 $("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#City"));               })         });     } </script> <div style="margin:50px 0">     <span>省份：</span>     <select id="Province">         <option>请选择</option>     </select>       <span>市：</span>     <select id="City">         <option>请选择</option>     </select> </div>

后台代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

/// <summary> /// 模拟省份数据 /// </summary> /// <returns></returns> public List<Province> Provincelist() {     List<Province> list = new List<Province>();     list.Add(new Province() { PID = 1, ProvinceName = "广东" });     list.Add(new Province() { PID = 2, ProvinceName = "北京" });     list.Add(new Province() { PID = 3, ProvinceName = "上海" });     list.Add(new Province() { PID = 4, ProvinceName = "河北" });     list.Add(new Province() { PID = 5, ProvinceName = "贵州" });     list.Add(new Province() { PID = 6, ProvinceName = "云南" });       return list; }   /// <summary> /// 模拟城市数据 /// </summary> /// <returns></returns> public List<City> Citylist() {     List<City> cityList = new List<City>();     cityList.Add(new City() { CID = 1, PID = 1, CityName = "广州" });     cityList.Add(new City() { CID = 2, PID = 1, CityName = "深圳" });     cityList.Add(new City() { CID = 3, PID = 1, CityName = "惠州" });     cityList.Add(new City() { CID = 4, PID = 1, CityName = "湛江" });     cityList.Add(new City() { CID = 5, PID = 2, CityName = "北京" });     cityList.Add(new City() { CID = 6, PID = 3, CityName = "上海" });     cityList.Add(new City() { CID = 7, PID = 4, CityName = "唐山市" });     cityList.Add(new City() { CID = 8, PID = 4, CityName = "保定市" });     cityList.Add(new City() { CID = 9, PID = 4, CityName = "张家口市" });     return cityList; }     /// <summary> /// 获取省份 /// </summary> public JsonResult GetProvincelist() {     var list = Provincelist();     return Json(list, JsonRequestBehavior.AllowGet); }   /// <summary> /// 获取城市 /// </summary> /// <param name="pid"></param> /// <returns></returns> public JsonResult GetCitylist(int pid) {     var citys = Citylist().Where(m => m.PID == pid).ToList();       List<SelectListItem> item = new List<SelectListItem>();       foreach (var City in citys)     {         item.Add(new SelectListItem { Text = City.CityName, Value = City.CID.ToString() });     }     return Json(item, JsonRequestBehavior.AllowGet); }

　　

编辑逻辑：

模型ProvinceViewModel：

1 2 3 4 5 6 7 8 9 10 11 12

public class ProvinceViewModel {     /// <summary>     /// 省份ID     /// </summary>     public int PID { get; set; }       /// <summary>     /// 城市ID     /// </summary>     public int CID { get; set; } }

前台：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

<script src="~/Scripts/jquery-1.10.2.js"></script> <script type="text/javascript">     $(function () {         //GetProvince(); //加载省份         GetCity();         //省份变动，加载城市         $("#Province").change(function () {             GetCity();         });     });     function GetProvince() {         //        $("#Province").empty();         $.getJSON(             "/Home/GetProvincelist",             function (data) {                   $.each(data, function (i, item) {                     $("<option></option>").val(item["PID"]).text(item["ProvinceName"]).appendTo($("#Province"));                 })             });         //            GetCity();     }     function GetCity() {         $("#City").empty();         $.getJSON(         "/Home/GetCitylist",         { pid: $("#Province").val() },         function (data) {             $.each(data, function (i, item) {                 $("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#City"));               })         });     } </script> <div style="margin:50px 0">     <span>省份：</span>     @Html.DropDownListFor(model => model.PID, ViewBag.ProvinceList as IEnumerable<SelectListItem>, "＝请选择＝", new { @class = "form-control", id = "Province" })         <span>市：</span>     @Html.DropDownListFor(model => model.CID,ViewBag.CityList  as IEnumerable<SelectListItem>, "＝请选择＝", new { @class = "form-control", id = "City" }) </div>

　后台：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

public ActionResult Edit() {     ViewBag.ProvinceList = Provincelist().Select(m => new SelectListItem()     {         Text = m.ProvinceName,         Value = m.PID.ToString(),         Selected = (m.PID == 4) //测试，默认让它绑定第四个     }).ToList();     ViewBag.CityList = Citylist().Select(m => new SelectListItem()     {         Text = m.CityName,         Value = m.CID.ToString(),         Selected = (m.CID == 8) //测试，默认让它绑定第四个     }).ToList();     return View(); }

　　

实际上，增加和编辑是完成可以合成同一个页面的，这里就不演示了。

 

源代码下载：点击下载