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

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

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

 

主要文件如下：
AreaModel.cs:

view plain copy to clipboard print ?

1. using  System;  
2. using  System.Collections.Generic;  
3. namespace  Downmoon.Framework.Model  
4. {  
5.     #region PopularArea   
6.     public   class  Area  
7.     {  
8.         private   string  m_Area_ID;  
9.         /// <summary>   
10.         /// 地区编号   
11.         /// </summary>   
12.         public   string  Area_ID  
13.         {  
14.             get  {  return  m_Area_ID; }  
15.             set  { m_Area_ID = value; }  
16.         }  
17.         private   string  m_Area_Name;  
18.         /// <summary>   
19.         /// 地区名称   
20.         /// </summary>   
21.         public   string  Area_Name  
22.         {  
23.             get  {  return  m_Area_Name; }  
24.             set  { m_Area_Name = value; }  
25.         }  
26.         private   double  m_Area_Order;  
27.         /// <summary>   
28.         /// 排序   
29.         /// </summary>   
30.         public   double  Area_Order  
31.         {  
32.             get  {  return  m_Area_Order; }  
33.             set  { m_Area_Order = value; }  
34.         }  
35.         private   int  m_Area_Layer;  
36.         /// <summary>   
37.         /// 层级   
38.         /// </summary>   
39.         public   int  Area_Layer  
40.         {  
41.             get  {  return  m_Area_Layer; }  
42.             set  { m_Area_Layer = value; }  
43.         }  
44.         private   string  m_Area_FatherID;  
45.         /// <summary>   
46.         /// 父级ID   
47.         /// </summary>   
48.         public   string  Area_FatherID  
49.         {  
50.             get  {  return  m_Area_FatherID; }  
51.             set  { m_Area_FatherID = value; }  
52.         }  
53.         public  Area() { }  
54.         public  Area( string  id,  string  name,  double  order,  int  layer,  string  father)  
55.         {  
56.             this .Area_ID = id;  
57.             this .Area_Name = name;  
58.             this .m_Area_Order = order;  
59.             this .m_Area_Layer = layer;  
60.             this .m_Area_FatherID = father;  
61.         }  
62.     }  
63.     #endregion   
64. }  

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:

view plain copy to clipboard print ?

1. using  System;  
2. using  System.Collections.Generic;  
3. using  Downmoon.Framework.Model;  
4. namespace  Downmoon.Framework.Controllers  
5. {  
6.     public   class  AreaList : IArea  
7.     {  
8.         // Area singleton   
9.         private   static  AreaList instance;  
10.         public   static  AreaList Instance  
11.         {  
12.             get   
13.             {  
14.                 if  (AreaList.instance ==  null )  
15.                 {  
16.                     AreaList.instance = new  AreaList();  
17.                 }  
18.                 return  AreaList.instance;  
19.             }  
20.         }  
21.         public  List<Area> GetAreaList()  
22.         {  
23.             List<Area> Areas = new  List<Area>();  
24.             Areas.Add(new  Area( "110000" ,  "北京市" , 0, 1,  "000000" ));  
25.             Areas.Add(new  Area( "110100" ,  "市辖区" , 0, 2,  "110000" ));  
26.             Areas.Add(new  Area( "110101" ,  "东城区" , 0, 3,  "110100" ));  
27.             Areas.Add(new  Area( "110102" ,  "西城区" , 0, 3,  "110100" ));  
28.             Areas.Add(new  Area( "110103" ,  "崇文区" , 0, 3,  "110100" ));  
29.             Areas.Add(new  Area( "330000" ,  "浙江省" , 0, 1,  "000000" ));  
30.             Areas.Add(new  Area( "330100" ,  "杭州市" , 0, 2,  "330000" ));  
31.             Areas.Add(new  Area( "330200" ,  "宁波市" , 0, 2,  "330000" ));  
32.             Areas.Add(new  Area( "330102" ,  "上城区" , 0, 3,  "330100" ));  
33.             Areas.Add(new  Area( "330103" ,  "下城区" , 0, 3,  "330100" ));  
34.             Areas.Add(new  Area( "330104" ,  "江干区" , 0, 3,  "330100" ));  
35.             Areas.Add(new  Area( "330105" ,  "拱墅区" , 0, 3,  "330100" ));  
36.             Areas.Add(new  Area( "330106" ,  "西湖区" , 0, 3,  "330100" ));  
37.             Areas.Add(new  Area( "330203" ,  "海曙区" , 0, 3,  "330200" ));  
38.             Areas.Add(new  Area( "330204" ,  "江东区" , 0, 3,  "330200" ));  
39.             Areas.Add(new  Area( "330205" ,  "江北区" , 0, 3,  "330200" ));  
40.             Areas.Add(new  Area( "330206" ,  "北仑区" , 0, 3,  "330200" ));  
41.             Areas.Add(new  Area( "330211" ,  "镇海区" , 0, 3,  "330200" ));  
42.             return  Areas;  
43.         }  
44.         public  List<Area> GetAreaListFindByParentID( string  filter)  
45.         {  
46.             return  GetAreaList().FindAll(  
47.                 delegate (Area ar)  
48.                 {  
49.                     return  ar.Area_FatherID == filter;  
50.                 }  
51.                 );  
52.         }  
53.     }  
54. }  

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

