ExtJs)示例[转帖]

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

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

邀月工作室

主要文件如下：
AreaModel.cs:

02
using System; 

03
using System.Collections.Generic; 

04
namespace Downmoon.Framework.Model 

05
{ 

06
    #region PopularArea 

07
    public class Area 

08
    { 

09
        private string m_Area_ID; 

10
        /// <summary> 

11
        /// 地区编号 

12
        /// </summary> 

13
        public string Area_ID 

14
        { 

15
            get { return m_Area_ID; } 

16
            set { m_Area_ID = value; } 

17
        } 

18
        private string m_Area_Name; 

19
        /// <summary> 

20
        /// 地区名称 

21
        /// </summary> 

22
        public string Area_Name 

23
        { 

24
            get { return m_Area_Name; } 

25
            set { m_Area_Name = value; } 

26
        } 

27
        private double m_Area_Order; 

28
        /// <summary> 

29
        /// 排序 

30
        /// </summary> 

31
        public double Area_Order 

32
        { 

33
            get { return m_Area_Order; } 

34
            set { m_Area_Order = value; } 

35
        } 

36
        private int m_Area_Layer; 

37
        /// <summary> 

38
        /// 层级 

39
        /// </summary> 

40
        public int Area_Layer 

41
        { 

42
            get { return m_Area_Layer; } 

43
            set { m_Area_Layer = value; } 

44
        } 

45
        private string m_Area_FatherID; 

46
        /// <summary> 

47
        /// 父级ID 

48
        /// </summary> 

49
        public string Area_FatherID 

50
        { 

51
            get { return m_Area_FatherID; } 

52
            set { m_Area_FatherID = value; } 

53
        } 

54
        public Area() { } 

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

56
        { 

57
            this.Area_ID = id; 

58
            this.Area_Name = name; 

59
            this.m_Area_Order = order; 

60
            this.m_Area_Layer = layer; 

61
            this.m_Area_FatherID = father; 

62
        } 

63
    } 

64
    #endregion 

65
}

AreaControl.cs:

02
using System; 

03
using System.Collections.Generic; 

04
using Downmoon.Framework.Model; 

05
namespace Downmoon.Framework.Controllers 

06
{ 

07
    public class AreaList : IArea 

08
    { 

09
        // Area singleton 

10
        private static AreaList instance; 

11
        public static AreaList Instance 

12
        { 

13
            get

14
            { 

15
                if (AreaList.instance == null) 

16
                { 

17
                    AreaList.instance = new AreaList(); 

18
                } 

19
                return AreaList.instance; 

20
            } 

21
        } 

22
        public List<Area> GetAreaList() 

23
        { 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

43
            return Areas; 

44
        } 

45
        public List<Area> GetAreaListFindByParentID(string filter) 

46
        { 

47
            return GetAreaList().FindAll( 

48
                delegate(Area ar) 

49
                { 

50
                    return ar.Area_FatherID == filter; 

51
                } 

52
                ); 

53
        } 

54
    } 

55
}

Factory.cs

02
using System; 

03
using System.Collections.Generic; 

04
//using Downmoon.Framework.Model; 

05
namespace Downmoon.Framework.Controllers 

06
{ 

07
    public class Factory 

08
    { 

09
        public static IArea GetAreaController() 

10
        { 

11
            return AreaList.Instance; 

12
        } 

13
    } 

14
}

IArea.cs

02
using System; 

03
using System.Collections.Generic; 

04
using System.Text; 

05
using Downmoon.Framework.Model; 

06
namespace Downmoon.Framework.Controllers 

07
{ 

08
    public interface IArea 

09
    { 

10
        List<Area> GetAreaList(); 

11
        List<Area> GetAreaListFindByParentID(string filterID); 

12
    } 

13
}

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

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

02
<?xml version="1.0"?> 

03
<configuration> 

04
    <configSections> 

05
        <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> 

06
            <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> 

07
                <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/> 

08
                <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> 

09
                    <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere" /> 

10
                    <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" /> 

11
                    <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" /> 

12
                </sectionGroup> 

13
            </sectionGroup> 

14
        </sectionGroup> 

15
    </configSections> 

16
    <system.web> 

17
        <customErrors defaultRedirect="" /> 

18
        <trace mostRecent="true" pageOutput="true" /> 

19
        <pages> 

20
            <controls> 

21
                <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 

22
            </controls> 

23
        </pages> 

24
        <compilation> 

25
            <assemblies> 

26
                <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" /> 

27
            </assemblies> 

28
        </compilation> 

29
        <httpHandlers> 

30
            <remove verb="*" path="*.asmx"/> 

31
            <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 

32
            <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"/> 

33
            <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"/> 

