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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [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);
        }