view plain copy to clipboard print ?

1. using  System;  
2. using  System.Collections.Generic;  
3. //using Downmoon.Framework.Model;   
4. namespace  Downmoon.Framework.Controllers  
5. {  
6.     public   class  Factory  
7.     {  
8.         public   static  IArea GetAreaController()  
9.         {  
10.             return  AreaList.Instance;  
11.         }  
12.     }  
13. }  

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

view plain copy to clipboard print ?

1. using  System;  
2. using  System.Collections.Generic;  
3. using  System.Text;  
4. using  Downmoon.Framework.Model;  
5. namespace  Downmoon.Framework.Controllers  
6. {  
7.     public   interface  IArea  
8.     {  
9.         List<Area> GetAreaList();  
10.         List<Area> GetAreaListFindByParentID(string  filterID);  
11.     }  
12. }  

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文件中作配置：

view plain copy to clipboard print ?

1. <? xml   version = "1.0" ?>   
2. < configuration >   
3.     < configSections >   
4.         < sectionGroup   name = "system.web.extensions"   type = "System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" >   
5.             < sectionGroup   name = "scripting"   type = "System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" >   
6.                 < section   name = "scriptResourceHandler"   type = "System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"   requirePermission = "false"   allowDefinition = "MachineToApplication" />   
7.                 < sectionGroup   name = "webServices"   type = "System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" >   
8.                     < section   name = "jsonSerialization"   type = "System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"   requirePermission = "false"   allowDefinition = "Everywhere"   />   
9.                     < section   name = "profileService"   type = "System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"   requirePermission = "false"   allowDefinition = "MachineToApplication"   />   
10.                     < section   name = "authenticationService"   type = "System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"   requirePermission = "false"   allowDefinition = "MachineToApplication"   />   
11.                 </ sectionGroup >   
12.             </ sectionGroup >   
13.         </ sectionGroup >   
14.     </ configSections >   
15.     < system.web >   
16.         < customErrors   defaultRedirect = ""   />   
17.         < trace   mostRecent = "true"   pageOutput = "true"   />   
18.         < pages >   
19.             < controls >   
20.                 < add   tagPrefix = "asp"   namespace = "System.Web.UI"   assembly = "System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />   
21.             </ controls >   
22.         </ pages >   
23.         < compilation >   
24.             < assemblies >   
25.                 < add   assembly = "System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"   />   
26.             </ assemblies >   
27.         </ compilation >   
28.         < httpHandlers >   
29.             < remove   verb = "*"   path = "*.asmx" />   
30.             < add   verb = "*"   path = "*.asmx"   validate = "false"   type = "System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />   
31.             < 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" />   
32.             < 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" />   
33.         </ httpHandlers >   
34.         < httpModules >   
35.             < add   name = "ScriptModule"   type = "System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />   
36.         </ httpModules >   
37.     </ system.web >   
38.   
39.     < system.webServer >   
40.         < validation   validateIntegratedModeConfiguration = "false" />   
41.         < modules >   
42.             < add   name = "ScriptModule"   preCondition = "integratedMode"   type = "System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />   
43.         </ modules >   
44.         < handlers >   
45.             < remove   name = "WebServiceHandlerFactory-Integrated"   />   
46.             < add   name = "ScriptHandlerFactory"   verb = "*"   path = "*.asmx"   preCondition = "integratedMode"   
47.                  type = "System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />   
48.             < add   name = "ScriptHandlerFactoryAppServices"   verb = "*"   path = "*_AppService.axd"   preCondition = "integratedMode"   
49.                  type = "System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />   
50.             < 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"   />   
51.         </ handlers >   
52.     </ system.webServer >   
53. </ configuration >   

