地区选择操作在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之联动下拉选择控件(省、市、县联动选择)的更多相关文章

  1. .net mvc页面UI之Jquery博客日历控件

    摘要:最近在做一个博客系统,其他需要用到博客日历控件,网上搜索了很多资料,其中大部分都是javascript的,经过总结使用jquery实现了博客日历效果.代码如下: 原文链接转载请注明:http:/ ...

  2. Android SwipeRefreshLayout 官方下拉刷新控件介绍

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24521483 下面App基本都有下拉刷新的功能,以前基本都使用XListView ...

  3. Android仿苹果版QQ下拉刷新实现(一) ——打造简单平滑的通用下拉刷新控件

    前言: 忙完了结婚乐APP的开发,终于可以花一定的时间放在博客上了.好了,废话不多说,今天我们要带来的效果是苹果版本的QQ下拉刷新.首先看一下目标效果以及demo效果:      因为此效果实现的步骤 ...

  4. Android下拉刷新控件--PullToRefresh的简单使用

    Android中很多时候都会用到上下拉刷新,这是一个很常用的功能,Android的v4包中也为我们提供了一种原生的下拉刷新控件--SwipeRefreshLayout,可以用它实现一个简洁的刷新效果, ...

  5. FineReport——JS二次开发(隐藏下拉框控件的倒三角)

    在对FR控件进行二次开发的过程中,需要自定义样式,比如下拉框控件带有自动检索的功能,但是又希望它的显示样式如同文本框一样,这时就需要隐藏多余的部分. 在对在线文档的查阅中可以发现很多选择器适用于多种控 ...

  6. Android 解决下拉刷新控件和ScrollVIew的滑动冲突问题。

    最近项目要实现ScrollView中嵌套广告轮播图+RecyleView卡片布局,并且RecyleView按照header和内容的排列样式,因为RecyleView的可扩展性很强,所以我毫无疑问的选择 ...

  7. android官方下拉刷新控件SwipeRefreshLayout的使用

    可能开发安卓的人大多数都用过很多下拉刷新的开源组件,但是今天用了官方v4支持包的SwipeRefreshLayout觉得效果也蛮不错的,特拿出来分享. 简介:SwipeRefreshLayout组件只 ...

  8. [Android]下拉刷新控件RefreshableView的实现

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4172483.html 需求:自定义一个ViewGroup,实现 ...

  9. android SwipeRefreshLayout google官方下拉刷新控件

    下拉刷新功能之前一直使用的是XlistView很方便我前面的博客有介绍 SwipeRefreshLayout是google官方推出的下拉刷新控件使用方法也比较简单 今天就来使用下SwipeRefres ...

  10. Android PullToRefresh下拉刷新控件的简单使用

    PullToRefresh这个开源库早就听说了,不过一直没用过.作为一个经典的的开源库,我觉得还是有必要认识一下. 打开github上的网址:https://github.com/chrisbanes ...

随机推荐

  1. 从头开始学JavaScript (七)——函数

    原文:从头开始学JavaScript (七)--函数 一.return 函数在执行完return之后停止并立即退出. return返回值:与return: 如下两个例子: function sum(n ...

  2. win7安装ruby on rails开发环境

    前言 我们看到很多文章说ruby环境windows它是非常困难的基础上,这将是各种稀奇古怪的问题,因此,建议linux和mac发. 可是我依照教程搭了下,问题也不算太多.总过大概花费了2个半小时左右就 ...

  3. java基金会 之 HashMap统计csvWord文档

    一:知识的补充( 这个HashMap Map 和 c++的Map还是有非常大的区别,惊人的差异大的人,当然,两者的作用是相同的,但函数名出一个非常大的.即使iterator的差是非常大的 ) (1)H ...

  4. 屏蔽webbrowser控件右键的一种方法

    原文:屏蔽webbrowser控件右键的一种方法 Option ExplicitPrivate Declare Sub ZeroMemory Lib "KERNEL32" Alia ...

  5. Oracle在rownum使用结果集排序

    Oracle在rownum使用结果集排序    对于 Oracle 的 rownum 问题,非常多资料都说不支持>,>=,=,between...and,仅仅能用以上符号(<.< ...

  6. Beginning Python From Novice to Professional (5) - 条件与循环

    条件与循环 条件运行: name = raw_input('What is your name? ') if name.endswith('Gumby'): print 'Hello, Mr.Gumb ...

  7. Android开发----------- 手电筒改进版本号

    在之前的基础上 在 res 目录以下: 加入一个 drawable/local_me.xml localme_cml <selector xmlns:android="http://s ...

  8. ser2net使用

    在ubuntu下或者openwrt下安装了ser2net程序之后,可以将串口中的数据转发为以太网数据. 设置在/etc/ser2net.conf中最后: 3002:0:/dv/ttyUSB0:1152 ...

  9. Android多画面幻灯片:ViewPager基础上,利用与PagerTabStrip出生缺陷(源代码)

    近期使用ViewPager.读了几个人说是不是很清晰的信息,干脆自己写demo总结下. 样例非常easy.Activity里有三个界面能够滑动.每个界面都有一个button并设置好了监听.PagerT ...

  10. 根据首尾字节的tcp分包断包算法

    这个算是我的一点小总结吧,放出来分享给大家,原来在网上找这种算法都找了N久没找到,自己写也是走了许多弯路,就放出来遛一遛吧 大家将就这个看看, 这是其中的一个主要的方法,其余的我就不放出来了,其中的I ...