.net MVC 下拉多级联动及编辑
2015-06-05 15:09
411 查看
多级联动实现,附源码。当前,部分代码是参与博客园其它网友。
后台代码:
编辑逻辑:
模型ProvinceViewModel:
前台:
后台:
实际上,增加和编辑是完成可以合成同一个页面的,这里就不演示了。
源代码下载:点击下载
新增,前台代码:
<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>
后台代码:
/// <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:
public class ProvinceViewModel { /// <summary> /// 省份ID /// </summary> public int PID { get; set; } /// <summary> /// 城市ID /// </summary> public int CID { get; set; } }
前台:
<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>
后台:
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(); }
实际上,增加和编辑是完成可以合成同一个页面的,这里就不演示了。
源代码下载:点击下载
相关文章推荐
- webAPP-meta标签
- 【openstack】openstack的调度(Scheduler)
- Android intent属性之Action
- LinearLayout显示分割线
- 时间日期对象
- 屋里多少人问题
- C++类与内存
- JDK环境变量的配置
- 在命令行下进行Oracle用户解锁
- Android 点击两次退后按钮程序退出
- Linux 文件传输客户端SSH Secure Shell Client
- 【Reverse Integer】cpp
- 绘图
- 如何破解Webstorm
- web.xml文件详解
- eclipse jdk配置
- csdn添加 微博
- LeetCode Maximal Square
- HDU 1997 汉诺塔VII
- 自动提示宏