asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

　　本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例。前段时间需要作一个的Web前端应用，需要用多个框架，一个典型的应用场景是省市三级联动，基于此应用，特将三种主要的ajax框架略作整理，方便有需要的朋友查阅。

　　在示例之前，我们先设置一个演示数据源，新建一个项目，项目结构如图：

　　主要文件如下：

　　AreaModel.cs:

复制代码代码如下:

　　using System;

　　using System.Collections.Generic;

　　namespace Downmoon.Framework.Model

　　{

　　#region PopularArea

　　public class Area

　　{

　　private string m_Area_ID;

　　/// <summary>

　　/// 地区编号

　　/// </summary>

　　public string Area_ID

　　{

　　get { return m_Area_ID; }

　　set { m_Area_ID = value; }

　　}

　　private string m_Area_Name;

　　/// <summary>

　　/// 地区名称

　　/// </summary>

　　public string Area_Name

　　{

　　get { return m_Area_Name; }

　　set { m_Area_Name = value; }

　　}

　　private double m_Area_Order;

　　/// <summary>

　　/// 排序

　　/// </summary>

　　public double Area_Order

　　{

　　get { return m_Area_Order; }

　　set { m_Area_Order = value; }

　　}

　　private int m_Area_Layer;

　　/// <summary>

　　/// 层级

　　/// </summary>

　　public int Area_Layer

　　{

　　get { return m_Area_Layer; }

　　set { m_Area_Layer = value; }

　　}

　　private string m_Area_FatherID;

　　/// <summary>

　　/// 父级ID

　　/// </summary>

　　public string Area_FatherID

　　{

　　get { return m_Area_FatherID; }

　　set { m_Area_FatherID = value; }

　　}

　　public Area() { }

　　public Area(string id, string name, double order, int layer, string father)

　　{

　　this.Area_ID = id;

　　this.Area_Name = name;

　　this.m_Area_Order = order;

　　this.m_Area_Layer = layer;

　　this.m_Area_FatherID = father;

　　}

　　#endregion

　　}

　　AreaControl.cs:

复制代码代码如下:

　　using System;

　　using System.Collections.Generic;

　　using Downmoon.Framework.Model;

　　namespace Downmoon.Framework.Controllers

　　{

　　public class AreaList : IArea

　　{

　　// Area singleton

　　private static AreaList instance;

　　public static AreaList Instance

　　{

　　get

　　{

　　if (AreaList.instance == null)

　　{

　　AreaList.instance = new AreaList();

　　}

　　return AreaList.instance;

　　}

　　public List<Area> GetAreaList()

　　{

　　List<Area> Areas = new List<Area>();

　　Areas.Add(new Area("110000", "北京市", 0, 1, "000000"));

　　Areas.Add(new Area("110100", "市辖区", 0, 2, "110000"));

　　Areas.Add(new Area("110101", "东城区", 0, 3, "110100"));

　　Areas.Add(new Area("110102", "西城区", 0, 3, "110100"));

　　Areas.Add(new Area("110103", "崇文区", 0, 3, "110100"));

　　Areas.Add(new Area("330000", "浙江省", 0, 1, "000000"));

　　Areas.Add(new Area("330100", "杭州市", 0, 2, "330000"));

　　Areas.Add(new Area("330200", "宁波市", 0, 2, "330000"));

　　Areas.Add(new Area("330102", "上城区", 0, 3, "330100"));

　　Areas.Add(new Area("330103", "下城区", 0, 3, "330100"));

　　Areas.Add(new Area("330104", "江干区", 0, 3, "330100"));

　　Areas.Add(new Area("330105", "拱墅区", 0, 3, "330100"));

　　Areas.Add(new Area("330106", "西湖区", 0, 3, "330100"));

　　Areas.Add(new Area("330203", "海曙区", 0, 3, "330200"));

　　Areas.Add(new Area("330204", "江东区", 0, 3, "330200"));

　　Areas.Add(new Area("330205", "江北区", 0, 3, "330200"));

　　Areas.Add(new Area("330206", "北仑区", 0, 3, "330200"));

　　Areas.Add(new Area("330211", "镇海区", 0, 3, "330200"));

　　return Areas;

　　}

　　public List<Area> GetAreaListFindByParentID(string filter)

　　{

　　return GetAreaList().FindAll(

　　delegate(Area ar)

　　{

　　return ar.Area_FatherID == filter;

　　}

　　);

　　}

　　Factory.cs

复制代码代码如下:

　　using System;

　　using System.Collections.Generic;

　　//using Downmoon.Framework.Model;

　　namespace Downmoon.Framework.Controllers

　　{

　　public class Factory

　　{

　　public static IArea GetAreaController()

　　{

　　return AreaList.Instance;

　　}

　　IArea.cs

复制代码代码如下:

　　using System;

　　using System.Collections.Generic;

　　using System.Text;

　　using Downmoon.Framework.Model;

　　namespace Downmoon.Framework.Controllers

　　{

　　public interface IArea

　　{

　　List<Area> GetAreaList();

　　List<Area> GetAreaListFindByParentID(string filterID);

　　}

　　一、基于aspnet自带的Ajax框架，主要好处是与asp.net完全集成，无需写过多的 js。缺点是在framework2下需作一些设置，在Framework 4下无需设置。

　　Framework 2：

　　需首先在web.config文件中作配置：

复制代码代码如下:

　　<?xml version="1.0"?>

　　</sectionGroup>

　　</configSections>

　　<system.web>

　　<pages>

　　</controls>

　　</pages>

　　</assemblies>

　　</compilation>

　　</httpHandlers>

　　</httpModules>

　　</system.web>

　　<system.webServer>

　　</modules>

　　<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode"

　　type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

　　<add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode"

　　type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

　　</handlers>

　　</system.webServer>

　　</configuration>

　　前台页面：

复制代码代码如下:

　　<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">

　　</asp:ScriptManager>

　　<div>

　　<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

　　<tr>

　　请选择省/市/区：

　　</td>

　　<asp:DropDownList ID="dpProvince" runat="server"

　　AutoPostBack="true" onselectedindexchanged="dpProvince_SelectedIndexChanged" />

　　<asp:DropDownList ID="dpCity" runat="server" AutoPostBack="true"

　　onselectedindexchanged="dpCity_SelectedIndexChanged" />

　　<asp:DropDownList ID="dpArea" runat="server" AutoPostBack="false"

　　</td>

　　</tr>

　　<tr>

　　</td>

　　<asp:UpdateProgress ID="UpdateProgress1" runat="server">

　　正在查询，请稍候……………………</ProgressTemplate>

　　</asp:UpdateProgress>

　　</td>

　　</tr>

　　</table>

　　</ContentTemplate>

　　<asp:AsyncPostBackTrigger ControlID="dpProvince" EventName="SelectedIndexChanged" />

　　<asp:AsyncPostBackTrigger ControlID="dpCity" EventName="SelectedIndexChanged" />

　　</Triggers>

　　</asp:UpdatePanel>

　　</div>

　　Framework 4：与代码完全一样，只是无需在web.config中作配置。

　　如图：

asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

　　二、基于JQuery1.4.1的Ajax框架，主要好处是与后续版本的asp.net完全集成。

　　基于ashx作一个 Request，主要代码：

复制代码代码如下:

　　using System;

　　using System.Collections.Generic;

　　using System.Web;

　　using Downmoon.Framework.Controllers;

　　using Downmoon.Framework.Model;

　　using System.Text;

　　namespace dropdown_JQuery14_Net2

　　{

　　/// <summary>

　　/// Summary description for AjaxRequest

　　/// </summary>

　　public class AjaxRequest : IHttpHandler

　　{

　　public void ProcessRequest(HttpContext context)

　　{

　　string Area_FatherID = string.Empty;

　　if (context.Request["pid"] != null)

　　{ Area_FatherID = context.Request["pid"].ToString(); }

　　string parentId = string.Empty;

　　//mydbDataContext db = new mydbDataContext();

　　//根据传过来的Value值进行查询

　　//List<ChinaStates> list = db.ChinaStates.Where(c => c.ParentAreaCode == strId).ToList();

　　List<Area> list = Factory.GetAreaController().GetAreaListFindByParentID(Area_FatherID);

　　context.Response.ContentType = "application/json";

　　context.Response.ContentEncoding = Encoding.UTF8;

　　context.Response.Write(ListToJson(list));

　　context.Response.End();

　　}

　　public string ListToJson(List<Area> list)

　　{

　　StringBuilder sb = new StringBuilder();

　　if (list != null)

　　{

　　sb.Append("[");

　　for (int i = 0; i < list.Count; i++)

　　{

　　sb.Append("{");

　　sb.Append("\"Area_ID\":\"" + list[i].Area_ID + "\",");

　　sb.Append("\"Area_Name\":\"" + list[i].Area_Name + "\"");

　　//sb.Append("\"Area_FatherID\":\"" + list[i].Area_FatherID + "\"");

　　if (i != list.Count - 1)

　　{

　　sb.Append("},");

　　}

　　sb.Append("}");

　　sb.Append("]");

　　return sb.ToString();

　　}

　　public bool IsReusable

　　{

　　get

　　{

　　return false;

　　}

　　前台：aspx

复制代码代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<mce:style type="text/css"><!--

　　#dpCity

　　{

　　display: none;

　　position: relative;

　　}

　　#dpArea

　　{

　　display: none;

　　position: relative;

　　}

　　--></mce:style><style type="text/css" mce_bogus="1"> #dpCity

　　{

　　display: none;

　　position: relative;

　　}

　　#dpArea

　　{

　　display: none;

　　position: relative;

　　}

　　</style>

　　<mce:script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.js" mce_src="Scripts/jquery-1.4.1.js"></mce:script>

　　</head>

　　<body>

　　<div>

　　请选择省/市/区： <asp:DropDownList ID="dpProvince" runat="server" />

　　<asp:DropDownList ID="dpCity" runat="server">

　　</asp:DropDownList>

　　<asp:DropDownList ID="dpArea" runat="server" AutoPostBack="false" />

　　</div>

<mce:script language="javascript" type="text/javascript"><!--

　　$(function () {

　　var $dp1 = $("#dpProvince");

　　var $dp2 = $("#dpCity");

　　var $dp3 = $("select[name$=dpArea]");

　　$dp1.focus();

　　//alert($dpCity);

　　loadAreas("000000", "0");

　　$dp1.bind("change keyup", function () {

　　if ($(this).val() != "") {

　　//alert($("select option:selected").val());

　　//loadAreas($("select option:selected").val(), "1");

　　var strPid = $dp1.attr("value"); //获取城市

　　loadAreas(strPid, "1");

　　$dp2.fadeIn("slow");

　　} else {

　　$dp2.fadeOut("slow");

　　}

　　});

　　$dp2.bind("change keyup", function () {

　　var strCId = $dp2.attr("value"); //获取城市

　　if ($(this).val() != "") {

　　loadAreas(strCId, "2");

　　$dp3.fadeIn("slow");

　　} else {

　　$dp3.fadeOut("slow");

　　}

　　});

　　function loadAreas(selectedItem, level) {

　　$.getJSON("AjaxRequest.ashx?pid=" + selectedItem, function (data) {

　　switch (level) {

　　case "0":

　　$("#dpProvince").html("");

　　$("#dpProvince").append("<option value='' selected='selected'>请选择...</option>");

　　for (var i = 0; i < data.length; i++) {

　　$("#dpProvince").append($("<option></option>").val(data[i].Area_ID).html(data[i].Area_Name));

　　};

　　break;

　　case "1":

　　$("#dpCity").html("");

　　$("#dpCity").append("<option value='' selected='selected'>请选择...</option>");

　　for (var i = 0; i < data.length; i++) {

　　$("#dpCity").append($("<option></option>").val(data[i].Area_ID).html(data[i].Area_Name));

　　};

　　break;

　　case "2":

　　$("#dpArea").html("");

　　$("#dpArea").append("<option value='' selected='selected'>请选择...</option>");

　　for (var i = 0; i < data.length; i++) {

　　$("#dpArea").append($("<option></option>").val(data[i].Area_ID).html(data[i].Area_Name));

　　};

　　break;

　　default:

　　break;

　　}

　　});

　　}

　　// --></mce:script>

　　</form>

　　</body>

　　</html>

asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

　　三、基于ExtJS 3.2的Ajax框架。

　　后台ashx:

复制代码代码如下:

　　using System;

　　using System.Collections.Generic;

　　using System.Web;

　　using Downmoon.Framework.Controllers;

　　using Downmoon.Framework.Model;

　　using System.Text;

　　namespace dropdown_ExtJS32_Net2.Ajax

　　{

　　/// <summary>

　　/// Summary description for GetAreaXml

　　/// </summary>

　　public class GetAreaXml : IHttpHandler

　　{

　　//string baseCode = "000000";

　　public void ProcessRequest(HttpContext context)

　　{

　　string parentId = "000000";

　　if (context.Request["pid"] != null)

　　{

　　parentId = context.Request["pid"].ToString();

　　}

　　//parentId = (parentId.Length > 0) ? parentId : "000000";

　　////string parentId2 = "000000";

　　////if (context.Request["pid2"] != null)

　　////{

　　//// parentId2 = context.Request["pid2"].ToString();

　　////}

　　#region tony 2010.2.7 update

　　List<Area> list = new List<Area>();

　　//if (parentId.Length > 0)

　　//{

　　list = Factory.GetAreaController().GetAreaListFindByParentID(parentId);

　　//}

　　////else if (parentId2.Length > 0)

　　////{

　　//// list = Factory.GetAreaController().GetAreaListFindByParentID(parentId2);

　　////}

　　#endregion

　　context.Response.AddHeader("Cache-Control", "no-cache, must-revalidate");

　　context.Response.ContentEncoding = System.Text.Encoding.UTF8;

　　context.Response.ContentType = "text/html";

　　StringBuilder sb = new StringBuilder();

　　for (int i = 0; i < list.Count; i++)

　　{

　　sb.Append("{\"Area_Name\":\"" + list[i].Area_Name + "\",");

　　sb.Append("\"Area_ID\":\"" + list[i].Area_ID + "\"},");

　　}

　　string json = sb.ToString().TrimEnd(',');

　　context.Response.Write("{\"Results\":[" + json + "]}");

　　}

　　public bool IsReusable

　　{

　　get

　　{

　　return false;

　　}

　　前台页面.aspx

复制代码代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<title>demo a dropdownlist by extjs 3.2 </title>

　　<mce:script type="text/javascript" src="Scripts/ext/3.2/adapter/ext/ext-base.js" mce_src="Scripts/ext/3.2/adapter/ext/ext-base.js"></mce:script>

　　<mce:script type="text/javascript" src="Scripts/ext/3.2/ext-all.js" mce_src="Scripts/ext/3.2/ext-all.js"></mce:script>

<mce:script type="text/javascript"><!--

　　Ext.onReady(function () {

　　//alert("extjs is Ok!");

　　});

　　function $() {

　　return Ext.get(arguments[0]);

　　}

　　/*Area*/

　　function GetAreas() {

　　//alert($(arguments[1]));

　　var cityCtrl = $(arguments[1]).child("select");

　　var cityCtrlContainer = $(arguments[1]);

　　cityCtrl.dom.options.length = 0;

　　if ($(arguments[0]).getValue() == "") { cityCtrlContainer.hide(); return; }

　　cityCtrl.disabled = true;

　　var selectValue2 = $(arguments[0]).getValue();

　　Ext.Ajax.request({

　　url: arguments[2],

　　params: { pid: selectValue2 },

　　method: 'GET',

　　success: function (result, request) {

　　//alert(params);

　　var jsonData = Ext.util.JSON.decode(result.responseText);

　　//alert(jsonData.Results.length);

　　if (jsonData.Results.length > 0) {

　　cityCtrl.dom.options.add(new Option("请选择", "000000"));

　　for (var i = 0; i < jsonData.Results.length; i++) {

　　cityCtrl.dom.options.add(new Option(jsonData.Results[i].Area_Name, jsonData.Results[i].Area_ID));

　　}

　　cityCtrl.disabled = false;

　　cityCtrlContainer.show();

　　}

　　else {

　　cityCtrlContainer.hide();

　　}

　　failure: function (result, request) { Ext.MessageBox.alert('Failed', 'Successfully posted form: ' + action.date); }

　　});

　　}

　　// --></mce:script>

　　</head>

　　<body>

　　<tr>

　　请选择</div>

　　<asp:DropDownList Style="float: left;" mce_Style="float: left;" ID="dropProvince" runat="server" />

　　省</div>

　　<asp:Panel ID="panelArea" runat="server">

　　<asp:DropDownList Style="float: left;" mce_Style="float: left;" ID="dropArea" runat="server" />

　　市</div>

　　</asp:Panel>

　　<asp:Panel ID="panelArea2" runat="server" >

　　<asp:DropDownList Style="float: left;" mce_Style="float: left;" ID="dropArea2" runat="server" />

　　县</div>

　　</asp:Panel>

　　</td>

　　</tr>

　　</table>

　　</form>

　　</body>

　　</html>

　　效果如图：

asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

　　邀月注：本文版权由邀月和CSDN共同所有，转载请注明出处。

　　助人等于自助! [email protected]

教程首页更多教程