<?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>

  前台页面：

view plain copy to clipboard print ?

1. < asp:ScriptManager   ID = "ScriptManager1"   runat = "server"   EnablePartialRendering = "true" >   
2.     </ asp:ScriptManager >   
3.     < div >   
4.         < asp:UpdatePanel   ID = "UpdatePanel1"   runat = "server"   UpdateMode = "Conditional" >   
5.             < ContentTemplate >   
6.                 < table   width = "500"   border = "0"   cellpadding = "0"   cellspacing = "2"   >   
7.                     < tr >   
8.                         < td   height = "25"   bgcolor = "#EAEAEA"   >   
9.                             请选择省/市/区：  
10.                         </ td >   
11.                         < td   bgcolor = "#f7f7f7" >   
12.                                < asp:DropDownList   ID = "dpProvince"   runat = "server"   
13.                                 AutoPostBack = "true"   onselectedindexchanged = "dpProvince_SelectedIndexChanged"   />   
14.                                < asp:DropDownList   ID = "dpCity"   runat = "server"   AutoPostBack = "true"   
15.                                 onselectedindexchanged = "dpCity_SelectedIndexChanged"   />   
16.                                < asp:DropDownList   ID = "dpArea"   runat = "server"   AutoPostBack = "false"   
17.                                  />   
18.                         </ td >   
19.                     </ tr >   
20.                     < tr >   
21.                         < td   height = "25"   bgcolor = "#EAEAEA"   >   
22.                         </ td >   
23.                         < td    bgcolor = "#f7f7f7" >   
24.                             < asp:UpdateProgress   ID = "UpdateProgress1"   runat = "server" >   
25.                                 < ProgressTemplate >   
26.                                     正在查询，请稍候……………………</ ProgressTemplate >   
27.                             </ asp:UpdateProgress >   
28.                         </ td >   
29.                     </ tr >   
30.                     
31.                 </ table >   
32.             </ ContentTemplate >   
33.             < Triggers >   
34.                 < asp:AsyncPostBackTrigger   ControlID = "dpProvince"   EventName = "SelectedIndexChanged"   />   
35.                 < asp:AsyncPostBackTrigger   ControlID = "dpCity"   EventName = "SelectedIndexChanged"   />   
36.             </ Triggers >   
37.         </ asp:UpdatePanel >   
38.     </ div >   

<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">    <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 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，主要代码：

view plain copy to clipboard print ?

