• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ASP.NETMVC页面UI之联动下拉选择控件(省、市、县联动选择)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

地区选择操作在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("15"))
 
                    @Html.DropDownListFor(model => model.DISTRICTID, Kzrcw2013.Models.DistrictViewModel.GetDistrictSelectList("142"))

 

以上参数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);
        }

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
怎么删除TemporaryASP.NETFiles发布时间:2022-07-10
下一篇:
ASP.NET数据绑定概述发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap