Ajax 实现省市县联动
本文介绍如何使用 Ajax 技术实现网页上的省市县三级联动效果。通过 AjaxMethod 类中的方法从数据库获取省市县信息，并利用 JavaScript 在页面上动态更新下拉列表。
我的截图如下:
1.首先要在项目中增加对ajax.dll的引用. 2.AjaxMethod.cs
AjaxMethod.cs
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
usingSystem;
usingSystem.Data;
usingSystem.Data.SqlClient;
namespaceMyAjaxSample
{
/**////<summary>
///AjaxMethod的摘要说明。
///</summary>
publicclassAjaxMethod
{
GetPovinceList#regionGetPovinceList
publicstaticDataSetGetPovinceList()
{
stringsql="select*frompovince";
returnGetDataSet(sql);
}
#endregion
GetCityList#regionGetCityList
[Ajax.AjaxMethod]
publicDataSetGetCityList(intpovinceid)
{
stringsql="select*fromcitywherefather='"+povinceid+"'";
returnGetDataSet(sql);
}
#endregion
GetAreaList#regionGetAreaList
[Ajax.AjaxMethod]
publicDataSetGetAreaList(intcityid)
{
stringsql="select*fromareawherefather='"+cityid+"'";
returnGetDataSet(sql);
}
#endregion
GetDataSet#regionGetDataSet
publicstaticDataSetGetDataSet(stringsql)
{
stringConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
SqlDataAdaptersda=newSqlDataAdapter(sql,ConnectionString);
DataSetds=newDataSet();
sda.Fill(ds);
returnds;
}
#endregion
}
}
3.HTML代码:
FourAjaxSample.aspx
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><%@Pagelanguage="c#"Codebehind="FourAjaxSample.aspx.cs"AutoEventWireup="false"Inherits="MyAjaxSample.FourAjaxSample"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<title>FourAjaxSample</title>
<metacontent="MicrosoftVisualStudio.NET7.1"name="GENERATOR">
<metacontent="C#"name="CODE_LANGUAGE">
<metacontent="JavaScript"name="vs_defaultClientScript">
<metacontent="http://schemas.microsoft.com/intellisense/ie5"name="vs_targetSchema">
<scriptlanguage="javascript">
functioncityResult()
{
varcity=document.getElementById("DropDownList1");
AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
}
functionget_city_Result_CallBack(response)
{
if(response.value!=null)
{
document.all("DropDownList2").length=0;
vards=response.value;
if(ds!=null&&typeof(ds)=="object"&&ds.Tables!=null)
{
for(vari=0;i<ds.Tables[0].Rows.length;i++)
{
varname=ds.Tables[0].Rows[i].city;
varid=ds.Tables[0].Rows[i].cityID;
document.all("DropDownList2").options.add(newOption(name,id));
}
document.all("TextBox1").value="";
}
}
return
}
functionareaResult()
{
vararea=document.getElementById("DropDownList2");
AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
}
functionget_area_Result_CallBack()
{
varprovince=document.getElementById("DropDownList1");
varpindex=province.selectedIndex;
varpValue=province.options[pindex].value;
varpText=province.options[pindex].text;
varcity=document.getElementById("DropDownList2");
varcindex=city.selectedIndex;
varcValue=city.options[cindex].value;
varcText=city.options[cindex].text;
document.all("TextBox1").value=pText+cText;
}
</script>
</HEAD>
<bodyMS_POSITIONING="GridLayout">
<formid="Form1"method="post"runat="server">
<h3>Ajax实现两级联动</h3>
<TABLEclass="border"id="border"style="Z-INDEX:101;LEFT:16px;WIDTH:289px;POSITION:absolute;TOP:48px;HEIGHT:79px"
borderColor="#95b0d9"cellSpacing="0"cellPadding="0"width="289"align="center"bgColor="#ffffff"
border="1">
<TR>
<TDstyle="WIDTH:130px;HEIGHT:27px"bgColor="#d8e7f6">
<asp:labelid="Lab_province"runat="server">省(直辖市)</asp:label></TD>
<TDstyle="HEIGHT:27px">
<asp:dropdownlistid="DropDownList1"runat="server"onchange="cityResult();"></asp:dropdownlist></TD>
</TR>
<TR>
<TDstyle="WIDTH:130px;HEIGHT:24px"bgColor="#d8e7f6">
<asp:Labelid="Lab_City"runat="server">城市</asp:Label></TD>
<TDstyle="HEIGHT:24px">
<asp:DropDownListid="DropDownList2"runat="server"onchange="areaResult();"></asp:DropDownList></TD>
</TR>
<TR>
<TDstyle="WIDTH:130px"bgColor="#d8e7f6">你的最后选择是:
</TD>
<TD>
<asp:TextBoxid="TextBox1"runat="server"></asp:TextBox></TD>
</TR>
</TABLE>
</form>
</body>
</HTML>
4 .cs文件:
FourAjaxSample.aspx.cs
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->usingSystem;
usingSystem.Collections;
usingSystem.ComponentModel;
usingSystem.Data;
usingSystem.Drawing;
usingSystem.Web;
usingSystem.Web.SessionState;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.HtmlControls;
namespaceMyAjaxSample
{
/**////<summary>
///FourAjaxSample的摘要说明。
///</summary>
publicclassFourAjaxSample:System.Web.UI.Page
{
protectedSystem.Web.UI.WebControls.DropDownListDropDownList1;
protectedSystem.Web.UI.WebControls.LabelLab_province;
protectedSystem.Web.UI.WebControls.LabelLab_City;
protectedSystem.Web.UI.WebControls.TextBoxTextBox1;
protectedSystem.Web.UI.WebControls.DropDownListDropDownList2;
privatevoidPage_Load(objectsender,System.EventArgse)
{
Ajax.Utility.RegisterTypeForAjax(typeof(MyAjaxSample.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();");
}
}
Web窗体设计器生成的代码#regionWeb窗体设计器生成的代码
overrideprotectedvoidOnInit(EventArgse)
{
//
//CODEGEN:该调用是ASP.NETWeb窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/**////<summary>
///设计器支持所需的方法-不要使用代码编辑器修改
///此方法的内容。
///</summary>
privatevoidInitializeComponent()
{
this.Load+=newSystem.EventHandler(this.Page_Load);
}
#endregion
}
}
5.web.config
web.config设置数据库连接串
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><appSettings>
<!--SQL数据库连接-->
<addkey="ConnectionString"value="DataSource=localhost;UserId=sa;Password=zhangzs;InitialCatalog=mytest;"/>
</appSettings>
1.首先要在项目中增加对ajax.dll的引用. 2.AjaxMethod.cs
AjaxMethod.cs<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
usingSystem;usingSystem.Data;usingSystem.Data.SqlClient;namespaceMyAjaxSample{/**////<summary>///AjaxMethod的摘要说明。///</summary>publicclassAjaxMethod{GetPovinceList#regionGetPovinceListpublicstaticDataSetGetPovinceList(){stringsql="select*frompovince";returnGetDataSet(sql);}#endregionGetCityList#regionGetCityList[Ajax.AjaxMethod]publicDataSetGetCityList(intpovinceid){stringsql="select*fromcitywherefather='"+povinceid+"'";returnGetDataSet(sql);}#endregionGetAreaList#regionGetAreaList[Ajax.AjaxMethod]publicDataSetGetAreaList(intcityid){stringsql="select*fromareawherefather='"+cityid+"'";returnGetDataSet(sql);}#endregionGetDataSet#regionGetDataSetpublicstaticDataSetGetDataSet(stringsql){stringConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];SqlDataAdaptersda=newSqlDataAdapter(sql,ConnectionString);DataSetds=newDataSet();sda.Fill(ds);returnds;}#endregion}}
3.HTML代码:
FourAjaxSample.aspx<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
<%@Pagelanguage="c#"Codebehind="FourAjaxSample.aspx.cs"AutoEventWireup="false"Inherits="MyAjaxSample.FourAjaxSample"%><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><HTML><HEAD><title>FourAjaxSample</title><metacontent="MicrosoftVisualStudio.NET7.1"name="GENERATOR"><metacontent="C#"name="CODE_LANGUAGE"><metacontent="JavaScript"name="vs_defaultClientScript"><metacontent="http://schemas.microsoft.com/intellisense/ie5"name="vs_targetSchema"><scriptlanguage="javascript">functioncityResult(){varcity=document.getElementById("DropDownList1");AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);}functionget_city_Result_CallBack(response){if(response.value!=null){document.all("DropDownList2").length=0; vards=response.value;if(ds!=null&&typeof(ds)=="object"&&ds.Tables!=null){for(vari=0;i<ds.Tables[0].Rows.length;i++) { varname=ds.Tables[0].Rows[i].city; varid=ds.Tables[0].Rows[i].cityID; document.all("DropDownList2").options.add(newOption(name,id)); } document.all("TextBox1").value=""; }}return}functionareaResult(){vararea=document.getElementById("DropDownList2");AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);}functionget_area_Result_CallBack(){ varprovince=document.getElementById("DropDownList1");varpindex=province.selectedIndex;varpValue=province.options[pindex].value;varpText=province.options[pindex].text;varcity=document.getElementById("DropDownList2");varcindex=city.selectedIndex;varcValue=city.options[cindex].value;varcText=city.options[cindex].text; document.all("TextBox1").value=pText+cText; }</script></HEAD><bodyMS_POSITIONING="GridLayout"><formid="Form1"method="post"runat="server"><h3>Ajax实现两级联动</h3><TABLEclass="border"id="border"style="Z-INDEX:101;LEFT:16px;WIDTH:289px;POSITION:absolute;TOP:48px;HEIGHT:79px"borderColor="#95b0d9"cellSpacing="0"cellPadding="0"width="289"align="center"bgColor="#ffffff"border="1"><TR><TDstyle="WIDTH:130px;HEIGHT:27px"bgColor="#d8e7f6"><asp:labelid="Lab_province"runat="server">省(直辖市)</asp:label></TD><TDstyle="HEIGHT:27px"><asp:dropdownlistid="DropDownList1"runat="server"onchange="cityResult();"></asp:dropdownlist></TD></TR><TR><TDstyle="WIDTH:130px;HEIGHT:24px"bgColor="#d8e7f6"><asp:Labelid="Lab_City"runat="server">城市</asp:Label></TD><TDstyle="HEIGHT:24px"><asp:DropDownListid="DropDownList2"runat="server"onchange="areaResult();"></asp:DropDownList></TD></TR><TR><TDstyle="WIDTH:130px"bgColor="#d8e7f6">你的最后选择是:</TD><TD><asp:TextBoxid="TextBox1"runat="server"></asp:TextBox></TD></TR></TABLE></form></body></HTML>
4 .cs文件:
FourAjaxSample.aspx.cs<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
usingSystem;usingSystem.Collections;usingSystem.ComponentModel;usingSystem.Data;usingSystem.Drawing;usingSystem.Web;usingSystem.Web.SessionState;usingSystem.Web.UI;usingSystem.Web.UI.WebControls;usingSystem.Web.UI.HtmlControls;namespaceMyAjaxSample{/**////<summary>///FourAjaxSample的摘要说明。///</summary>publicclassFourAjaxSample:System.Web.UI.Page{protectedSystem.Web.UI.WebControls.DropDownListDropDownList1;protectedSystem.Web.UI.WebControls.LabelLab_province;protectedSystem.Web.UI.WebControls.LabelLab_City;protectedSystem.Web.UI.WebControls.TextBoxTextBox1;protectedSystem.Web.UI.WebControls.DropDownListDropDownList2;privatevoidPage_Load(objectsender,System.EventArgse){Ajax.Utility.RegisterTypeForAjax(typeof(MyAjaxSample.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();");}}Web窗体设计器生成的代码#regionWeb窗体设计器生成的代码overrideprotectedvoidOnInit(EventArgse){////CODEGEN:该调用是ASP.NETWeb窗体设计器所必需的。//InitializeComponent();base.OnInit(e);}/**////<summary>///设计器支持所需的方法-不要使用代码编辑器修改///此方法的内容。///</summary>privatevoidInitializeComponent(){this.Load+=newSystem.EventHandler(this.Page_Load);}#endregion}}
5.web.config
web.config设置数据库连接串<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
<appSettings><!--SQL数据库连接--><addkey="ConnectionString"value="DataSource=localhost;UserId=sa;Password=zhangzs;InitialCatalog=mytest;"/></appSettings>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
