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();
} |
实际上，增加和编辑是完成可以合成同一个页面的，这里就不演示了。
源代码下载：点击下载