省市县乡村 动态级联加载控件AreaRender（二）
今天很激动啊，昨天下午赶时间写的省市县乡村 动态级联加载控件AreaRender（一）已经有博友评论了，
对于刚开始写博客的我是莫大的鼓励，我会继续写下去，逐步提高自己的文学素养，写出像 T2噬菌体博主一样受到大家欢迎的作品。
好了，言归真转，接下来我们先分析一下关于分布视图~/Views/AreaManager/AreaRender.cshtml的编写问题。
该分布视图包含两个部分：隐藏域(即用户要搜集的数据部分)和五个select下拉列表
@* //功能：实现对省市县乡村的自动级联加载 //作者：刘帅 liushuai@upway.cn //时间：2012.11.29 周四 //使用说明：首先，用户需要提供一个字典，其中键对应字段名称，值就是对应字段的值； // 其次，要提供获取省份数据的url和获取下一级区划的url。 //版本：v1.0 *@ @if (Model.data != null) { //原始数据 Dictionary<string, string> ds = Model.data; //随即生成工作区，以免相互干扰 Random random = new Random(); System.Text.StringBuilder sb = new System.Text.StringBuilder(); sb.Append((char)random.Next(65, 90)); sb.Append((char)random.Next(97, 122)); sb.Append((char)random.Next(97, 122)); sb.Append((char)random.Next(97, 122)); //定义工作区 <div id="@sb.ToString()-div"> @{ //生成隐藏域，一次按照省市县乡村的顺序进行加载，便于操作 for (int i = 0; i < ds.Count; i++) { <input type="hidden" id="@ds.ElementAt(i).Key.Replace('.', '-')" name="@ds.ElementAt(i).Key" value="@ds.ElementAt(i).Value" /> } //生成级联加载的结束标记 <input type="hidden" id="end" value="@ds.ElementAt(5).Key.Replace('.', '-')" /> //生成五个select：id，name和class的前缀均为'Spring-'以免发生冲突，也是我最喜欢的单词和季节； //onchange事件：1.刷新隐藏域的值，2.加载下一级； //第一个参数是工作区，第二个参数当前select的Id,第三个参数是下一个select的id，第四个参数是获取下一级区划的url,第五个参数是select的类 <select id="Spring-province" name="Spring-province" class="Spring-select" onchange="AddNextLevel('#' + '@sb.ToString()-div #','Spring-province','Spring-city','@Model.nextUrl',' .Spring-select')"> </select> <select id="Spring-city" name="Spring-city" class="Spring-select" onchange="AddNextLevel('#' + '@sb.ToString()-div #','Spring-city','Spring-country','@Model.nextUrl',' .Spring-select')"> </select> <select id="Spring-country" name="Spring-country" class="Spring-select" onchange="AddNextLevel('#' + '@sb.ToString()-div #','Spring-country','Spring-town','@Model.nextUrl',' .Spring-select')"> </select> <select id="Spring-town" name="Spring-town" class="Spring-select" onchange="AddNextLevel('#' + '@sb.ToString()-div #','Spring-town','Spring-village','@Model.nextUrl',' .Spring-select')"> </select> <select id="Spring-village" name="Spring-village" class="Spring-select" onchange="AddNextLevel('#' + '@sb.ToString()-div #','Spring-village','','',' .Spring-select')"> </select> <script type="text/javascript"> //触发加载省份信息 AddProvince("#" + "@sb.ToString()-div #", "Spring-province", "Spring-city", "@ds.ElementAt(0).Key.Replace('.', '-')", "@ds.ElementAt(1).Key.Replace('.', '-')", '@Model.provinceUrl', '@Model.nextUrl'); </script> } </div> }
出于对通用性的要求，我将该控件包含在一个动态生成id的div中，以避免不必要的冲突；
这样一来，该控件就可以在同一个页面中存在多个，而又不产生混淆。当然这段代码也不是一蹴而就的，是在不断地思考，不断地修改。
并且尽量减少该分部视图对外部的耦合度。
我又详细的注释，大家又不理解的地方可以提出来，共同讨论。
到目前为止，还有最终要的js文件没有编写，接下来让我们开始吧：
首先，为便于理解，我将每一个方法都独立为一个Js文件。
为了将该问题简化，我将该控件的加载过程很自然的分为两个阶段(大家很自然就能想到)：
1.为下拉选项卡赋值阶段
2.动态级联加载阶段，也就是select的onchange事件
其中第一阶段包含三个函数：AddProvince、SetValue和InitNextLevel
//功能：初始化省份,调用SetValue为select赋值 //作者：刘帅 liushuai@upway.cn //时间：2012.11.29 周四 //参数说明：c->工作区div； province->省份对应的select的id； city->市对应的select的id // f->当前隐藏域的id； s->下一个隐藏域的id； provinceUrl->获取省份信息的路径 // nextUrl->获取下一级数据的路径 //版本：v1.0 function AddProvince(c, province, city, f, s, provinceUrl, nextUrl) { //当前省份对应的select var sprovince = $(c + province); //异步加载所有省份，加载之后根据隐藏域的值为select赋值 $.ajax( { type: "post", url: provinceUrl, datatype: "Json", success: function (data) { if (data != null) { //清空残留 sprovince.empty(); //追加新的options var option = $("<option>").text(" ").val(""); sprovince.append(option); $.each(data, function (i, item) { var option = $("<option>").text(item.Name).val(item.Code) sprovince.append(option); }); SetValue(c, province, city, f, s, nextUrl); } } }); }
//功能：初始化数据时,为select赋值,并调用InitNextLevel加载下一级 // 当没有初始值时返回，当遇到结束标志是返回 //作者：刘帅 liushuai@upway.cn //时间：2012.11.29 周四 //参数说明：c->工作区div； fs->当前select的id； ss->下一个select的id // f->当前隐藏域的id； s->下一个隐藏域的id； url->获取下一级数据的路径 //版本：v1.0 function SetValue(c, fs, ss, f, s, url) { //隐藏域的值 var hiddenValue = $(c + f).val(); if (hiddenValue == 0 || hiddenValue == null || hiddenValue == 'undefined') { //alert("没有值！！"); 没有初始值，返回 return; } //为select赋值 $(c + fs).val(hiddenValue); //如果遇到结束标志，返回 if (f == $(c + "end").val()) { return; } //初始化下一级 InitNextLevel(c, fs, ss, f, s, url); }
//功能：初始化省以外的select,并调用SetValue为select赋值 //作者：刘帅 liushuai@upway.cn //时间：2012.11.29 周四 //参数说明：c->工作区div； fs->当前select的id； ss->下一个select的id // f->当前隐藏域的id； s->下一个隐藏域的id; url->获取下一级数据的路径 //版本：v1.0 function InitNextLevel(c, fs, ss, f, s, url) { //隐藏域的值，根据上一个select的值获取下级数据 var hiddenValue = $(c + f).val(); var nextSelect = $(c + ss); $.ajax({ type: "post", data: { "code": hiddenValue }, url: url, datatype: "Json", success: function (data) { if (data != null) { nextSelect.empty(); var option = $("<option>").text(" ").val(""); nextSelect.append(option); $.each(data, function (i, item) { var option = $("<option>").text(item.Name).val(item.Code) nextSelect.append(option); }); //移动到下一级别 fs = ss; ss = $(c + fs).next("select").attr("id"); f = s; s = $(c + f).next("input").attr("id"); SetValue(c, fs, ss, f, s, url); } } }); }
第二个阶段包含一个方法：AddNextLevel
//功能：select的onchange事件，保存已选值，加载下一级数据 //作者：刘帅 liushuai@upway.cn //时间：2012.11.29 周四 //参数说明：c->工作区div； fs->当前select的id； ss->下一个select的id selectClass->select的class //版本：v1.0 function AddNextLevel(c, fs, ss, url, selectClass) { //清除当前节点之后所有select的值 $(c + fs).nextAll("select").each(function (i, item) { $(item).empty(); }); var selects = $(c.substr(0, c.length - 2) + selectClass); var ids = $(c.substr(0, c.length - 2) + " input"); //遍历c区域中所有的select值，并赋值给隐藏域(包含两部分：id和name，需要重载) for (var i = 0; i < 5; i++) { ids[i].value = selects[i].value; var selectValue = $(c + selects[i].id + " option:selected").text(); ids[i + 5].value = selectValue; } var nextSelect = $(c + ss); //异步加载下一级别 $.ajax({ type: "post", data: { "code": $(c + fs + " option:selected").val() }, url: url, datatype: "Json", success: function (data) { if (data != null) { nextSelect.empty(); var option = $("<option>").text(" ").val(""); nextSelect.append(option); $.each(data, function (i, item) { var option = $("<option>").text(item.Name).val(item.Code) nextSelect.append(option); }); } } }); }
F5调试：
更改第一个省份之后：
修改第二个的所有值：
生成的html代码：
<!DOCTYPE html> <html> <head> <title>测试地区的级联加载</title> <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> </head> <body> <script src="http://www.cnblogs.com/Scripts/InitNextLevle.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/Scripts/AddNextLevel.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/Scripts/SetValue.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/Scripts/AddProvince.js" type="text/javascript"></script> <form action="/Home/Save" method="post"> <div id="Sjih-div"> <input type="hidden" id="pro-id" name="pro.id" value="650000000000" /> <input type="hidden" id="cit-id" name="cit.id" value="650100000000" /> <input type="hidden" id="cou-id" name="cou.id" value="650102000000" /> <input type="hidden" id="tow-id" name="tow.id" value="650102002000" /> <input type="hidden" id="vil-id" name="vil.id" value="650102002002" /> <input type="hidden" id="pro-name" name="pro.name" value="新疆维吾尔自治区" /> <input type="hidden" id="cit-name" name="cit.name" value="乌鲁木齐市" /> <input type="hidden" id="cou-name" name="cou.name" value="天山区" /> <input type="hidden" id="tow-name" name="tow.name" value="燕儿窝街道" /> <input type="hidden" id="vil-name" name="vil.name" value="燕儿窝南社区居委会" /> <input type="hidden" id="end" value="pro-name" /> <select id="Spring-province" name="Spring-province" class="Spring-select" onchange="AddNextLevel('#' + 'Sjih-div #','Spring-province','Spring-city','/Home/GetNextLevel',' .Spring-select')"> </select> <select id="Spring-city" name="Spring-city" class="Spring-select" onchange="AddNextLevel('#' + 'Sjih-div #','Spring-city','Spring-country','/Home/GetNextLevel',' .Spring-select')"> </select> <select id="Spring-country" name="Spring-country" class="Spring-select" onchange="AddNextLevel('#' + 'Sjih-div #','Spring-country','Spring-town','/Home/GetNextLevel',' .Spring-select')"> </select> <select id="Spring-town" name="Spring-town" class="Spring-select" onchange="AddNextLevel('#' + 'Sjih-div #','Spring-town','Spring-village','/Home/GetNextLevel',' .Spring-select')"> </select> <select id="Spring-village" name="Spring-village" class="Spring-select" onchange="AddNextLevel('#' + 'Sjih-div #','Spring-village','','',' .Spring-select')"> </select> <script type="text/javascript"> //触发加载省份信息 AddProvince("#" + "Sjih-div #", "Spring-province", "Spring-city", "pro-id", "cit-id", '/Home/GetProvinces', '/Home/GetNextLevel'); </script> </div> <div id="Rwpe-div"> <input type="hidden" id="pro-id" name="pro.id" value="650000000000" /> <input type="hidden" id="cit-id" name="cit.id" value="650100000000" /> <input type="hidden" id="cou-id" name="cou.id" value="650102000000" /> <input type="hidden" id="tow-id" name="tow.id" value="650102002000" /> <input type="hidden" id="vil-id" name="vil.id" value="650102002002" /> <input type="hidden" id="pro-name" name="pro.name" value="新疆维吾尔自治区" /> <input type="hidden" id="cit-name" name="cit.name" value="乌鲁木齐市" /> <input type="hidden" id="cou-name" name="cou.name" value="天山区" /> <input type="hidden" id="tow-name" name="tow.name" value="燕儿窝街道" /> <input type="hidden" id="vil-name" name="vil.name" value="燕儿窝南社区居委会" /> <input type="hidden" id="end" value="pro-name" /> <select id="Spring-province" name="Spring-province" class="Spring-select" onchange="AddNextLevel('#' + 'Rwpe-div #','Spring-province','Spring-city','/Home/GetNextLevel',' .Spring-select')"> </select> <select id="Spring-city" name="Spring-city" class="Spring-select" onchange="AddNextLevel('#' + 'Rwpe-div #','Spring-city','Spring-country','/Home/GetNextLevel',' .Spring-select')"> </select> <select id="Spring-country" name="Spring-country" class="Spring-select" onchange="AddNextLevel('#' + 'Rwpe-div #','Spring-country','Spring-town','/Home/GetNextLevel',' .Spring-select')"> </select> <select id="Spring-town" name="Spring-town" class="Spring-select" onchange="AddNextLevel('#' + 'Rwpe-div #','Spring-town','Spring-village','/Home/GetNextLevel',' .Spring-select')"> </select> <select id="Spring-village" name="Spring-village" class="Spring-select" onchange="AddNextLevel('#' + 'Rwpe-div #','Spring-village','','',' .Spring-select')"> </select> <script type="text/javascript"> //触发加载省份信息 AddProvince("#" + "Rwpe-div #", "Spring-province", "Spring-city", "pro-id", "cit-id", '/Home/GetProvinces', '/Home/GetNextLevel'); </script> </div> </form> </body> </html>
到这里，我已经把所有的文件都分享出来了，希望大家提出其中的bug和修改办法，共同学习进步！
期待大家的评论，顺便可以加关注！呵呵呵