34
        </httpHandlers> 

35
        <httpModules> 

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

37
        </httpModules> 

38
    </system.web> 

39
  
40
    <system.webServer> 

41
        <validation validateIntegratedModeConfiguration="false"/> 

42
        <modules> 

43
            <add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 

44
        </modules> 

45
        <handlers> 

46
            <remove name="WebServiceHandlerFactory-Integrated" /> 

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

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

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

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

51
            <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" /> 

52
        </handlers> 

53
    </system.webServer> 

54
</configuration>

前台页面：

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

03
    </asp:ScriptManager> 

04
    <div> 

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

06
            <ContentTemplate> 

07
                <table width="500" border="0" cellpadding="0" cellspacing="2" > 

08
                    <tr> 

09
                        <td height="25" bgcolor="#EAEAEA" > 

10
                            请选择省/市/区： 

11
                        </td> 

12
                        <td bgcolor="#f7f7f7"> 

13
                            &nbsp; &nbsp;<asp:DropDownList ID="dpProvince" runat="server"

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

15
                            &nbsp; &nbsp;<asp:DropDownList ID="dpCity" runat="server" AutoPostBack="true"

16
                                onselectedindexchanged="dpCity_SelectedIndexChanged" /> 

17
                            &nbsp; &nbsp;<asp:DropDownList ID="dpArea" runat="server" AutoPostBack="false"

18
                                 /> 

19
                        </td> 

20
                    </tr> 

21
                    <tr> 

22
                        <td height="25" bgcolor="#EAEAEA" > 

23
                        </td> 

24
                        <td  bgcolor="#f7f7f7"> 

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

26
                                <ProgressTemplate> 

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

28
                            </asp:UpdateProgress> 

29
                        </td> 

30
                    </tr> 

31
                    
32
                </table> 

33
            </ContentTemplate> 

34
            <Triggers> 

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

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

37
            </Triggers> 

38
        </asp:UpdatePanel> 

39
    </div>

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

如图：
邀月工作室

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

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

02
using System; 

03
using System.Collections.Generic; 

04
using System.Web; 

05
using Downmoon.Framework.Controllers; 

06
using Downmoon.Framework.Model; 

07
using System.Text; 

08
namespace dropdown_JQuery14_Net2 

09
{ 

10
    /// <summary> 

11
    /// Summary description for AjaxRequest 

12
    /// </summary> 

13
    public class AjaxRequest : IHttpHandler 

14
    { 

15
        public void ProcessRequest(HttpContext context) 

16
        { 

17
            string Area_FatherID = string.Empty; 

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

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

20
            string parentId = string.Empty; 

21
            //mydbDataContext db = new mydbDataContext(); 

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

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

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

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

26
            context.Response.ContentEncoding = Encoding.UTF8; 

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

28
            context.Response.End(); 

29
        } 

30
        public string ListToJson(List<Area> list) 

31
        { 

32
            StringBuilder sb = new StringBuilder(); 

33
            if (list != null) 

34
            { 

35
                sb.Append("["); 

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

37
                { 

38
                    sb.Append("{"); 

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

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

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

42
                    if (i != list.Count - 1) 

43
                    { 

44
                        sb.Append("},"); 

45
                    } 

46
                } 

47
            } 

48
            sb.Append("}"); 

49
            sb.Append("]"); 

50
            return sb.ToString(); 

51
        } 

52
        public bool IsReusable 

53
        { 

54
            get

55
            { 

56
                return false; 

57
            } 

58
        } 

59
    } 

60
}

前台：aspx

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

003
<html xmlns="http://www.w3.org/1999/xhtml"> 

004
<head runat="server"> 

005
    <title></title> 

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

007
        #dpCity 

008
        { 

009
            display: none; 

010
            position: relative; 

011
        } 

012
        #dpArea 

013
        { 

014
            display: none; 

015
            position: relative; 

016
        } 

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

019
        { 

020
            display: none; 

021
            position: relative; 

022
        } 

023
        #dpArea 

024
        { 

025
            display: none; 

026
            position: relative; 

027
        } 

028
    </style> 

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

030
</head> 

031
<body> 

032
    <form id="form1" runat="server"> 

033
    <div> 

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

035
        &nbsp; &nbsp;<asp:DropDownList ID="dpCity" runat="server"> 

036
        </asp:DropDownList> 

037
        &nbsp; &nbsp;<asp:DropDownList ID="dpArea" runat="server" AutoPostBack="false" /> 

038
    </div> 

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

040
        
041
        $(function () { 

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

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

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

045
            $dp1.focus(); 

046
            //alert($dpCity); 

047
            loadAreas("000000", "0"); 

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

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

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

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

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

053
                    loadAreas(strPid, "1"); 

054
                    $dp2.fadeIn("slow"); 

055
                } else { 

056
                    $dp2.fadeOut("slow"); 

057
                } 

058
            }); 

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

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

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

