省市县乡村动态级联加载控件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" οnchange="AddNextLevel('#' + '@sb.ToString()-div #','Spring-province','Spring-city','@Model.nextUrl',' .Spring-select')"></select><select id="Spring-city" name="Spring-city" class="Spring-select" οnchange="AddNextLevel('#' + '@sb.ToString()-div #','Spring-city','Spring-country','@Model.nextUrl',' .Spring-select')"></select><select id="Spring-country" name="Spring-country" class="Spring-select" οnchange="AddNextLevel('#' + '@sb.ToString()-div #','Spring-country','Spring-town','@Model.nextUrl',' .Spring-select')"></select><select id="Spring-town" name="Spring-town" class="Spring-select" οnchange="AddNextLevel('#' + '@sb.ToString()-div #','Spring-town','Spring-village','@Model.nextUrl',' .Spring-select')"></select><select id="Spring-village" name="Spring-village" class="Spring-select" οnchange="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) {//当前省份对应的selectvar sprovince = $(c + province);//异步加载所有省份，加载之后根据隐藏域的值为select赋值
    $.ajax({type: "post",url: provinceUrl,datatype: "Json",success: function (data) {if (data != null) {//清空残留
                    sprovince.empty();//追加新的optionsvar 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和修改办法，共同学习进步！

期待大家的评论，顺便可以加关注！呵呵呵

转载于:https://www.cnblogs.com/LiuShuaiXiaoBuDian/archive/2012/11/30/AreaRenderHelper2.html

省市县乡村动态级联加载控件AreaRender（二）相关推荐

Asp.net动态加载控件的一些问题
ASP.net 动态加载控件时一些问题的总结 1 .在使用LoadControl加载控件后,用户控件中的某些控件不再响应事件. 这个问题主要是由于将控件加载放在if (!Page.IsPostBack ...
2020.4.23工作记录————Regsvr32加载控件失败：“请确保该二进制存储在指定路径中。。。”
工作记录----Regsvr32加载控件失败: 之前的OCX控件今天我因为工作需要又重新写了个新的,跟之前不同的是这次的控件链接了第三方的动态库,但是在OCX控件生成完成后我使用管理员身份运行cmd对 ...
WinForm的延时加载控件概述
这篇文章主要介绍了WinForm的延时加载控件,很实用的技巧,在C#程序设计中有着比较广泛的应用,需要的朋友可以参考下本文主要针对WinForm的延迟加载在常用控件的实现做简单的描述.在进行C#项目 ...
64位 regsrv win10_Win10手动注册注册表提示regsvr32加载控件失败解决方案
regsvr32加载控件失败怎么办?当我们在使用计算机时,有时候会发现有些注册表没有注册,需要手动进行注册,但是在cmd命令中,输入命令regsvr32 xx.dll,运行提示模块数据加载失败,这怎么 ...
9206晚自习点歌功能拆解图片加载控件显示与隐藏等等
使用panel面版布局控制面版的Dock属性项目资源存放位置 bin/debug下布局图片工具栏的设置设置工具项为图文模式图在上,文在下给菜单项添加图片,并且设置图片不压缩,不缩小左右 ...
java 动态加载控件_JS动态添加节点后渲染为EasyUI控件，EasyUI动态渲染解析解决方案...
这是个小菜在实际工作中遇到的问题,相信很多EasyUI新手很可能也遇到这样的问题,因此小菜觉得有必要拿出来分享一下. 这个问题要从EasyUI的datebox组件说起,小菜用这个组件的时候,发现用$( ...
delphi7 如何加载控件
1.delphi7 如何加载Fastnet控件在CSDN中搜索了半天,都说Fastnet控件没有办法加载,要么安装delphi6.0 要么用indy,这种说法只能说明,回帖的人没有能够领会,提出问题 ...
一键打造自己的Gilde图片加载控件
自定义Gilde的使用与解释例子 Gilde控件是一个图片加载的一个工具.优点性能高,流式api.使用例子是如下 LDGlide.with(this).load("http://url&q ...
打造Android万能下拉刷新上拉加载控件
转载请注明出处:http://blog.csdn.net/binbinqq86/article/details/70159782 关于列表刷新加载的自定义控件,网上数不胜数,但别人的用起来始终不是那么 ...

省市县乡村动态级联加载控件AreaRender（二）

省市县乡村动态级联加载控件AreaRender（二）相关推荐

最新文章

热门文章

省市县乡村 动态级联加载控件AreaRender（二）

省市县乡村 动态级联加载控件AreaRender（二）相关推荐

最新文章

热门文章

省市县乡村动态级联加载控件AreaRender（二）

省市县乡村动态级联加载控件AreaRender（二）相关推荐