- 技术人生
- Ajax实现无刷新三联动下拉框
1.html代码
<
HTML
>
<
HEAD
>
<
title
>
Ajax实现无刷新三联动下拉框
</
title
>
<
meta
content
="Microsoft Visual Studio .NET 7.1"
name
="GENERATOR"
>
<
meta
content
="C#"
name
="CODE_LANGUAGE"
>
<
meta
content
="JavaScript"
name
="vs_defaultClientScript"
>
<
meta
content
="http://schemas.microsoft.com/intellisense/ie5"
name
="vs_targetSchema"
>
<
SCRIPT
language
="javascript"
>
//城市------------------------------ function cityResult() { var city=document.getElementById("DropDownList1"); AjaxMethod.GetCityList(city.value,get_city_Result_CallBack); } function get_city_Result_CallBack(response) { if (response.value != null) { //debugger; document.all("DropDownList2").length=0; var ds = response.value; if(ds != null && typeof(ds) == "object" && ds.Tables != null) { for(var i=0; i<ds.Tables[0].Rows.length; i++) { var name=ds.Tables[0].Rows[i].city; var id=ds.Tables[0].Rows[i].cityID; document.all("DropDownList2").options.add(new Option(name,id)); } } } return } //市区---------------------------------------- function areaResult() { var area=document.getElementById("DropDownList2"); AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack); } function get_area_Result_CallBack(response) { if (response.value != null) { document.all("DropDownList3").length=0; var ds = response.value; if(ds != null && typeof(ds) == "object" && ds.Tables != null) { for(var i=0; i<ds.Tables[0].Rows.length; i++) { var name=ds.Tables[0].Rows[i].area; var id=ds.Tables[0].Rows[i].areaID; document.all("DropDownList3").options.add(new Option(name,id)); } } } return } function getData() { var province=document.getElementById("DropDownList1"); var pindex = province.selectedIndex; var pValue = province.options[pindex].value; var pText = province.options[pindex].text; var city=document.getElementById("DropDownList2"); var cindex = city.selectedIndex; var cValue = city.options[cindex].value; var cText = city.options[cindex].text; var area=document.getElementById("DropDownList3"); var aindex = area.selectedIndex; var aValue = area.options[aindex].value; var aText = area.options[aindex].text; var txt=document.getElementById("TextBox1"); document.getElementById("<%=TextBox1.ClientID%>").innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"区:"+aValue+"|"+aText; }
</
SCRIPT
>
</
HEAD
>
<
body
ms_positioning
="GridLayout"
>
<
form
id
="Form1"
method
="post"
runat
="server"
>
<
TABLE
id
="Table1"
style
="Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 32px"
cellSpacing
="1"
cellPadding
="1"
width
="300"
border
="1"
bgColor
="#ccff66"
>
<
TR
>
<
TD
>
省市
</
TD
>
<
TD
><
asp:dropdownlist
id
="DropDownList1"
runat
="server"
></
asp:dropdownlist
></
TD
>
</
TR
>
<
TR
>
<
TD
>
城市
</
TD
>
<
TD
><
asp:dropdownlist
id
="DropDownList2"
runat
="server"
></
asp:dropdownlist
></
TD
>
</
TR
>
<
TR
>
<
TD
>
市区
</
TD
>
<
TD
><
asp:dropdownlist
id
="DropDownList3"
runat
="server"
></
asp:dropdownlist
></
TD
>
</
TR
>
</
TABLE
>
<
asp:TextBox
id
="TextBox1"
style
="Z-INDEX: 102; LEFT: 416px; POSITION: absolute; TOP: 48px"
runat
="server"
Width
="424px"
></
asp:TextBox
><
INPUT
style
="Z-INDEX: 103; LEFT: 456px; WIDTH: 56px; POSITION: absolute; TOP: 96px; HEIGHT: 24px"
type
="button"
value
="test"
onclick
="getData();"
>
</
form
>
</
body
>
</
HTML
>
2.cs代码
using
System;
using
System.Collections;
using
System.ComponentModel;
using
System.Data;
using
System.Drawing;
using
System.Web;
using
System.Web.SessionState;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.HtmlControls;
namespace
AjaxTest
{ /**//// <summary> /// Summary description for WebForm1. /// </summary> public class WebForm1 : System.Web.UI.Page { protected System.Web.UI.WebControls.DropDownList DropDownList1; protected System.Web.UI.WebControls.DropDownList DropDownList2; protected System.Web.UI.WebControls.TextBox TextBox1; protected System.Web.UI.WebControls.DropDownList DropDownList3; private void Page_Load(object sender, System.EventArgs e) { Ajax.Utility.RegisterTypeForAjax(typeof(AjaxMethod)); if(!Page.IsPostBack) { this.DropDownList1.DataSource=AjaxMethod.GetProvinceList(); this.DropDownList1.DataTextField="province"; this.DropDownList1.DataValueField="provinceID"; this.DropDownList1.DataBind(); this.DropDownList1.Attributes.Add("onclick","cityResult();"); this.DropDownList2.Attributes.Add("onclick","areaResult();"); } } Web Form Designer generated code#region Web Form Designer generated code override protected void OnInit(EventArgs e) { // // CODEGEN: This call is required by the ASP.NET Web Form Designer. // InitializeComponent(); base.OnInit(e); } /**//// <summary> /// Required method for Designer support - do not modify /// the contents of this method with the code editor. /// </summary> private void InitializeComponent() { this.Load += new System.EventHandler(this.Page_Load); } #endregion }}
3.AjaxMethod
using
System;
using
System.Data;
using
System.Data.SqlClient;
namespace
AjaxTest
{ /**//// <summary> /// Summary description for AjaxMethod. /// </summary> public class AjaxMethod { GetProvinceList#region GetProvinceList public static DataSet GetProvinceList() { string sql="select * from province"; return GetDataSet(sql); } #endregion GetCityList#region GetCityList [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)] public DataSet GetCityList(int provinceid) { string sql="select * from city where father="+provinceid; return GetDataSet(sql); } #endregion GetAreaList#region GetAreaList [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)] public DataSet GetAreaList(int cityid) { string sql="select * from area where father="+cityid; return GetDataSet(sql); } #endregion GetDataSet#region GetDataSet public static DataSet GetDataSet(string sql) { string ConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"]; SqlDataAdapter sda =new SqlDataAdapter(sql,ConnectionString); DataSet ds=new DataSet(); sda.Fill(ds); return ds; } #endregion }}
4.web.config
<
httpHandlers
>
<
add
verb
="POST,GET"
path
="ajax/*.ashx"
type
="Ajax.PageHandlerFactory, Ajax"
/>
</
httpHandlers
>
5.ajax.dll下载
/Files/singlepine/Ajax.rar
6.真实数据库下载
area1.rar
7.源代码下载
AjaxTest.rar