1. using  System;  
2. using  System.Collections.Generic;  
3. using  System.Web;  
4. using  Downmoon.Framework.Controllers;  
5. using  Downmoon.Framework.Model;  
6. using  System.Text;  
7. namespace  dropdown_JQuery14_Net2  
8. {  
9.     /// <summary>   
10.     /// Summary description for AjaxRequest   
11.     /// </summary>   
12.     public   class  AjaxRequest : IHttpHandler  
13.     {  
14.         public   void  ProcessRequest(HttpContext context)  
15.         {  
16.             string  Area_FatherID =  string .Empty;  
17.             if  (context.Request[ "pid" ] !=  null )  
18.             { Area_FatherID = context.Request["pid" ].ToString(); }  
19.             string  parentId =  string .Empty;  
20.             //mydbDataContext db = new mydbDataContext();   
21.             //根据传过来的Value值 进行查询   
22.             //List<ChinaStates> list = db.ChinaStates.Where(c => c.ParentAreaCode == strId).ToList();   
23.             List<Area> list = Factory.GetAreaController().GetAreaListFindByParentID(Area_FatherID);  
24.             context.Response.ContentType = "application/json" ;  
25.             context.Response.ContentEncoding = Encoding.UTF8;  
26.             context.Response.Write(ListToJson(list));  
27.             context.Response.End();  
28.         }  
29.         public   string  ListToJson(List<Area> list)  
30.         {  
31.             StringBuilder sb = new  StringBuilder();  
32.             if  (list !=  null )  
33.             {  
34.                 sb.Append("[" );  
35.                 for  ( int  i = 0; i < list.Count; i++)  
36.                 {  
37.                     sb.Append("{" );  
38.                     sb.Append("/"Area_ID/":/""  + list[i].Area_ID +  "/"," );  
39.                     sb.Append("/"Area_Name/":/""  + list[i].Area_Name +  "/"" );  
40.                     //sb.Append("/"Area_FatherID/":/"" + list[i].Area_FatherID + "/"");   
41.                     if  (i != list.Count - 1)  
42.                     {  
43.                         sb.Append("}," );  
44.                     }  
45.                 }  
46.             }  
47.             sb.Append("}" );  
48.             sb.Append("]" );  
49.             return  sb.ToString();  
50.         }  
51.         public   bool  IsReusable  
52.         {  
53.             get   
54.             {  
55.                 return   false ;  
56.             }  
57.         }  
58.     }  
59. }  

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

view plain copy to clipboard print ?

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
2. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
3. < head   runat = "server" >   
4.     < title > </ title >   
5.     < mce:style   type = "text/css" > <!--  
6.         #dpCity  
7.         {  
8.             display: none;  
9.             position: relative;  
10.         }  
11.         #dpArea  
12.         {  
13.             display: none;  
14.             position: relative;  
15.         }  
16.       
17. --> </ mce:style > < style   type = "text/css"   mce_bogus = "1" >         #dpCity  
18.         {  
19.             display: none;  
20.             position: relative;  
21.         }  
22.         #dpArea  
23.         {  
24.             display: none;  
25.             position: relative;  
26.         }  
27.     </ style >   
28.     < mce:script   language = "javascript"   type = "text/javascript"   src = "Scripts/jquery-1.4.1.js"   mce_src = "Scripts/jquery-1.4.1.js" > </ mce:script >   
29. </ head >   
30. < body >   
31.     < form   id = "form1"   runat = "server" >   
32.     < div >   
33.         请 选择省/市/区：    < asp:DropDownList   ID = "dpProvince"   runat = "server"   />   
34.            < asp:DropDownList   ID = "dpCity"   runat = "server" >   
35.         </ asp:DropDownList >   
36.            < asp:DropDownList   ID = "dpArea"   runat = "server"   AutoPostBack = "false"   />   
37.     </ div >   
38.     < mce:script   language = "javascript"   type = "text/javascript" > <!--  
39.         
40.         $(function () {  
41.             var $dp1  = $("#dpProvince");  
42.             var $dp2  = $("#dpCity");  
43.             var $dp3  = $("select[name$=dpArea]");  
44.             $dp1.focus();  
45.             //alert($dpCity);  
46.             loadAreas("000000", "0");  
47.             $dp1.bind("change keyup", function () {  
48.                 if ($(this).val() != "") {  
49.                     //alert($("select option:selected").val());  
50.                     //loadAreas($("select option:selected").val(), "1");  
51.                     var strPid  = $dp1.attr("value"); // 获取城市  
52.                     loadAreas(strPid, "1");  
53.                     $dp2.fadeIn("slow");  
54.                 } else {  
55.                     $dp2.fadeOut("slow");  
56.                 }  
57.             });  
58.             $dp2.bind("change keyup", function () {  
59.                 var strCId  = $dp2.attr("value"); // 获取城市  
60.                 if ($(this).val() != "") {  
61.                     loadAreas(strCId, "2");  
62.                     $dp3.fadeIn("slow");  
63.                 } else {  
64.                     $dp3.fadeOut("slow");  
65.                 }  
66.             });  
67.         });  
68.         function loadAreas(selectedItem, level) {  
69.             $.getJSON("AjaxRequest.ashx?pid =" + selectedItem, function (data) {  
70.                 switch (level) {  
71.                 case "0":  
72.                        $("#dpProvince").html("");  
73.                        $("#dpProvince").append("< option   value = ''   selected = 'selected' > 请 选择... </ option > ");  
74.                         for (var i  =  0 ; i  <   data.length ; i++) {  
75.                            $("#dpProvince").append($("< option > </ option > ").val(data[i].Area_ID).html(data[i].Area_Name));  
76.                         };  
77.                         break;  
78.                     case "1":  
79.                        $("#dpCity").html("");  
80.                        $("#dpCity").append("< option   value = ''   selected = 'selected' > 请 选择... </ option > ");  
81.                         for (var i  =  0 ; i  <   data.length ; i++) {  
82.                            $("#dpCity").append($("< option > </ option > ").val(data[i].Area_ID).html(data[i].Area_Name));  
83.                         };  
84.                         break;  
85.                     case "2":  
86.                         $("#dpArea").html("");  
87.                         $("#dpArea").append("< option   value = ''   selected = 'selected' > 请 选择... </ option > ");  
88.                         for (var i  =  0 ; i  <   data.length ; i++) {  
89.                            $("#dpArea").append($("< option > </ option > ").val(data[i].Area_ID).html(data[i].Area_Name));  
90.                         };  
91.                         break;  
92.                     
93.                     default:  
94.                         break;  
95.                 }  
96.             });  
97.         }         
98.       
99. // --> </ mce:script >   
100.     </ form >   
101. </ body >   
102. </ html >   

