省市三级联动的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"?>
<configuration>
    <configSections>
        <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
            <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
                <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
                <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
                    <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere" />
                    <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" />
                    <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" />
                </sectionGroup>
            </sectionGroup>
        </sectionGroup>
    </configSections>

    <system.web>
        <customErrors defaultRedirect="" />
        <trace mostRecent="true" pageOutput="true" />
        <pages>
            <controls>
                <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            </controls>
        </pages>
        <compilation>
            <assemblies>
                <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
            </assemblies>
        </compilation>

        <httpHandlers>
            <remove verb="*" path="*.asmx"/>
            <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
        </httpHandlers>

        <httpModules>
            <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        </httpModules>
    </system.web>


    <system.webServer>
        <validation validateIntegratedModeConfiguration="false"/>
        <modules>
            <add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        </modules>
        <handlers>
            <remove name="WebServiceHandlerFactory-Integrated" />
            <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"/>
            <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, 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">
            <ContentTemplate>
                <table width="500" border="0" cellpadding="0" cellspacing="2" >
                    <tr>
                        <td height="25" bgcolor="#EAEAEA" >
                            请选择省/市/区：
                        </td>
                        <td bgcolor="#f7f7f7">
                            &nbsp; &nbsp;<asp:DropDownList ID="dpProvince" runat="server"
                                AutoPostBack="true" onselectedindexchanged="dpProvince_SelectedIndexChanged" />
                            &nbsp; &nbsp;<asp:DropDownList ID="dpCity" runat="server" AutoPostBack="true"
                                onselectedindexchanged="dpCity_SelectedIndexChanged" />
                            &nbsp; &nbsp;<asp:DropDownList ID="dpArea" runat="server" AutoPostBack="false"
                                 />
                        </td>
                    </tr>
                    <tr>
                        <td height="25" bgcolor="#EAEAEA" >
                        </td>
                        <td  bgcolor="#f7f7f7">
                            <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                                <ProgressTemplate>
                                    正在查询，请稍候……………………</ProgressTemplate>
                            </asp:UpdateProgress>
                        </td>
                    </tr>
                  
                </table>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="dpProvince" EventName="SelectedIndexChanged" />
                <asp:AsyncPostBackTrigger ControlID="dpCity" EventName="SelectedIndexChanged" />

            </Triggers>
        </asp:UpdatePanel>
    </div>

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

 如图：

 二、基于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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #dpCity
        {
            display: none;
            position: relative;
        }
        #dpArea
        {
            display: none;
            position: relative;
        }
    </style>
    <script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        请选择省/市/区： &nbsp; &nbsp;<asp:DropDownList ID="dpProvince" runat="server" />
        &nbsp; &nbsp;<asp:DropDownList ID="dpCity" runat="server">
        </asp:DropDownList>
        &nbsp; &nbsp;<asp:DropDownList ID="dpArea" runat="server" AutoPostBack="false" />
    </div>
    <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;
                }
            });

        }       

    </script>
    </form>
</body>
</html>

 

 

 三、基于ExtJS 3.2的Ajax框架。
后台：

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>demo a dropdownlist by extjs 3.2 </title>
    <link rel="stylesheet" href="Scripts/ext/3.2/resources/css/ext-all.css" />
    <script type="text/javascript" src="Scripts/ext/3.2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="Scripts/ext/3.2/ext-all.js"></script>
    <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); }
            });
        }

      
    </script>
</head>
<body>
    <form id="form1" runat="server">

    <table width="500" border="0" cellpadding="0" cellspacing="2">
        <tr>
            <td height="25" bgcolor="#EAEAEA">
                <div style="float: left; height: 20px; line-height: 20px;">
                    请选择</div>
                <asp:DropDownList Style="float: left;" ID="dropProvince" runat="server" />
                <div style="float: left; height: 20px; line-height: 20px;">
                    省</div>
                <asp:Panel ID="panelArea" runat="server">
                    <asp:DropDownList Style="float: left;" ID="dropArea" runat="server"   />
                    <div style="float: left; height: 20px; line-height: 20px;">
                        市</div>
                </asp:Panel>
                <asp:Panel ID="panelArea2" runat="server"  >
                    <asp:DropDownList Style="float: left;" ID="dropArea2" runat="server" />
                    <div style="float: left; height: 20px; line-height: 20px;">
                        县</div>
                </asp:Panel>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

效果如图：

附源码下载：
下载二
下载一