MVC4中使用Html.DropDownList实现级联
2015-01-07 14:17
330 查看
本文记录了一个在MVC4中使用PartialView实现级联效果的小例子。
并在Controller中准备好数据,
在主View中的使用这个PartialView,
最后,需要在主View页面写几行js代码,给第一级dropdownlist注册一个change事件,并且在事件触发的时候调用刚刚创建的ShowCity方法
这样,就实现了级联效果。
以上
准备工作
首先准备一下要级联的数据,新建两个类:Province和Citypublic 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 = "1", Name = "河北省" }); provinceList.Add(new Province { Id = "2", Name = "河南省" }); provinceList.Add(new Province { Id = "3", Name = "广东省" }); cityList.Add(new City { Id = "11", Name = "石家庄", Province = "1" }); cityList.Add(new City { Id = "12", Name = "邢台", Province = "1" }); cityList.Add(new City { Id = "13", Name = "保定", Province = "1" }); cityList.Add(new City { Id = "21", Name = "郑州", Province = "2" }); cityList.Add(new City { Id = "22", Name = "安阳", Province = "2" }); cityList.Add(new City { Id = "23", Name = "洛阳", Province = "2" }); cityList.Add(new City { Id = "31", Name = "广州", Province = "3" }); cityList.Add(new City { Id = "32", Name = "中山", Province = "3" }); cityList.Add(new City { Id = "33", Name = "佛山", Province = "3" }); }
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); } }); }
这样,就实现了级联效果。
以上
相关文章推荐
- 使用dropdownlist的绑定_实现省市列表级联
- 创建数据库表 province 和 city ,使用 dropdownlist 的绑定,实现省市列表级联。
- 使用dropdownlist,实现省市列表级联
- 创建数据库表 province 和 city ,使用 dropdownlist 的绑定,实现省市列表级联。
- KendoUi中KendoDropDownList控件的使用——三级级联模块的实现
- 使用Javascript实现Dropdownlist级联操作中遇到的两个错误
- 使用HTML实现对汉字拼音的支持
- 使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动
- html dropdownlist 一个完整的javascript类实现
- 使用html控件中file field实现WEB上传
- 编写“使用Ajax实现三级级联菜单”中的错误总结
- 使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动
- 使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动
- [原创]使用html控件中file field实现WEB上传
- 转载---使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动
- vs2005使用DropDownList实现省份城市的联动
- 用.net实现注册用户使用RadioButtonList,DropDownList与数据库绑定,使用DropDownList实现省市联动
- 使用HTML实现对汉字拼音的支持
- 使用PHP4中的 IntegratedTemplate类实现HTML和PHP代码分离
- 使用XMLHTTP实现DropDownList的不刷新显示