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(); } |
实际上,增加和编辑是完成可以合成同一个页面的,这里就不演示了。
源代码下载:点击下载
asp.net MVC 下拉多级联动及编辑的更多相关文章
- .net MVC 下拉多级联动及编辑
多级联动实现,附源码.当前,部分代码是参与博客园其它网友. 新增,前台代码: <script src="~/Scripts/jquery-1.10.2.js">< ...
- jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...
- MVC 下拉框联动效果(单选)
下拉框联动效果,我们以部门--职位为例,选择部门时,关联到该部门的职位.下拉框的写法就不多说了,详细请参照前文. 视图: 其中,dept是部门的属性,deptlist是部门下拉框的属性,job是职位的 ...
- ASP.NET MVC 下拉框的传值的两种方式
以前使用WebForm变成时,下拉框传值只需直接在后台绑定代码就可以了.现在我们来看看在MVC中DropDownList是如果和接受从Controller传过来的值的. 第一种:使用DropDownL ...
- 【ASP.NET】 MVC下拉框联动
这个case主要是我在做项目的时候遇到一个需要根据input控件输入的内容,动态填充dropdown list中的内容, 实现二者联动的需求.在搜索了一些资源后,这篇博客解决了我的问题,所以记录并转载 ...
- ASP.NET MVC 下拉的使用(ViewData传递)
C#部分 public void GetViewData() { List<string> data = new List<string>(); data.Add(" ...
- ASP.NET MVC 下拉框的传值的两种方式(第二种方式未完成)
控制器代码: public ActionResult Index() { List<SelectListItem> sli = new List<SelectListItem> ...
- ASP.NET MVC下的四种验证编程方式[续篇]
在<ASP.NET MVC下的四种验证编程方式>一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式("手工验证"."标注Validation ...
- ASP.NET MVC下的四种验证编程方式
ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效性,我们将针对参数的验证成为Model绑定 ...
随机推荐
- vim配置说明20170819
一.修改-/.vim/colors/guodesert.vim " Vim color file " Maintainer: Hans Fugal <hans@fugal.n ...
- 《Spring in action》之Spring之旅
Spring框架作用是简化java开发的复杂性.下面是spring in action 对spring初步介绍. 一.主要有4种关键策略: 1. 基于POJO的轻量级和最小侵入性编程 . 2. 通过依 ...
- ArcGIS 10.1 for Server安装教程系列—— Linux下的单机安装
http://www.oschina.net/question/565065_81231 因为Linux具有稳定,功能强大等特性,因此常常被用来做为企业内部的服务器,我们的很多用户也是将Ar ...
- #HDU 3790 最短路径问题 【Dijkstra入门题】
题目: 最短路径问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- 一次次迭代 百度语音生成 api 字幕 语音的同步性 关键
发音字符 数一样 D:\myv\semHAND9myuid1523961381.avi 0.7053863117786668 --------------- 深圳市雅超服饰有限公司是一家专业设计制作高 ...
- 【数学】mex是什么
最近在看博弈论,SG函数,所以什么是mex呢 然后百度了一下得到: mex(S) 的值为集合 S 中没有出现过的最小自然数.例如,mex({1,2}) = 0.mex({0,1,2,3}) = 4
- What is an ISAPI Extension?
https://www.codeproject.com/Articles/1432/What-is-an-ISAPI-Extension Introduction Unless you have be ...
- [luoguP4142]洞穴遇险
https://www.zybuluo.com/ysner/note/1240792 题面 戳我 解析 这种用来拼接的奇形怪状的东西,要不就是轮廓线\(DP\),要不就是网络流. 为了表示奇数点(即\ ...
- bzoj3132
二维树状数组 树状数组什么的只支持修改单个数值,但是这道题要我们更新一个区域 盗图 就是这样,然后维护四个bit就行了 #include<bits/stdc++.h> using name ...
- Speed Limit
http://poj.org/problem?id=2017 #include<stdio.h> int main() { int n,mile,hour; ) { ,h = ; whil ...