<HTML>
<HEAD>
<title>ajax realization of no-refresh three linkage dropdown box </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" >
City------------------------------
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
}
Urban----------------------------------------
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= "Province:" +pvalue+ "|" +ptext+ "City:" +cvalue+ "|" +ctext+ "area:" +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= "border=" 1 "bgcolor=" #ccff66 ">
<TR>
<TD> Provinces </TD>
<td><asp:dropdownlist id= "DropDownList1" runat= "Server" ></asp:dropdownlist></TD>
</TR>
<TR>
<TD> City </TD>
<td><asp:dropdownlist id= "DropDownList2" runat= "Server" ></asp:dropdownlist></TD>
</TR>
<TR>
<TD> City </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>
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 the call are required by the ASP.net Web Form Designer.
//
InitializeComponent ();
Base. OnInit (e);
}
/**////<summary>
Required to Designer support-do not modify
The contents is 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
<add verb= "Post,get" path= "Ajax/*.ashx" type= "Ajax.pagehandlerfactory, Ajax"/>
