基于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 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
javascript检测两个数组是否相似
May 19 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
JavaScript命名空间模式实例详解
Jun 20 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
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 whois查询API制作方法
2011/06/23 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
jquery 分页控件实现代码
2009/11/30 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
python如何对链表操作
2020/10/10 Python
比利时买床:Beter Bed
2017/12/06 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
应届专科生个人的自我评价
2014/01/05 职场文书
酒吧创业计划书
2014/01/18 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
python入门之算法学习
2021/04/22 Python