MVC实现多级联动
前言
多级联动(省级联动)的效果,网上现成的都有很多,各种JS实现,Jquery实现等等,今天我们要讲的是在MVC里面,如何更方便、更轻量的实现省级联动呢?
实现效果如下:
具体实现
如图所示,在HTML页非常简单,放几个下拉框即可,可参考如下代码:
<div style="margin: 50px 0">
<span>城市:</span>
<select id="Province">
<option>请选择</option>
</select> <span>项目:</span>
<select id="City_Project">
<option>请选择</option>
</select> <span>设备房:</span>
<select id="Equipment_room">
<option>请选择</option>
</select>
</div>
有了HMTL下拉框之后呢,第一步要做的就是加载页面的时候将城市这个下拉框进行填充赋值
因为是异步加载,所以我们采用使用 AJAX 请求来获得 JSON 数据来实现加载城市
function GetProvince() {
$.getJSON(
"/ShowTree/GetProvincelist",//请求地址
function (data) {
$.each(data, function (i, item) {//遍历输出每个元素
$("<option></option>").val(item["MenuID"]).text(item["MenuName"]).appendTo($("#Province"));
})
});
}
在后台 GetProvincelist 方法中,可以这么写
/// <summary>
/// 获取省份城市
/// </summary>
public JsonResult GetProvincelist()
{
var list = Pro_City();
return Json(list, JsonRequestBehavior.AllowGet);
}
这里也贴下 Pro_City 方法
/// <summary>
/// 省份城市数据
/// </summary>
/// <returns></returns>
public IList<MenuInfo> Pro_City()
{
#region 查询全部城市
var menu_list = menu.Menu();//后台查询城市数据方法
DataTable _menu_show = menu_list.Tables[];
IList<MenuInfo> li2 = new List<MenuInfo>();
//将查询出来的DataTable映射到集合中(需要查询的列名和实体一致),通过SerializeObject序列化对象集合,
//然后通过DeserializeObject 反序列化
li2 = JsonConvert.DeserializeObject<IList<MenuInfo>>(JsonConvert.SerializeObject(_menu_show));
return li2;
#endregion
}
注:序列化和反序列化在命名空间:using Newtonsoft.Json 下
这样,我们就可以得到城市数据,我们先来看看城市数据的前台和后台是怎样的?
后台查出List集合如下
在控制台中,我们输出返回的这些集合对象,刷新下界面可以看到返回数据如下:
到这里,我们只是在页面加载的时候绑定了城市,那么像开篇演示的那样,如何选中一个城市,能加载出该城市下面的所有项目呢?
change事件
首先change事件是什么?
当元素的值发生改变时,会发生 change 事件。
该事件仅适用于文本域(text field),以及 textarea 和 select 元素。
change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。
注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
知道以上知识之后,我们可以开始着手写这个事件方法,js如下:
//获取城市的 select ID添加change事件
$("#Province").change(function () {
GetCityProject();
});
function GetCityProject() {
$("#City_Project").empty();//清空项目
$("#Equipment_room").empty();//清空设备房
$.getJSON(
"/ShowTree/GetCitylist",//请求地址
{ pid: $("#Province").val() },//参数
function (data) {
$.each(data, function (i, item) {//遍历输出每个元素
$("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#City_Project"));//在此ID中追加元素 })
});
}
同样的,也是采用使用 AJAX 请求来获得 JSON 数据来实现加载城市下所有项目
后台 GetCitylist 方法可以这么写,其中pid是传入参数也是获取到的城市ID
/// <summary>
/// 获取城市
/// </summary>
/// <param name="pid"></param>
/// <returns></returns>
public JsonResult GetCitylist(string pid)
{
//通过IList<MenuInfo> City_Project_list 获取所有数据,数据库中是根据MenuParentID来区分不同层级菜单
var citys = City_Project_list().Where(m => m.MenuParentID == pid).ToList();
List<SelectListItem> item = new List<SelectListItem>();
foreach (var City in citys)
{
//将获取的List<MenuInfo> 集合,循环绑定赋值到item中
item.Add(new SelectListItem { Text = City.MenuName, Value = City.MenuID.ToString() });
}
//最后以Json格式返回
return Json(item, JsonRequestBehavior.AllowGet);
}
注:从面上循环赋值绑定可以大家应该可以猜到,我 MenuInfo实体中有三个字段分别是:MenuID、MenuParentID 、MenuName
也将 City_Project_list 获取所有数据放置如下
/// <summary>
/// 获取所有数据
/// </summary>
/// <returns></returns>
public IList<MenuInfo> City_Project_list()
{
//查询出DataTable
var menu_list = menu.Menu_List();
DataTable _menu_show = menu_list.Tables[];
IList<MenuInfo> project_list = new List<MenuInfo>();
//将查询出来的DataTable映射到集合中(需要查询的列名和实体一致),通过SerializeObject序列化对象集合,
//然后通过DeserializeObject 反序列化
project_list = JsonConvert.DeserializeObject<IList<MenuInfo>>(JsonConvert.SerializeObject(_menu_show)); return project_list;
}
这样,我们就实现了选择不同的城市,异步查询出该城市下面的所有项目,其中主要运用了Linq的Where筛选来实现。
最后的设备房同理可以查出,和项目的是一模一样的。
Demo下载
最后附上一个Demo可供各位看官参考
MVC实现多级联动的更多相关文章
- MVC地区多级联动扩展实现(非递归形式)
MVC前台界面调用方式如下: @Html.AreaDropDownList(, string.Empty) 参数说明: 第一个参数控件的名称: 第二个参数选中的地区编码: 第三个参数地区层级: 第四个 ...
- .net MVC 下拉多级联动及编辑
多级联动实现,附源码.当前,部分代码是参与博客园其它网友. 新增,前台代码: <script src="~/Scripts/jquery-1.10.2.js">< ...
- 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 2 ...
- MVC实现省级联动
前言 省级联动的效果,网上现成的都有很多,各种JS实现,Jquery实现等等,今天我们要讲的是在MVC里面,如何更方便.更轻量的实现省级联动呢? 实现效果如下: 具体实现 如图所示,在HTML页非常简 ...
- 电商门户网站商品品类多级联动SpringBoot+Thymeleaf实现
在淘宝.京东等电商网站,其门户网站都有一个商品品类的多级联动,鼠标移动,就显示,因为前端不是我做的,所以不说明前端实现,只介绍后端实现. 搭建部署SpringBoot环境 配置文件配置: 开启了对Th ...
- 微信小程序-多级联动
微信小程序中的多级联动 这里用到的案例是城市选择器 先上代码: .wxml <view class="{{boxHide}}"> <view>{{nian} ...
- PHP多级联动的学习(一)
我尝试在ThinkCMF中实现多级联动,首先我开始看了dede的联动类别管理前后台的代码以及他的数据库,经过非常多次的尝试,我渐渐有了一点想法,并给予实施. 首先写出前台的界面.如图. 然后在数据库中 ...
- vue在多级联动时,一些情况不用watch而用onchange会更好
onchange事件在内容改变且失去焦点时触发,因此在一些多级联动需要清空次级内容的时候,用onchange就非常有用了,尤其是浏览器会提前加载数据的情况下.有篇文章可以看一下,链接. PS:路漫漫其 ...
- [ PHP+jQuery ] ajax 多级联动菜单的应用:电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板
/** jQuery version: 1.8.3 Author: 小dee Date: 2014.11.8 */ 接上一篇博客. 实现带缓存的仿亚马逊下拉面板 效果图: 图1 初始 图2 点击省份 ...
随机推荐
- DEDECMS织梦文章摘要批量更改方法
我们建站有时候需要直接把数据库导入,只要修改一下基本的名称信息就可以直接用,但是遇用到一些问题.比如文章摘要不会随着文章内容的更新而更新.织梦(dede)在添加文章的时候会自动生成文章摘要,如果重新修 ...
- sketch2code 有的叫screenshot to code什么的
先mark一下项目,回头再深究 https://github.com/mzbac/sketch2code https://www.floydhub.com/emilwallner/datasets/h ...
- 使用Jacksum对文件夹和文件生成checksum
Jacksum 是一个java开源工具, 用来 给单个文件生成checksum, 也可以给整个文件中所有文件生成checksum,生产的checksum 可以是MD系列,也可sha. 你可以参考 官 ...
- 玩转vue前进刷新,后退不刷新and按需刷新
大白萝卜小课堂开讲了!带你玩转vue前进后退按需刷新! 用vue做后台管理项目,特别是有列表页.列表数据详情页.列表数据修改页功能的码友们,几乎都被vue前进后退都刷新的逻辑坑过,本萝卜更是! 萝卜的 ...
- 实战经验丨PHP反序列化漏洞总结
又到了金三银四跳槽季,很多小伙伴都开始为面试做准备,今天小编就给大家分享一个网安常见的面试问题:PHP反序列化漏洞. 虽然PHP反序列化漏洞利用的条件比较苛刻,但是一旦被利用就会产生很严重的后果,所以 ...
- [Swift]LeetCode91. 解码方法 | Decode Ways
A message containing letters from A-Z is being encoded to numbers using the following mapping: 'A' - ...
- [Swift]LeetCode658. 找到 K 个最接近的元素 | Find K Closest Elements
Given a sorted array, two integers k and x, find the kclosest elements to x in the array. The result ...
- [Swift]LeetCode773. 滑动谜题 | Sliding Puzzle
On a 2x3 board, there are 5 tiles represented by the integers 1 through 5, and an empty square repre ...
- [Swift]LeetCode865. 具有所有最深结点的最小子树 | Smallest Subtree with all the Deepest Nodes
Given a binary tree rooted at root, the depth of each node is the shortest distance to the root. A n ...
- [Swift]LeetCode995. K 连续位的最小翻转次数 | Minimum Number of K Consecutive Bit Flips
In an array A containing only 0s and 1s, a K-bit flip consists of choosing a (contiguous) subarray o ...