ASP.NET MVC页面UI之联动下拉选择控件(省、市、县联动选择)
地区选择操作在WEB应用中比较常见的操作,本文在.net mvc3下实现了省市县三级联动选择功能。
本文博客出处:http://www.kwstu.com/ArticleView/admin_201392171455268 转载请注明!
一、效果图:
二、页面代码
<script src="../../Content/Js/selectlist.js"></script> <script src="../../Content/Js/systools.js"></script> @Html.DropDownListFor(model => model.PROVINCEID, Kzrcw2013.Models.ProvinceViewModel.GetProvinceSelectList()) @Html.DropDownListFor(model => model.CITYID, Kzrcw2013.Models.CityViewModel.GetCitySelectList("")) @Html.DropDownListFor(model => model.DISTRICTID, Kzrcw2013.Models.DistrictViewModel.GetDistrictSelectList(""))
以上参数15为数据库中省份ID,主要作用给省份选择框一个默认省份,142参数同意。
三、JS代码
1、JS调用代码
$("#PROVINCEID").change(function () { GetCity($(this).val(), "CITYID", "DISTRICTID", "/SysTools/GetCityList"); });
$("#CITYID").change(function () { GetArea($(this).val(), "/SysTools/GetDistrictList", "DISTRICTID"); });
联动操作触发事件。
2、JS执行代码
//省市县联动下拉列表选择共用方法
function GetCity(message, tmp6, tmp7, tmp8) {
city = tmp6;
area = tmp7;
url4 = tmp8;
$("#" + city).html(""); //清空市区SELECT控件
$("#" + area).html("");
$("#" + city).append("<option value='0' selected='selected'></option>");
$("#" + area).append("<option value='0' selected='selected'></option>");
//设置异步传输参数
var option = {
url: url4,
type: 'Get',
chche: false,
dataType: 'json',
data: { Message: message }, //发送服务器数据
success: function (data) { //成功事件
$("#" + city).empty();
$.each(data, function (i, item) {
$("<option></option>")
.val(data[i].Value)
.text(data[i].Text)
.appendTo($("#" + city));
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) { //发送失败事件
alert(textStatus);
}
};
//进行异步传输
$.ajax(option);
}
function GetArea(message, tmp9, tmp7) {
area = tmp7;
url5 = tmp9;
$("#" + area).html(""); //清空市区SELECT控件
$("#" + area).append("<option value='0' selected='selected'></option>");
//设置异步传输参数
var option = {
url: url5,
type: 'Get',
chche: false,
dataType: 'json',
data: { Message: message }, //发送服务器数据
success: function (data) { //成功事件
$("#" + area).empty();
$.each(data, function (i, item) {
$("<option></option>")
.val(data[i].Value)
.text(data[i].Text)
.appendTo($("#" + area));
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) { //发送失败事件
alert(textStatus);
}
};
//进行异步传输
$.ajax(option);
}
四、后台代码
页面初始化后台代码:
/***********获取省份列表****************/
/** 使用方法:@Html.DropDownListFor(model => model.SOURCE, KwstuBlogs.Models.TemplateViewModel.GetSelectList())*/
public static class ProvinceViewModel
{
public static IEnumerable<SelectListItem> GetProvinceSelectList()
{
KzrcwDbContent db = new KzrcwDbContent();
var selectList = db.STANDARD_PROVINCE.Select(a => new SelectListItem
{
Text = a.NAME,
Value = a.ID
});
return selectList;
}
}
/***********获取城市模版列表****************/
/** 使用方法:@Html.DropDownListFor(model => model.SOURCE, KwstuBlogs.Models.TemplateViewModel.GetSelectList())*/
public static class CityViewModel
{
public static IEnumerable<SelectListItem> GetCitySelectList(string sort)
{
KzrcwDbContent db = new KzrcwDbContent();
var selectList = db.STANDARD_CITY.Where(a => a.PROVINCE_ID == sort).Select(a => new SelectListItem
{
Text = a.CITY_NAME,
Value = a.ID
});
return selectList;
}
} /***********获取县区模版列表****************/
/** 使用方法:@Html.DropDownListFor(model => model.SOURCE, KwstuBlogs.Models.TemplateViewModel.GetSelectList())*/
public static class DistrictViewModel
{
public static IEnumerable<SelectListItem> GetDistrictSelectList(string sort)
{
KzrcwDbContent db = new KzrcwDbContent();
var selectList = db.STANDARD_DISTRICT.Where(a => a.CITY_ID == sort).Select(a => new SelectListItem
{
Text = a.DISTRICT_NAME,
Value = a.ID
});
return selectList;
}
}
联动选择后台代码
// 获取某[省份]的所有[城市]数据
public ActionResult GetCityList(string message)
{
List<STANDARD_CITY> list = db.Database.SqlQuery<STANDARD_CITY>("Select ID,CITY_NAME,PROVINCE_ID,DISTRICT_NUM from TS.STANDARD_CITY where PROVINCE_ID='" + message + "'").ToList();
SelectList pList = new SelectList(list, "ID", "CITY_NAME");
return Json(pList, JsonRequestBehavior.AllowGet);
}
// 获取某[城市]的所有[县区]数据
public ActionResult GetDistrictList(string message)
{
List<STANDARD_DISTRICT> list = db.Database.SqlQuery<STANDARD_DISTRICT>("Select ID,DISTRICT_NAME,CITY_ID from TS.STANDARD_DISTRICT where CITY_ID='" + message + "'").ToList();
SelectList pList = new SelectList(list, "ID", "DISTRICT_NAME");
return Json(pList, JsonRequestBehavior.AllowGet);
}
ASP.NET MVC页面UI之联动下拉选择控件(省、市、县联动选择)的更多相关文章
- .net mvc页面UI之Jquery博客日历控件
摘要:最近在做一个博客系统,其他需要用到博客日历控件,网上搜索了很多资料,其中大部分都是javascript的,经过总结使用jquery实现了博客日历效果.代码如下: 原文链接转载请注明:http:/ ...
- Android SwipeRefreshLayout 官方下拉刷新控件介绍
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24521483 下面App基本都有下拉刷新的功能,以前基本都使用XListView ...
- Android仿苹果版QQ下拉刷新实现(一) ——打造简单平滑的通用下拉刷新控件
前言: 忙完了结婚乐APP的开发,终于可以花一定的时间放在博客上了.好了,废话不多说,今天我们要带来的效果是苹果版本的QQ下拉刷新.首先看一下目标效果以及demo效果: 因为此效果实现的步骤 ...
- Android下拉刷新控件--PullToRefresh的简单使用
Android中很多时候都会用到上下拉刷新,这是一个很常用的功能,Android的v4包中也为我们提供了一种原生的下拉刷新控件--SwipeRefreshLayout,可以用它实现一个简洁的刷新效果, ...
- FineReport——JS二次开发(隐藏下拉框控件的倒三角)
在对FR控件进行二次开发的过程中,需要自定义样式,比如下拉框控件带有自动检索的功能,但是又希望它的显示样式如同文本框一样,这时就需要隐藏多余的部分. 在对在线文档的查阅中可以发现很多选择器适用于多种控 ...
- Android 解决下拉刷新控件和ScrollVIew的滑动冲突问题。
最近项目要实现ScrollView中嵌套广告轮播图+RecyleView卡片布局,并且RecyleView按照header和内容的排列样式,因为RecyleView的可扩展性很强,所以我毫无疑问的选择 ...
- android官方下拉刷新控件SwipeRefreshLayout的使用
可能开发安卓的人大多数都用过很多下拉刷新的开源组件,但是今天用了官方v4支持包的SwipeRefreshLayout觉得效果也蛮不错的,特拿出来分享. 简介:SwipeRefreshLayout组件只 ...
- [Android]下拉刷新控件RefreshableView的实现
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4172483.html 需求:自定义一个ViewGroup,实现 ...
- android SwipeRefreshLayout google官方下拉刷新控件
下拉刷新功能之前一直使用的是XlistView很方便我前面的博客有介绍 SwipeRefreshLayout是google官方推出的下拉刷新控件使用方法也比较简单 今天就来使用下SwipeRefres ...
- Android PullToRefresh下拉刷新控件的简单使用
PullToRefresh这个开源库早就听说了,不过一直没用过.作为一个经典的的开源库,我觉得还是有必要认识一下. 打开github上的网址:https://github.com/chrisbanes ...
随机推荐
- 从头开始学JavaScript (七)——函数
原文:从头开始学JavaScript (七)--函数 一.return 函数在执行完return之后停止并立即退出. return返回值:与return: 如下两个例子: function sum(n ...
- win7安装ruby on rails开发环境
前言 我们看到很多文章说ruby环境windows它是非常困难的基础上,这将是各种稀奇古怪的问题,因此,建议linux和mac发. 可是我依照教程搭了下,问题也不算太多.总过大概花费了2个半小时左右就 ...
- java基金会 之 HashMap统计csvWord文档
一:知识的补充( 这个HashMap Map 和 c++的Map还是有非常大的区别,惊人的差异大的人,当然,两者的作用是相同的,但函数名出一个非常大的.即使iterator的差是非常大的 ) (1)H ...
- 屏蔽webbrowser控件右键的一种方法
原文:屏蔽webbrowser控件右键的一种方法 Option ExplicitPrivate Declare Sub ZeroMemory Lib "KERNEL32" Alia ...
- Oracle在rownum使用结果集排序
Oracle在rownum使用结果集排序 对于 Oracle 的 rownum 问题,非常多资料都说不支持>,>=,=,between...and,仅仅能用以上符号(<.< ...
- Beginning Python From Novice to Professional (5) - 条件与循环
条件与循环 条件运行: name = raw_input('What is your name? ') if name.endswith('Gumby'): print 'Hello, Mr.Gumb ...
- Android开发----------- 手电筒改进版本号
在之前的基础上 在 res 目录以下: 加入一个 drawable/local_me.xml localme_cml <selector xmlns:android="http://s ...
- ser2net使用
在ubuntu下或者openwrt下安装了ser2net程序之后,可以将串口中的数据转发为以太网数据. 设置在/etc/ser2net.conf中最后: 3002:0:/dv/ttyUSB0:1152 ...
- Android多画面幻灯片:ViewPager基础上,利用与PagerTabStrip出生缺陷(源代码)
近期使用ViewPager.读了几个人说是不是很清晰的信息,干脆自己写demo总结下. 样例非常easy.Activity里有三个界面能够滑动.每个界面都有一个button并设置好了监听.PagerT ...
- 根据首尾字节的tcp分包断包算法
这个算是我的一点小总结吧,放出来分享给大家,原来在网上找这种算法都找了N久没找到,自己写也是走了许多弯路,就放出来遛一遛吧 大家将就这个看看, 这是其中的一个主要的方法,其余的我就不放出来了,其中的I ...