<!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> <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> <form id="form1" runat="server"> <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>

 

 

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

view plain copy to clipboard print ?

1. using  System;  
2. using  System.Collections.Generic;  
3. using  System.Web;  
4. using  Downmoon.Framework.Controllers;  
5. using  Downmoon.Framework.Model;  
6. using  System.Text;  
7. namespace  dropdown_ExtJS32_Net2.Ajax  
8. {  
9.     /// <summary>   
10.     /// Summary description for GetAreaXml   
11.     /// </summary>   
12.     public   class  GetAreaXml : IHttpHandler  
13.     {  
14.         //string baseCode = "000000";   
15.         public   void  ProcessRequest(HttpContext context)  
16.         {  
17.             string  parentId =  "000000" ;  
18.             if  (context.Request[ "pid" ] !=  null )  
19.             {  
20.                 parentId = context.Request["pid" ].ToString();  
21.             }  
22.             //parentId = (parentId.Length > 0) ? parentId : "000000";   
23.             string parentId2 = "000000";   
24.             if (context.Request["pid2"] != null)   
25.             {   
26.                 parentId2 = context.Request["pid2"].ToString();   
27.             }   
28.             #region tony 2010.2.7 update   
29.             List<Area> list = new  List<Area>();  
30.             //if (parentId.Length > 0)   
31.             //{   
32.                 list = Factory.GetAreaController().GetAreaListFindByParentID(parentId);  
33.             //}   
34.             else if (parentId2.Length > 0)   
35.             {   
36.                 list = Factory.GetAreaController().GetAreaListFindByParentID(parentId2);   
37.             }   
38.             #endregion   
39.             context.Response.AddHeader("Cache-Control" ,  "no-cache, must-revalidate" );  
40.             context.Response.ContentEncoding = System.Text.Encoding.UTF8;  
41.             context.Response.ContentType = "text/html" ;  
42.             StringBuilder sb = new  StringBuilder();  
43.   
44.             for  ( int  i = 0; i < list.Count; i++)  
45.             {  
46.                 sb.Append("{/"Area_Name/":/""  + list[i].Area_Name +  "/"," );  
47.                 sb.Append("/"Area_ID/":/""  + list[i].Area_ID +  "/"}," );  
48.             }  
49.             string  json = sb.ToString().TrimEnd( ',' );  
50.             context.Response.Write("{/"Results/":["  + json +  "]}" );  
51.   
52.         }  
53.         public   bool  IsReusable  
54.         {  
55.             get   
56.             {  
57.                 return   false ;  
58.             }  
59.         }  
60.     }  
61. }  

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

 

