基于MVC3方式实现下拉列表联动(JQuery)


Posted in Javascript onSeptember 02, 2013

上次项目中遇到一个需要多个下拉列表联动的操作,今天有空将实现方式整理以便以后参考。
要达到的效果是,点击一个下拉框,则另一个下拉框的值发生对应变化。如:选择中国,则另个一下拉框里显示中国各个省份。
传统的HTML方式比较简单,实际上基于MVC的实现方式也大同小异。

直接上代码:

public class DP_Provice 
{ 
public int proviceID { get; set; } 
public string ProviceName { get; set; } 
public int ProviceNode { get; set; } 
public virtual List<DP_City> citySource { get; set; } 
} public class DP_City 
{ 
public int CityNode { get; set; } 
public string CityName { get; set; } 
public string ProviceNode { get; set; } 
}

对以上涉及到的实体类予以赋值,暂时使用一个静态类初始化简单数据:
public static class DPDataSource 
{ 
public static List<DP_Provice> InitalData() 
{ 
List<DP_Provice> source = new List<DP_Provice> 
{ 
new DP_Provice{ ProviceNode=1, ProviceName="北京", citySource=new List<DP_City>{ 
new DP_City{ 
CityNode=11, CityName="北京海淀" 
}, 
new DP_City{ 
CityNode=12,CityName="北京西城" 
} 
}}, 
new DP_Provice{ ProviceNode=2, ProviceName="山东", citySource=new List<DP_City>{ 
new DP_City{ 
CityNode=21, CityName="济南" 
}, 
new DP_City{ 
CityNode=22,CityName="德州" 
} 
}}, 
new DP_Provice{ ProviceNode=3, ProviceName="河北", citySource=new List<DP_City>{ 
new DP_City{ 
CityNode=31, CityName="石家庄" 
}, 
new DP_City{ 
CityNode=32,CityName="衡水" 
} 
}} 
}; return source; 
} 
}

具体在Controller中的调用,因为使用的JQuery中的AJAX方式,所以返回的结果类型为Json;
public ActionResult Index() 
{ 
return View("DPShow"); 
} 
List<DP_Provice> source = DPDataSource.InitalData(); public JsonResult GetProvinceSource() 
{ 
if (source == null || source.Count < 0) 
{ 
source = DPDataSource.InitalData(); 
} 
return Json(source, JsonRequestBehavior.AllowGet); 
} 
public JsonResult GetCitySource(string proviceName) 
{ 
source = DPDataSource.InitalData(); 
List<DP_City> citySource = new List<DP_City>(); 
citySource = source.Where(a => a.ProviceNode.ToString().Contains(proviceName)).First().citySource; 
return Json(citySource, JsonRequestBehavior.AllowGet); 
}

数据准备完毕,此时需要Razor视图中进行绑定和展示,代码如下:
@model MvcApplication.Models.DP_Provice 
@{ 
ViewBag.Title = "DPShow"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
<script type="text/javascript"> 
$(function myfunction() { 
GetPlant(); 
//初始化省份数据 
$("#ddlProvince").change(function ff() { //设置当省份下拉列表发生变化时,更新城市数据列表 
GetCity(); 
}); 
}); function GetPlant() { 
$("#ddlProvince").empty(); 
var url = "/Dropdown/GetProvinceSource/"; 
$.getJSON(url, function (data) { 
$.each(data, function (i, item) { 
$("<option></option>") 
.val(item["ProviceNode"]) 
.text(item["ProviceName"]) 
.appendTo($("#ddlProvince")); 
}); 
GetCity(); 
}); 
} 
function GetCity() { 
$("#ddlCity").empty(); 
var temp=$("#ddlProvince").val(); 
var url ="@Url.Action("GetCitySource", "Dropdown")" ; 
//使用MVC3中Url.Action 方法参数依次为:aciton ; controller ; area ; 
$.getJSON(url,{"proviceName":temp}, function (data) { 
//中间需要用到参数 所以采用在getJSON方法中实现 
$.each(data, function (i, item) { 
$("<option></option>") 
.val(item["CityNode"]) 
.text(item["CityName"]) 
.appendTo($("#ddlCity")); 
}); 
}); 
} 
</script> 
<! DOCTYPE html /> 
<h2> 
下拉列表联动</h2> 
<table> 
<tr> 
<td> 
<select id="ddlProvince" /> 
</td> 
<td> 
<select id="ddlCity" /> 
</td> 
</tr> 
</table>

说明:
一般来讲,采用MVC实现下拉列表绑定可以有多种方式,主要是数据绑定方式可以使用JQuery中的Ajax 方式,同时也可以使用自定义的基于MVC 的 Url.Acion 方式,个人建议使用基于MVC 的 Url.Acion。
一来是支持方式比较灵活,如果中间涉及到数据类型复杂,可以自定义,实现数据封装;
二来是JQuery 中URL在传递参数时需要格式化,否则将无法找到指定的Action。
如有大家对上述说法有异议或者更好的实现方案,请给予指正或说明,谢谢。
Javascript 相关文章推荐
jquery JSON的解析方式
Jul 25 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
LayUI表格批量删除方法
Aug 15 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 #Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 #Javascript
js的alert弹出框出现乱码解决方案
Sep 02 #Javascript
javascript中的window.location.search方法简介
Sep 02 #Javascript
js Math 对象的方法
Sep 01 #Javascript
javascript ready和load事件的区别示例介绍
Aug 30 #Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 #Javascript
You might like
PHP中的类-什么叫类
2006/11/20 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
JS日历 推荐
2006/12/03 Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
js字符串转成JSON
2013/11/07 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
js闭包实例汇总
2014/11/09 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
讲解Python中的标识运算符
2015/05/14 Python
python中的格式化输出用法总结
2016/07/28 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
使用python实现滑动验证码功能
2019/08/05 Python
python定义类self用法实例解析
2020/01/22 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
小学语文教学反思
2014/02/10 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
英文演讲稿开场白
2014/08/25 职场文书
中学生检讨书范文
2014/11/03 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
民主生活会主持词
2015/07/01 职场文书