MVC4中使用Html.DropDownList实现级联
本文记录了一个在MVC4中使用PartialView实现级联效果的小例子。
准备工作
首先准备一下要级联的数据,新建两个类:Province和City
public class Province
{
public string Id { get; set; } public string Name { get; set; }
} public class City
{
public string Id { get; set; } public string Name { get; set; } public string Province { get; set; }
}
并在Controller中准备好数据,
List<Province> provinceList = new List<Province>();
List<City> cityList = new List<City>(); private void InitData()
{
provinceList.Add(new Province { Id = "", Name = "河北省" });
provinceList.Add(new Province { Id = "", Name = "河南省" });
provinceList.Add(new Province { Id = "", Name = "广东省" }); cityList.Add(new City { Id = "", Name = "石家庄", Province = "" });
cityList.Add(new City { Id = "", Name = "邢台", Province = "" });
cityList.Add(new City { Id = "", Name = "保定", Province = "" }); cityList.Add(new City { Id = "", Name = "郑州", Province = "" });
cityList.Add(new City { Id = "", Name = "安阳", Province = "" });
cityList.Add(new City { Id = "", Name = "洛阳", Province = "" }); cityList.Add(new City { Id = "", Name = "广州", Province = "" });
cityList.Add(new City { Id = "", Name = "中山", Province = "" });
cityList.Add(new City { Id = "", Name = "佛山", Province = "" });
}
Controller
在控制器中创建一个返回分步视图的Action,在前台第一级调用的时候触发这个action,返回第二级需要的数据。
public ActionResult ShowCity(string provinceId)
{
InitData();
var result = cityList.Where(city => city.Province == provinceId);
ViewBag.City = result;
return PartialView("PartialCity");
}
View
先创建一个PartialView:PartialCity.cshtml,如下:
@{
ViewBag.Title = "PartialCity";
} 城市: @Html.DropDownList("city_dropdownlist", new SelectList(ViewBag.City, "Id", "Name"))
在主View中的使用这个PartialView,
<div id="province">
省份: @Html.DropDownList("province_dropdownlist", new SelectList(ViewBag.Province, "Id", "Name"))
</div>
<div id="city">
@Html.Partial("PartialCity")
</div>
最后,需要在主View页面写几行js代码,给第一级dropdownlist注册一个change事件,并且在事件触发的时候调用刚刚创建的ShowCity方法
@Scripts.Render("~/Scripts/jquery-1.7.1.min.js");
<script type="text/javascript">
$(document).ready(init); function init() {
$("select[name='province_dropdownlist']").change(function () {
var selectedProvince = $(this).val();
ShowCityWithSelectedProvince(selectedProvince);
});
} function ShowCityWithSelectedProvince(province) {
$.ajax({
url: "@Url.Action("ShowCity", "Home")",
data: { provinceId: province },
success: function (data) {
$("#city").html(data);
}
});
}
这样,就实现了级联效果。
以上
MVC4中使用Html.DropDownList实现级联的更多相关文章
- [原创]MYSQL中利用外键实现级联删除和更新
MySQL中利用外键实现级联删除.更新 MySQL支持外键的存储引擎只有InnoDB,在创建外键的时候,要求父表必须有对应的索引,子表在创建外键的时候也会自动创建对应的索引.在创建索引的时候,可以指定 ...
- MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件
场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...
- Autofac在MVC4中牛刀小试
Autofac是传说中速度最快的一套.NET高效的依赖注入框架.Autofac的介绍与使用请去参考Autofac全面解析系列(版本:3.5). 这里介绍的已经挺详细的啦. 下面我就先来说说MVC4 ...
- bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- ASP.NET MVC4中的bundles特性引发服务器拒绝访问(403错误)
在ASP.NET MVC4中微软引入了bundles特性,这个特性可以将服务器端的多个Javascript或多个css文件捆绑在一起作为一个单一的URL地址供客户端浏览器调用,从而减少了页面上Http ...
- MVC4中使用Ninject
MVC4中使用Ninject 1.NuGet获取Ninject.dll .NET技术交流群 199281001 .欢迎加入. 2.全局注册 Global.asax.cs RegisterNinje ...
- mvc4中jquery-ui日期控件datepicker的应用
mvc4中jquery-ui日期控件datepicker的应用 本文适合mvc中日期选择需要的同学: 假设读者已经具备了mvc4和javascript中的相关知识 一. 开始项目之前把项目中目录:/C ...
- GridView中两个DropDownList联动
GridView中两个DropDownList联动 http://www.cnblogs.com/qfb620/archive/2011/05/25/2057163.html Html: <as ...
- WebSocket在ASP.NET MVC4中的简单实现
WebSocket在ASP.NET MVC4中的简单实现 2013-12-21 20:48 by 小白哥哥, 810 阅读, 3 评论, 收藏, 编辑 WebSocket 规范的目标是在浏览器中实现和 ...
随机推荐
- php将汉字转换为拼音和得到词语首字母(二)
<?php class Pinyin{ private $_outEncoding = "GB2312"; public function getPinyin($str,$p ...
- MySQL(二)之服务管理与配置文件修改和连接MySQL
上一篇给大家介绍了怎么在linux和windows中安装mysql,本来是可以放在首页的,但是博客园说“安装配置类文件”不让放在首页.接下来给大家介绍一下在linux和windows下MySQL的一下 ...
- Webpack vs Gulp(转载)
理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的? 写业务逻辑代码(例如 es6,scss,pug 等) 处理成浏览器认识的(js,css,html) 浏览器自动刷新看到效果 ...
- 适配器模式(Adapter Pattern)----------结构型模式
对象适配器模式的缺点是:与类适配器模式相比,要在适配器中置换适配着类的某些方法比较麻烦.如果一定要置换掉适配者类的一个或多个方法,可以先做一个适配者类的子类,在子类中将适配者类的方法置换掉,然后再把适 ...
- mysql数据库中,查看某个数据库下的表的存储类型都有哪些
需求描述: 在备份数据库的时候,使用mysqldump进行数据库的备份,如果库中仅仅有innodb存储引擎, 那么使用--single-transaction就可以,如果还有其他的存储引擎类型就要使用 ...
- 第四章 Spring.Net 如何管理您的类___自定义对象行为
Spring.Net 一直讲求 ” 配置应用程序“,有一种需求在实际开发中不太常用,却非常有用 -> 配置对象的行为,Spring.Net 也能够完美的实现.Spring.Net 通过几个专门的 ...
- mybatis由浅入深day01_4入门程序_4.6根据用户id(主键)查询用户信息
4 入门程序 4.1 需求 根据用户id(主键)查询用户信息 根据用户名称模糊查询用户信息 添加用户 删除 用户 更新用户 4.2 环境 java环境:jdk1.7.0_72 eclipse:indi ...
- osgearth将视点绑定到一个节点上
_manip->getSettings()->setTetherMode(osgEarth::Util::EarthManipulator:: TETHER_CENTER ); //设置_ ...
- lua中类的实现原理和实践
一.基础概念 Lua 本身是函数式的语言,但借助 metatable (元表)这个强大的工具,Lua 实现操作符重载易如反掌.. 下文将详细的解释在Lua中实现类的原理,涉及到的细节点将拆分出来讲, ...
- 《C++ Primer Plus》14.3 多重继承 学习笔记
多重继承(MI)描述的是有多个直接基类的类.与单继承一样,共有MI表示的也是is-a关系.例如,可以从Awiter类和Singer类派生出SingingWaiter类:class SingingWai ...