062
                    loadAreas(strCId, "2"); 

063
                    $dp3.fadeIn("slow"); 

064
                } else { 

065
                    $dp3.fadeOut("slow"); 

066
                } 

067
            }); 

068
        }); 

069
        function loadAreas(selectedItem, level) { 

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

071
                switch (level) { 

072
                case "0": 

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

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

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

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

077
                        }; 

078
                        break; 

079
                    case "1": 

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

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

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

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

084
                        }; 

085
                        break; 

086
                    case "2": 

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

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

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

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

091
                        }; 

092
                        break; 

093
                    
094
                    default: 

095
                        break; 

096
                } 

097
            }); 

098
        }        

099
      
100
// --></mce:script> 

101
    </form> 

102
</body> 

103
</html>

邀月工作室

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

02
using System; 

03
using System.Collections.Generic; 

04
using System.Web; 

05
using Downmoon.Framework.Controllers; 

06
using Downmoon.Framework.Model; 

07
using System.Text; 

08
namespace dropdown_ExtJS32_Net2.Ajax 

09
{ 

10
    /// <summary> 

11
    /// Summary description for GetAreaXml 

12
    /// </summary> 

13
    public class GetAreaXml : IHttpHandler 

14
    { 

15
        //string baseCode = "000000"; 

16
        public void ProcessRequest(HttpContext context) 

17
        { 

18
            string parentId = "000000"; 

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

20
            { 

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

22
            } 

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

24
            ////string parentId2 = "000000"; 

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

26
            ////{ 

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

28
            ////} 

29
            #region tony 2010.2.7 update 

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

31
            //if (parentId.Length > 0) 

32
            //{ 

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

34
            //} 

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

36
            ////{ 

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

38
            ////} 

39
            #endregion 

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

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

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

43
            StringBuilder sb = new StringBuilder(); 

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

46
            { 

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

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

49
            } 

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

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

52
  
53
        } 

54
        public bool IsReusable 

55
        { 

56
            get

57
            { 

58
                return false; 

59
            } 

60
        } 

61
    } 

62
}

前台页面.aspx

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

03
<html xmlns="http://www.w3.org/1999/xhtml"> 

04
<head runat="server"> 

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

06
    <link rel="stylesheet" href="Scripts/ext/3.2/resources/css/ext-all.css" mce_href="Scripts/ext/3.2/resources/css/ext-all.css" /> 

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

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

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

10
        Ext.onReady(function () { 

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

12
        }); 

13
        function $() { 

14
            return Ext.get(arguments[0]); 

15
        } 

16
        /*Area*/

17
        function GetAreas() { 

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

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

20
            var cityCtrlContainer = $(arguments[1]); 

21
            cityCtrl.dom.options.length = 0; 

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

23
          
24
            cityCtrl.disabled = true; 

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

26
            Ext.Ajax.request({ 

27
                url: arguments[2], 

28
                params: { pid: selectValue2 }, 

29
                method: 'GET', 

30
                success: function (result, request) { 

31
                    //alert(params); 

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

33
                    //alert(jsonData.Results.length); 

34
                    if (jsonData.Results.length > 0) { 

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

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

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

38
                        } 

39
                        cityCtrl.disabled = false; 

40
                        cityCtrlContainer.show(); 

41
                    } 

42
                    else { 

43
                        cityCtrlContainer.hide(); 

44
                    } 

45
                }, 

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

47
            }); 

48
        } 

49
        
50
      
51
// --></mce:script> 

52
</head> 

53
<body> 

54
    <form id="form1" runat="server"> 

55
    <table width="500" border="0" cellpadding="0" cellspacing="2"> 

56
        <tr> 

57
            <td height="25" bgcolor="#EAEAEA"> 

58
                <div style="float: left; height: 20px; line-height: 20px;"> 

59
                    请选择</div> 

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

61
                <div style="float: left; height: 20px; line-height: 20px;"> 

62
                    省</div> 

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

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

65
                    <div style="float: left; height: 20px; line-height: 20px;"> 

66
                        市</div> 

67
                </asp:Panel> 

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

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

70
                    <div style="float: left; height: 20px; line-height: 20px;"> 

71
                        县</div> 

72
                </asp:Panel> 

73
            </td> 

74
        </tr> 

75
    </table> 

76
    </form> 

77
</body> 

78
</html>

效果如图：
邀月工作室

posted @ 2011-06-20 00:23 peterlee 阅读(352) 评论(0) 收藏举报

刷新页面返回顶部

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

公告