1.HTML代码
<
HTML
>
< HEAD >
< title > Ajax实现无刷新三联动下拉框 </ title >
< Meta content ="MicrosoftVisualStudio.NET7.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" > @H_502_118@
//城市------------------------------
@H_502_118@function@H_502_118@cityResult()
@H_502_118@{
var@H_502_118@city@H_502_118@=@H_502_118@document.getElementById(@H_502_118@"@H_502_118@DropDownList1@H_502_118@"@H_502_118@);
AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
}@H_502_118@
function@H_502_118@get_city_Result_CallBack(response)
@H_502_118@{
if@H_502_118@(response.value@H_502_118@!=@H_502_118@null@H_502_118@)
@H_502_118@{
//debugger;
@H_502_118@document.all(@H_502_118@"@H_502_118@DropDownList2@H_502_118@"@H_502_118@).length@H_502_118@=@H_502_118@0@H_502_118@;
var@H_502_118@ds@H_502_118@=@H_502_118@response.value;
if@H_502_118@(ds@H_502_118@!=@H_502_118@null@H_502_118@@H_502_118@&&@H_502_118@typeof@H_502_118@(ds)@H_502_118@==@H_502_118@@H_502_118@"@H_502_118@object@H_502_118@"@H_502_118@@H_502_118@&&@H_502_118@ds.Tables@H_502_118@!=@H_502_118@null@H_502_118@)
@H_502_118@{
for@H_502_118@(var@H_502_118@i@H_502_118@=@H_502_118@0@H_502_118@;i@H_502_118@<@H_502_118@ds.Tables[@H_502_118@0@H_502_118@].Rows.length;i@H_502_118@++@H_502_118@)
@H_502_118@{
var@H_502_118@name@H_502_118@=@H_502_118@ds.Tables[@H_502_118@0@H_502_118@].Rows[i].city;
var@H_502_118@id@H_502_118@=@H_502_118@ds.Tables[@H_502_118@0@H_502_118@].Rows[i].cityID;
document.all(@H_502_118@"@H_502_118@DropDownList2@H_502_118@"@H_502_118@).options.add(new@H_502_118@Option(name,id));
}@H_502_118@
}@H_502_118@
}@H_502_118@
return@H_502_118@
}@H_502_118@
//市区----------------------------------------
@H_502_118@function@H_502_118@areaResult()
@H_502_118@{
var@H_502_118@area@H_502_118@=@H_502_118@document.getElementById(@H_502_118@"@H_502_118@DropDownList2@H_502_118@"@H_502_118@);
AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
}@H_502_118@
function@H_502_118@get_area_Result_CallBack(response)
@H_502_118@{
if@H_502_118@(response.value@H_502_118@!=@H_502_118@null@H_502_118@)
@H_502_118@{
document.all(@H_502_118@"@H_502_118@DropDownList3@H_502_118@"@H_502_118@).length@H_502_118@=@H_502_118@0@H_502_118@;
var@H_502_118@ds@H_502_118@=@H_502_118@response.value;
if@H_502_118@(ds@H_502_118@!=@H_502_118@null@H_502_118@@H_502_118@&&@H_502_118@typeof@H_502_118@(ds)@H_502_118@==@H_502_118@@H_502_118@"@H_502_118@object@H_502_118@"@H_502_118@@H_502_118@&&@H_502_118@ds.Tables@H_502_118@!=@H_502_118@null@H_502_118@)
@H_502_118@{
for@H_502_118@(var@H_502_118@i@H_502_118@=@H_502_118@0@H_502_118@;i@H_502_118@<@H_502_118@ds.Tables[@H_502_118@0@H_502_118@].Rows.length;i@H_502_118@++@H_502_118@)
@H_502_118@{
var@H_502_118@name@H_502_118@=@H_502_118@ds.Tables[@H_502_118@0@H_502_118@].Rows[i].area;
var@H_502_118@id@H_502_118@=@H_502_118@ds.Tables[@H_502_118@0@H_502_118@].Rows[i].areaID;
document.all(@H_502_118@"@H_502_118@DropDownList3@H_502_118@"@H_502_118@).options.add(new@H_502_118@Option(name,id));
}@H_502_118@
}@H_502_118@
}@H_502_118@
return@H_502_118@
}@H_502_118@
function@H_502_118@getData()
@H_301_596@@H_502_118@{
var@H_502_118@province@H_502_118@=@H_502_118@document.getElementById(@H_502_118@"@H_502_118@DropDownList1@H_502_118@"@H_502_118@);
var@H_502_118@pindex@H_502_118@=@H_502_118@province.selectedIndex;
var@H_502_118@pValue@H_502_118@=@H_502_118@province.options[pindex].value;
var@H_502_118@pText@H_502_118@=@H_502_118@province.options[pindex].text;
var@H_502_118@city@H_502_118@=@H_502_118@document.getElementById(@H_502_118@"@H_502_118@DropDownList2@H_502_118@"@H_502_118@);
var@H_502_118@cindex@H_502_118@=@H_502_118@city.selectedIndex;
var@H_502_118@cValue@H_502_118@=@H_502_118@city.options[cindex].value;
var@H_502_118@cText@H_502_118@=@H_502_118@city.options[cindex].text;
var@H_502_118@area@H_502_118@=@H_502_118@document.getElementById(@H_502_118@"@H_502_118@DropDownList3@H_502_118@"@H_502_118@);
var@H_502_118@aindex@H_502_118@=@H_502_118@area.selectedIndex;
var@H_502_118@aValue@H_502_118@=@H_502_118@area.options[aindex].value;
var@H_502_118@aText@H_502_118@=@H_502_118@area.options[aindex].text;
var@H_502_118@txt@H_502_118@=@H_502_118@document.getElementById(@H_502_118@"@H_502_118@TextBox1@H_502_118@"@H_502_118@);
document.getElementById(@H_502_118@"@H_502_118@<%=TextBox1.ClientID%>@H_502_118@"@H_502_118@).innerText@H_502_118@=@H_502_118@"@H_502_118@省:@H_502_118@"@H_502_118@+@H_502_118@pValue@H_502_118@+@H_502_118@"@H_502_118@|@H_502_118@"@H_502_118@+@H_502_118@pText@H_502_118@+@H_502_118@"@H_502_118@市:@H_502_118@"@H_502_118@+@H_502_118@cValue@H_502_118@+@H_502_118@"@H_502_118@|@H_502_118@"@H_502_118@+@H_502_118@cText@H_502_118@+@H_502_118@"@H_502_118@区:@H_502_118@"@H_502_118@+@H_502_118@aValue@H_502_118@+@H_502_118@"@H_502_118@|@H_502_118@"@H_502_118@+@H_502_118@aText;
}@H_502_118@
</ 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代码
< HEAD >
< title > Ajax实现无刷新三联动下拉框 </ title >
< Meta content ="MicrosoftVisualStudio.NET7.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" > @H_502_118@
//城市------------------------------
@H_502_118@function@H_502_118@cityResult()
@H_502_118@{
var@H_502_118@city@H_502_118@=@H_502_118@document.getElementById(@H_502_118@"@H_502_118@DropDownList1@H_502_118@"@H_502_118@);
AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
}@H_502_118@
function@H_502_118@get_city_Result_CallBack(response)
@H_502_118@{
if@H_502_118@(response.value@H_502_118@!=@H_502_118@null@H_502_118@)
@H_502_118@{
//debugger;
@H_502_118@document.all(@H_502_118@"@H_502_118@DropDownList2@H_502_118@"@H_502_118@).length@H_502_118@=@H_502_118@0@H_502_118@;
var@H_502_118@ds@H_502_118@=@H_502_118@response.value;
if@H_502_118@(ds@H_502_118@!=@H_502_118@null@H_502_118@@H_502_118@&&@H_502_118@typeof@H_502_118@(ds)@H_502_118@==@H_502_118@@H_502_118@"@H_502_118@object@H_502_118@"@H_502_118@@H_502_118@&&@H_502_118@ds.Tables@H_502_118@!=@H_502_118@null@H_502_118@)
@H_502_118@{
for@H_502_118@(var@H_502_118@i@H_502_118@=@H_502_118@0@H_502_118@;i@H_502_118@<@H_502_118@ds.Tables[@H_502_118@0@H_502_118@].Rows.length;i@H_502_118@++@H_502_118@)
@H_502_118@{
var@H_502_118@name@H_502_118@=@H_502_118@ds.Tables[@H_502_118@0@H_502_118@].Rows[i].city;
var@H_502_118@id@H_502_118@=@H_502_118@ds.Tables[@H_502_118@0@H_502_118@].Rows[i].cityID;
document.all(@H_502_118@"@H_502_118@DropDownList2@H_502_118@"@H_502_118@).options.add(new@H_502_118@Option(name,id));
}@H_502_118@
}@H_502_118@
}@H_502_118@
return@H_502_118@
}@H_502_118@
//市区----------------------------------------
@H_502_118@function@H_502_118@areaResult()
@H_502_118@{
var@H_502_118@area@H_502_118@=@H_502_118@document.getElementById(@H_502_118@"@H_502_118@DropDownList2@H_502_118@"@H_502_118@);
AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
}@H_502_118@
function@H_502_118@get_area_Result_CallBack(response)
@H_502_118@{
if@H_502_118@(response.value@H_502_118@!=@H_502_118@null@H_502_118@)
@H_502_118@{
document.all(@H_502_118@"@H_502_118@DropDownList3@H_502_118@"@H_502_118@).length@H_502_118@=@H_502_118@0@H_502_118@;
var@H_502_118@ds@H_502_118@=@H_502_118@response.value;
if@H_502_118@(ds@H_502_118@!=@H_502_118@null@H_502_118@@H_502_118@&&@H_502_118@typeof@H_502_118@(ds)@H_502_118@==@H_502_118@@H_502_118@"@H_502_118@object@H_502_118@"@H_502_118@@H_502_118@&&@H_502_118@ds.Tables@H_502_118@!=@H_502_118@null@H_502_118@)
@H_502_118@{
for@H_502_118@(var@H_502_118@i@H_502_118@=@H_502_118@0@H_502_118@;i@H_502_118@<@H_502_118@ds.Tables[@H_502_118@0@H_502_118@].Rows.length;i@H_502_118@++@H_502_118@)
@H_502_118@{
var@H_502_118@name@H_502_118@=@H_502_118@ds.Tables[@H_502_118@0@H_502_118@].Rows[i].area;
var@H_502_118@id@H_502_118@=@H_502_118@ds.Tables[@H_502_118@0@H_502_118@].Rows[i].areaID;
document.all(@H_502_118@"@H_502_118@DropDownList3@H_502_118@"@H_502_118@).options.add(new@H_502_118@Option(name,id));
}@H_502_118@
}@H_502_118@
}@H_502_118@
return@H_502_118@
}@H_502_118@
function@H_502_118@getData()
@H_301_596@@H_502_118@{
var@H_502_118@province@H_502_118@=@H_502_118@document.getElementById(@H_502_118@"@H_502_118@DropDownList1@H_502_118@"@H_502_118@);
var@H_502_118@pindex@H_502_118@=@H_502_118@province.selectedIndex;
var@H_502_118@pValue@H_502_118@=@H_502_118@province.options[pindex].value;
var@H_502_118@pText@H_502_118@=@H_502_118@province.options[pindex].text;
var@H_502_118@city@H_502_118@=@H_502_118@document.getElementById(@H_502_118@"@H_502_118@DropDownList2@H_502_118@"@H_502_118@);
var@H_502_118@cindex@H_502_118@=@H_502_118@city.selectedIndex;
var@H_502_118@cValue@H_502_118@=@H_502_118@city.options[cindex].value;
var@H_502_118@cText@H_502_118@=@H_502_118@city.options[cindex].text;
var@H_502_118@area@H_502_118@=@H_502_118@document.getElementById(@H_502_118@"@H_502_118@DropDownList3@H_502_118@"@H_502_118@);
var@H_502_118@aindex@H_502_118@=@H_502_118@area.selectedIndex;
var@H_502_118@aValue@H_502_118@=@H_502_118@area.options[aindex].value;
var@H_502_118@aText@H_502_118@=@H_502_118@area.options[aindex].text;
var@H_502_118@txt@H_502_118@=@H_502_118@document.getElementById(@H_502_118@"@H_502_118@TextBox1@H_502_118@"@H_502_118@);
document.getElementById(@H_502_118@"@H_502_118@<%=TextBox1.ClientID%>@H_502_118@"@H_502_118@).innerText@H_502_118@=@H_502_118@"@H_502_118@省:@H_502_118@"@H_502_118@+@H_502_118@pValue@H_502_118@+@H_502_118@"@H_502_118@|@H_502_118@"@H_502_118@+@H_502_118@pText@H_502_118@+@H_502_118@"@H_502_118@市:@H_502_118@"@H_502_118@+@H_502_118@cValue@H_502_118@+@H_502_118@"@H_502_118@|@H_502_118@"@H_502_118@+@H_502_118@cText@H_502_118@+@H_502_118@"@H_502_118@区:@H_502_118@"@H_502_118@+@H_502_118@aValue@H_502_118@+@H_502_118@"@H_502_118@|@H_502_118@"@H_502_118@+@H_502_118@aText;
}@H_502_118@
</ 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 >
public
class
WebForm1:System.Web.UI.Page
{
protectedSystem.Web.UI.WebControls.DropDownListDropDownList1;
protectedSystem.Web.UI.WebControls.DropDownListDropDownList2;
protectedSystem.Web.UI.WebControls.TextBoxTextBox1;
protectedSystem.Web.UI.WebControls.DropDownListDropDownList3;
privatevoidPage_Load(objectsender,System.EventArgse)
{
Ajax.Utility.RegisterTypeForAjax(typeof(AjaxMethod));
if(!Page.IsPostBack)
{
this.DropDownList1.DataSource=AjaxMethod.GetPovinceList();
this.DropDownList1.DataTextField="province";
this.DropDownList1.DataValueField="provinceID";
this.DropDownList1.DataBind();
this.DropDownList1.Attributes.Add("onclick","cityResult();");
this.DropDownList2.Attributes.Add("onclick","areaResult();");
}
}
#regionWebFormDesignergeneratedcode
overrideprotectedvoidOnInit(EventArgse)
{
//
//CODEGEN:ThiscallisrequiredbytheASP.NETWebFormDesigner.
//
InitializeComponent();
base.OnInit(e);
}
///<summary>
///requiredmethodforDesignersupport-donotmodify
///thecontentsofthismethodwiththecodeeditor.
///</summary>
privatevoidInitializeComponent()
{
this.Load+=newSystem.EventHandler(this.Page_Load);
}
#endregion
}
3.AjaxMethod
{
protectedSystem.Web.UI.WebControls.DropDownListDropDownList1;
protectedSystem.Web.UI.WebControls.DropDownListDropDownList2;
protectedSystem.Web.UI.WebControls.TextBoxTextBox1;
protectedSystem.Web.UI.WebControls.DropDownListDropDownList3;
privatevoidPage_Load(objectsender,System.EventArgse)
{
Ajax.Utility.RegisterTypeForAjax(typeof(AjaxMethod));
if(!Page.IsPostBack)
{
this.DropDownList1.DataSource=AjaxMethod.GetPovinceList();
this.DropDownList1.DataTextField="province";
this.DropDownList1.DataValueField="provinceID";
this.DropDownList1.DataBind();
this.DropDownList1.Attributes.Add("onclick","cityResult();");
this.DropDownList2.Attributes.Add("onclick","areaResult();");
}
}
#regionWebFormDesignergeneratedcode
overrideprotectedvoidOnInit(EventArgse)
{
//
//CODEGEN:ThiscallisrequiredbytheASP.NETWebFormDesigner.
//
InitializeComponent();
base.OnInit(e);
}
///<summary>
///requiredmethodforDesignersupport-donotmodify
///thecontentsofthismethodwiththecodeeditor.
///</summary>
privatevoidInitializeComponent()
{
this.Load+=newSystem.EventHandler(this.Page_Load);
}
#endregion
}
using
System;
using System.Data;
using System.Data.sqlClient;
namespace AjaxTest
{
///<summary>
///SummarydescriptionforAjaxMethod.
///</summary>
publicclassAjaxMethod
{
#regionGetPovinceList
publicstaticDataSetGetPovinceList()
{
stringsql="select*frompovince";
returnGetDataSet(sql);
}
#endregion
#regionGetCityList
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
publicDataSetGetCityList(intpovinceid)
{
stringsql="select*fromcitywherefather='"+povinceid+"'";
returnGetDataSet(sql);
}
#endregion
#regionGetAreaList
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
publicDataSetGetAreaList(intcityid)
{
stringsql="select*fromareawherefather='"+cityid+"'";
returnGetDataSet(sql);
}
#endregion
#regionGetDataSet
publicstaticDataSetGetDataSet(stringsql)
{
stringConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
sqlDataAdaptersda=newsqlDataAdapter(sql,ConnectionString);
DataSetds=newDataSet();
sda.Fill(ds);
returnds;
}
#endregion
}
}
4.web.config
using System.Data;
using System.Data.sqlClient;
namespace AjaxTest
{
///<summary>
///SummarydescriptionforAjaxMethod.
///</summary>
publicclassAjaxMethod
{
#regionGetPovinceList
publicstaticDataSetGetPovinceList()
{
stringsql="select*frompovince";
returnGetDataSet(sql);
}
#endregion
#regionGetCityList
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
publicDataSetGetCityList(intpovinceid)
{
stringsql="select*fromcitywherefather='"+povinceid+"'";
returnGetDataSet(sql);
}
#endregion
#regionGetAreaList
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
publicDataSetGetAreaList(intcityid)
{
stringsql="select*fromareawherefather='"+cityid+"'";
returnGetDataSet(sql);
}
#endregion
#regionGetDataSet
publicstaticDataSetGetDataSet(stringsql)
{
stringConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
sqlDataAdaptersda=newsqlDataAdapter(sql,ConnectionString);
DataSetds=newDataSet();
sda.Fill(ds);
returnds;
}
#endregion
}
}
<
httpHandlers
>
< add verb ="POST,GET" path ="ajax/*.ashx" type ="Ajax.PageHandlerFactory,Ajax" />
</ httpHandlers >
5.ajax.dll下载
/Files/singlepine/Ajax.rar
< add verb ="POST,GET" path ="ajax/*.ashx" type ="Ajax.PageHandlerFactory,Ajax" />
</ httpHandlers >
6.真实数据库下载 /Files/singlepine/area.rar
7.具体配置参见 http://singlepine.cnblogs.com/articles/253393.html
8.源代码下载 /Files/singlepine/AjaxTest.rar
9. XmlHttp实现无刷新三联动下拉框