view plain copy to clipboard print ?

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
2. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
3. < head   runat = "server" >   
4.     < title > demo a dropdownlist by extjs 3.2  </ title >   
5.     < link   rel = "stylesheet"   href = "Scripts/ext/3.2/resources/css/ext-all.css"   mce_href = "Scripts/ext/3.2/resources/css/ext-all.css"   />   
6.     < 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 >   
7.     < mce:script   type = "text/javascript"   src = "Scripts/ext/3.2/ext-all.js"   mce_src = "Scripts/ext/3.2/ext-all.js" > </ mce:script >   
8.     < mce:script   type = "text/javascript" > <!--  
9.         Ext.onReady(function () {  
10.             //alert("extjs is Ok!");  
11.         });  
12.         function $() {  
13.             return Ext.get(arguments[0]);  
14.         }  
15.         /*Area*/  
16.         function GetAreas() {  
17.             //alert($(arguments[1]));  
18.             var cityCtrl  = $(arguments[1]).child("select");  
19.             var cityCtrlContainer  = $(arguments[1]);  
20.             cityCtrl.dom.options.length  =  0 ;  
21.             if ($(arguments[0]).getValue() == "") { cityCtrlContainer.hide(); return; }  
22.           
23.             cityCtrl.disabled  =  true ;  
24.             var selectValue2  = $(arguments[0]).getValue();  
25.             Ext.Ajax.request({  
26.                 url: arguments[2],  
27.                 params: { pid: selectValue2 },  
28.                 method: 'GET',  
29.                 success: function (result, request) {  
30.                     //alert(params);  
31.                     var jsonData  =  Ext .util.JSON.decode(result.responseText);  
32.                     //alert(jsonData.Results.length);  
33.                     if (jsonData.Results.length >  0) {  
34.                         cityCtrl.dom.options.add(new Option(" 请选择", "000000"));  
35.                         for (var i  =  0 ; i  <   jsonData.Results.length ; i++) {  
36.                             cityCtrl.dom.options.add(new Option(jsonData.Results[i].Area_Name, jsonData.Results[i].Area_ID));  
37.                         }  
38.                         cityCtrl.disabled  =  false ;  
39.                         cityCtrlContainer.show();  
40.                     }  
41.                     else {  
42.                         cityCtrlContainer.hide();  
43.                     }  
44.                 },  
45.                 failure: function (result, request) { Ext.MessageBox.alert('Failed', 'Successfully posted form: ' + action.date); }  
46.             });  
47.         }  
48.         
49.       
50. // --> </ mce:script >   
51. </ head >   
52. < body >   
53.     < form   id = "form1"   runat = "server" >   
54.     < table   width = "500"   border = "0"   cellpadding = "0"   cellspacing = "2" >   
55.         < tr >   
56.             < td   height = "25"   bgcolor = "#EAEAEA" >   
57.                 < div   style = "float: left; height: 20px; line-height: 20px;" >   
58.                     请 选择</ div >   
59.                 < asp:DropDownList   Style = "float: left;"   mce_Style = "float: left;"   ID = "dropProvince"   runat = "server"   />   
60.                 < div   style = "float: left; height: 20px; line-height: 20px;" >   
61.                     省</ div >   
62.                 < asp:Panel   ID = "panelArea"   runat = "server" >   
63.                     < asp:DropDownList   Style = "float: left;"   mce_Style = "float: left;"   ID = "dropArea"   runat = "server"     />   
64.                     < div   style = "float: left; height: 20px; line-height: 20px;" >   
65.                         市</ div >   
66.                 </ asp:Panel >   
67.                 < asp:Panel   ID = "panelArea2"   runat = "server"    >   
68.                     < asp:DropDownList   Style = "float: left;"   mce_Style = "float: left;"   ID = "dropArea2"   runat = "server"   />   
69.                     < div   style = "float: left; height: 20px; line-height: 20px;" >   
70.                         县</ div >   
71.                 </ asp:Panel >   
72.             </ td >   
73.         </ tr >   
74.     </ table >   
75.     </ form >   
76. </ body >   
77. </ html >   

<!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" mce_href="Scripts/ext/3.2/resources/css/ext-all.css" /> <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> <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;" mce_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;" mce_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;" mce_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>
效 果如图：

邀月注：本文版权由邀月 和CSDN共同所有，转载请注明出处。
助人等于自助!   3w@live.cn