1.html代码
1 <HTML>
2 <HEAD>
3 <title>Ajax实现无刷新三联动下拉框</title>
4 <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
5 <meta content="C#" name="CODE_LANGUAGE">
6 <meta content="JavaScript" name="vs_defaultClientScript">
7 <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
8 <SCRIPT language="javascript">
9 //城市------------------------------
10 function cityResult()
11 {
12 var city=document.getElementById("DropDownList1");
13 AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
14 }
15
16 function get_city_Result_CallBack(response)
17 {
18 if (response.value != null)
19 {
20 //debugger;
21 document.all("DropDownList2").length=0;
22 var ds = response.value;
23 if(ds != null && typeof(ds) == "object" && ds.Tables != null)
24 {
25 for(var i=0; i<ds.Tables[0].Rows.length; i++)
26 {
27 var name=ds.Tables[0].Rows[i].city;
28 var id=ds.Tables[0].Rows[i].cityID;
29 document.all("DropDownList2").options.add(new Option(name,id));
30 }
31 }
32 }
33 return
34 }
35 //市区----------------------------------------
36 function areaResult()
37 {
38 var area=document.getElementById("DropDownList2");
39 AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
40 }
41 function get_area_Result_CallBack(response)
42 {
43 if (response.value != null)
44 {
45 document.all("DropDownList3").length=0;
46 var ds = response.value;
47 if(ds != null && typeof(ds) == "object" && ds.Tables != null)
48 {
49 for(var i=0; i<ds.Tables[0].Rows.length; i++)
50 {
51 var name=ds.Tables[0].Rows[i].area;
52 var id=ds.Tables[0].Rows[i].areaID;
53 document.all("DropDownList3").options.add(new Option(name,id));
54 }
55 }
56 }
57 return
58 }
59 function getData()
60 {
61 var province=document.getElementById("DropDownList1");
62 var pindex = province.selectedIndex;
63 var pValue = province.options[pindex].value;
64 var pText = province.options[pindex].text;
65
66 var city=document.getElementById("DropDownList2");
67 var cindex = city.selectedIndex;
68 var cValue = city.options[cindex].value;
69 var cText = city.options[cindex].text;
70
71 var area=document.getElementById("DropDownList3");
72 var aindex = area.selectedIndex;
73 var aValue = area.options[aindex].value;
74 var aText = area.options[aindex].text;
75
76 var txt=document.getElementById("TextBox1");
77
78 document.getElementById("<%=TextBox1.ClientID%>").innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"区:"+aValue+"|"+aText;
79 }
80 </SCRIPT>
81 </HEAD>
82 <body ms_positioning="GridLayout">
83 <form id="Form1" method="post" runat="server">
84 <TABLE id="Table1" style="Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 32px" cellSpacing="1"
85 cellPadding="1" width="300" border="1" bgColor="#ccff66">
86 <TR>
87 <TD>省市</TD>
88 <TD><asp:dropdownlist id="DropDownList1" runat="server"></asp:dropdownlist></TD>
89 </TR>
90 <TR>
91 <TD>城市</TD>
92 <TD><asp:dropdownlist id="DropDownList2" runat="server"></asp:dropdownlist></TD>
93 </TR>
94 <TR>
95 <TD>市区</TD>
96 <TD><asp:dropdownlist id="DropDownList3" runat="server"></asp:dropdownlist></TD>
97 </TR>
98 </TABLE>
99 <asp:TextBox id="TextBox1" style="Z-INDEX: 102; LEFT: 416px; POSITION: absolute; TOP: 48px" runat="server"
100 Width="424px"></asp:TextBox><INPUT style="Z-INDEX: 103; LEFT: 456px; WIDTH: 56px; POSITION: absolute; TOP: 96px; HEIGHT: 24px"
101 type="button" value="test" onclick="getData();">
102 </form>
103 </body>
104 </HTML>
2 <HEAD>
3 <title>Ajax实现无刷新三联动下拉框</title>
4 <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
5 <meta content="C#" name="CODE_LANGUAGE">
6 <meta content="JavaScript" name="vs_defaultClientScript">
7 <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
8 <SCRIPT language="javascript">
9 //城市------------------------------
10 function cityResult()
11 {
12 var city=document.getElementById("DropDownList1");
13 AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
14 }
15
16 function get_city_Result_CallBack(response)
17 {
18 if (response.value != null)
19 {
20 //debugger;
21 document.all("DropDownList2").length=0;
22 var ds = response.value;
23 if(ds != null && typeof(ds) == "object" && ds.Tables != null)
24 {
25 for(var i=0; i<ds.Tables[0].Rows.length; i++)
26 {
27 var name=ds.Tables[0].Rows[i].city;
28 var id=ds.Tables[0].Rows[i].cityID;
29 document.all("DropDownList2").options.add(new Option(name,id));
30 }
31 }
32 }
33 return
34 }
35 //市区----------------------------------------
36 function areaResult()
37 {
38 var area=document.getElementById("DropDownList2");
39 AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
40 }
41 function get_area_Result_CallBack(response)
42 {
43 if (response.value != null)
44 {
45 document.all("DropDownList3").length=0;
46 var ds = response.value;
47 if(ds != null && typeof(ds) == "object" && ds.Tables != null)
48 {
49 for(var i=0; i<ds.Tables[0].Rows.length; i++)
50 {
51 var name=ds.Tables[0].Rows[i].area;
52 var id=ds.Tables[0].Rows[i].areaID;
53 document.all("DropDownList3").options.add(new Option(name,id));
54 }
55 }
56 }
57 return
58 }
59 function getData()
60 {
61 var province=document.getElementById("DropDownList1");
62 var pindex = province.selectedIndex;
63 var pValue = province.options[pindex].value;
64 var pText = province.options[pindex].text;
65
66 var city=document.getElementById("DropDownList2");
67 var cindex = city.selectedIndex;
68 var cValue = city.options[cindex].value;
69 var cText = city.options[cindex].text;
70
71 var area=document.getElementById("DropDownList3");
72 var aindex = area.selectedIndex;
73 var aValue = area.options[aindex].value;
74 var aText = area.options[aindex].text;
75
76 var txt=document.getElementById("TextBox1");
77
78 document.getElementById("<%=TextBox1.ClientID%>").innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"区:"+aValue+"|"+aText;
79 }
80 </SCRIPT>
81 </HEAD>
82 <body ms_positioning="GridLayout">
83 <form id="Form1" method="post" runat="server">
84 <TABLE id="Table1" style="Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 32px" cellSpacing="1"
85 cellPadding="1" width="300" border="1" bgColor="#ccff66">
86 <TR>
87 <TD>省市</TD>
88 <TD><asp:dropdownlist id="DropDownList1" runat="server"></asp:dropdownlist></TD>
89 </TR>
90 <TR>
91 <TD>城市</TD>
92 <TD><asp:dropdownlist id="DropDownList2" runat="server"></asp:dropdownlist></TD>
93 </TR>
94 <TR>
95 <TD>市区</TD>
96 <TD><asp:dropdownlist id="DropDownList3" runat="server"></asp:dropdownlist></TD>
97 </TR>
98 </TABLE>
99 <asp:TextBox id="TextBox1" style="Z-INDEX: 102; LEFT: 416px; POSITION: absolute; TOP: 48px" runat="server"
100 Width="424px"></asp:TextBox><INPUT style="Z-INDEX: 103; LEFT: 456px; WIDTH: 56px; POSITION: absolute; TOP: 96px; HEIGHT: 24px"
101 type="button" value="test" onclick="getData();">
102 </form>
103 </body>
104 </HTML>
2.cs代码
View Code
1 using System;
2 using System.Collections;
3 using System.ComponentModel;
4 using System.Data;
5 using System.Drawing;
6 using System.Web;
7 using System.Web.SessionState;
8 using System.Web.UI;
9 using System.Web.UI.WebControls;
10 using System.Web.UI.HtmlControls;
11 namespace AjaxTest
12 {
13 /// <summary>
14 /// Summary description for WebForm1.
15 /// </summary>
16 public class WebForm1 : System.Web.UI.Page
17 {
18 protected System.Web.UI.WebControls.DropDownList DropDownList1;
19 protected System.Web.UI.WebControls.DropDownList DropDownList2;
20 protected System.Web.UI.WebControls.TextBox TextBox1;
21 protected System.Web.UI.WebControls.DropDownList DropDownList3;
22
23 private void Page_Load(object sender, System.EventArgs e)
24 {
25 Ajax.Utility.RegisterTypeForAjax(typeof(AjaxMethod));
26 if(!Page.IsPostBack)
27 {
28 this.DropDownList1.DataSource=AjaxMethod.GetProvinceList();
29 this.DropDownList1.DataTextField="province";
30 this.DropDownList1.DataValueField="provinceID";
31 this.DropDownList1.DataBind();
32
33 this.DropDownList1.Attributes.Add("onclick","cityResult();");
34 this.DropDownList2.Attributes.Add("onclick","areaResult();");
35 }
36 }
37
38 Web Form Designer generated code
39 }
40 }
2 using System.Collections;
3 using System.ComponentModel;
4 using System.Data;
5 using System.Drawing;
6 using System.Web;
7 using System.Web.SessionState;
8 using System.Web.UI;
9 using System.Web.UI.WebControls;
10 using System.Web.UI.HtmlControls;
11 namespace AjaxTest
12 {
13 /// <summary>
14 /// Summary description for WebForm1.
15 /// </summary>
16 public class WebForm1 : System.Web.UI.Page
17 {
18 protected System.Web.UI.WebControls.DropDownList DropDownList1;
19 protected System.Web.UI.WebControls.DropDownList DropDownList2;
20 protected System.Web.UI.WebControls.TextBox TextBox1;
21 protected System.Web.UI.WebControls.DropDownList DropDownList3;
22
23 private void Page_Load(object sender, System.EventArgs e)
24 {
25 Ajax.Utility.RegisterTypeForAjax(typeof(AjaxMethod));
26 if(!Page.IsPostBack)
27 {
28 this.DropDownList1.DataSource=AjaxMethod.GetProvinceList();
29 this.DropDownList1.DataTextField="province";
30 this.DropDownList1.DataValueField="provinceID";
31 this.DropDownList1.DataBind();
32
33 this.DropDownList1.Attributes.Add("onclick","cityResult();");
34 this.DropDownList2.Attributes.Add("onclick","areaResult();");
35 }
36 }
37
38 Web Form Designer generated code
39 }
40 }
3.AjaxMethod
View Code
1 using System;
2 using System.Data;
3 using System.Data.SqlClient;
4 namespace AjaxTest
5 {
6 /// <summary>
7 /// Summary description for AjaxMethod.
8 /// </summary>
9 public class AjaxMethod
10 {
11 #region GetProvinceList
12 public static DataSet GetProvinceList()
13 {
14 string sql="select * from province";
15 return GetDataSet(sql);
16 }
17 #endregion
18
19 #region GetCityList
20 [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
21 public DataSet GetCityList(int provinceid)
22 {
23 string sql="select * from city where father="+provinceid;
24 return GetDataSet(sql);
25 }
26 #endregion
27
28 #region GetAreaList
29 [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
30 public DataSet GetAreaList(int cityid)
31 {
32 string sql="select * from area where father="+cityid;
33 return GetDataSet(sql);
34 }
35 #endregion
36
37 #region GetDataSet
38 public static DataSet GetDataSet(string sql)
39 {
40 string ConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
41 SqlDataAdapter sda =new SqlDataAdapter(sql,ConnectionString);
42 DataSet ds=new DataSet();
43 sda.Fill(ds);
44 return ds;
45 }
46 #endregion
47 }
48 }
2 using System.Data;
3 using System.Data.SqlClient;
4 namespace AjaxTest
5 {
6 /// <summary>
7 /// Summary description for AjaxMethod.
8 /// </summary>
9 public class AjaxMethod
10 {
11 #region GetProvinceList
12 public static DataSet GetProvinceList()
13 {
14 string sql="select * from province";
15 return GetDataSet(sql);
16 }
17 #endregion
18
19 #region GetCityList
20 [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
21 public DataSet GetCityList(int provinceid)
22 {
23 string sql="select * from city where father="+provinceid;
24 return GetDataSet(sql);
25 }
26 #endregion
27
28 #region GetAreaList
29 [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
30 public DataSet GetAreaList(int cityid)
31 {
32 string sql="select * from area where father="+cityid;
33 return GetDataSet(sql);
34 }
35 #endregion
36
37 #region GetDataSet
38 public static DataSet GetDataSet(string sql)
39 {
40 string ConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
41 SqlDataAdapter sda =new SqlDataAdapter(sql,ConnectionString);
42 DataSet ds=new DataSet();
43 sda.Fill(ds);
44 return ds;
45 }
46 #endregion
47 }
48 }
4.web.config
<httpHandlers> <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" /> </httpHandlers>
from:
http://www.cnblogs.com/singlepine/archive/2009/10/23/257954.html
浙公网安备 33010602011771号