经常看到有人做“无刷新三级联动”,自己刚开始学Ajax没多长时间,想挑战一下自己,便蹲在电脑前开始了探险。经过了半天的时间,终于实现了这个功能。虽然蹲得脚麻了,腰酸了,但心里美滋儿滋儿的。这半天通过自己独立的查错、调试,学到了不少东西。我也越来越喜欢Ajax了。OK! 加油!Come On!
以下是HTML页面:
<%
...
@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
%>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > 无标题页 </ title >
< script language ="javascript" type ="text/javascript" > ...
//绑定City
function BindToCity(ProvinceID,DDL_City_ID)
...{
var DataSet_City = _Default.BindToCity(ProvinceID).value;//注意加Value
var DDL_City = document.getElementById(DDL_City_ID);
DDL_City.length = 0;//清除已有选项
var Length = DataSet_City.Tables[0].Rows.length;
if(Length!="0")
...{
for(var i=0;i<Length;i++)
...{
var Text = DataSet_City.Tables[0].Rows[i].Text;//必须和DataSet的列名一致
var Value = DataSet_City.Tables[0].Rows[i].Value;
DDL_City.options.add(new Option(Text,Value));
}
}
else
...{
var DDL_Area = document.getElementById("Area");
DDL_Area.length = 0;
}
}
//绑定Area
function BindToArea(CityID,DDL_Area_ID)
...{
var DataSet_Area = _Default.BindToArea(CityID).value;
var DDL_Area = document.getElementById(DDL_Area_ID);
DDL_Area.length = 0;
var Length = DataSet_Area.Tables[0].Rows.length;
for(var i=0;i<Length;i++)
...{
var Text = DataSet_Area.Tables[0].Rows[i].Text;
var Value = DataSet_Area.Tables[0].Rows[i].Value;
DDL_Area.options.add(new Option(Text,Value));
}
}
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div > 请选择您所在的省:
< asp:DropDownList ID ="Province" runat ="server" >
</ asp:DropDownList >
请选择您所在的市:
< asp:DropDownList ID ="City" runat ="server" >
</ asp:DropDownList >
请选择您所在的区:
< asp:DropDownList ID ="Area" runat ="server" >
</ asp:DropDownList >
</ div >
</ form >
</ body >
</ html >
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > 无标题页 </ title >
< script language ="javascript" type ="text/javascript" > ...
//绑定City
function BindToCity(ProvinceID,DDL_City_ID)
...{
var DataSet_City = _Default.BindToCity(ProvinceID).value;//注意加Value
var DDL_City = document.getElementById(DDL_City_ID);
DDL_City.length = 0;//清除已有选项
var Length = DataSet_City.Tables[0].Rows.length;
if(Length!="0")
...{
for(var i=0;i<Length;i++)
...{
var Text = DataSet_City.Tables[0].Rows[i].Text;//必须和DataSet的列名一致
var Value = DataSet_City.Tables[0].Rows[i].Value;
DDL_City.options.add(new Option(Text,Value));
}
}
else
...{
var DDL_Area = document.getElementById("Area");
DDL_Area.length = 0;
}
}
//绑定Area
function BindToArea(CityID,DDL_Area_ID)
...{
var DataSet_Area = _Default.BindToArea(CityID).value;
var DDL_Area = document.getElementById(DDL_Area_ID);
DDL_Area.length = 0;
var Length = DataSet_Area.Tables[0].Rows.length;
for(var i=0;i<Length;i++)
...{
var Text = DataSet_Area.Tables[0].Rows[i].Text;
var Value = DataSet_Area.Tables[0].Rows[i].Value;
DDL_Area.options.add(new Option(Text,Value));
}
}
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div > 请选择您所在的省:
< asp:DropDownList ID ="Province" runat ="server" >
</ asp:DropDownList >
请选择您所在的市:
< asp:DropDownList ID ="City" runat ="server" >
</ asp:DropDownList >
请选择您所在的区:
< asp:DropDownList ID ="Area" runat ="server" >
</ asp:DropDownList >
</ div >
</ form >
</ body >
</ html >
以下是该页面的cs页面:
using
System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
... {
protected void Page_Load(object sender, EventArgs e)
...{
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
this.BindToDDL();
}
//获得DataSet方法
private DataSet GetDS(string SqlString)
...{
SqlConnection con = new SqlConnection("server=.;database=ProvinceCityArea;uid=sa;pwd=;");
SqlDataAdapter sda = new SqlDataAdapter();
sda.SelectCommand = new SqlCommand(SqlString, con);
DataSet ds = new DataSet();
sda.Fill(ds);
con.Close();
con.Dispose();
sda.Dispose();
return ds;
}
//绑定Province,并添加事件。
private void BindToDDL()
...{
string SQLSelect_Province = @"select * from province";
this.Province.DataSource = GetDS(SQLSelect_Province);
this.Province.DataTextField = "province";
this.Province.DataValueField = "provinceID";
this.Province.DataBind();
this.Province.Items.Insert(0, "请选择");
this.Province.Attributes.Add("onchange", "BindToCity(this.options[selectedIndex].value,'City');");
this.City.Attributes.Add("onchange", "BindToArea(this.options[selectedIndex].value,'Area');");
}
//根据省ID查询相应的城市
[AjaxPro.AjaxMethod]
public DataSet BindToCity(string ProvinceID)
...{
string SQLSelect_City = @"select city as Text,cityID as Value from city where father='" + ProvinceID + "'";
return GetDS(SQLSelect_City);
}
//根据城市ID查询相应的区域
[AjaxPro.AjaxMethod]
public DataSet BindToArea(string CityID)
...{
string SQLSelect_Area = @"select area as Text,areaID as Value from area where father='"+CityID+"'";
return GetDS(SQLSelect_Area);
}
}
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
... {
protected void Page_Load(object sender, EventArgs e)
...{
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
this.BindToDDL();
}
//获得DataSet方法
private DataSet GetDS(string SqlString)
...{
SqlConnection con = new SqlConnection("server=.;database=ProvinceCityArea;uid=sa;pwd=;");
SqlDataAdapter sda = new SqlDataAdapter();
sda.SelectCommand = new SqlCommand(SqlString, con);
DataSet ds = new DataSet();
sda.Fill(ds);
con.Close();
con.Dispose();
sda.Dispose();
return ds;
}
//绑定Province,并添加事件。
private void BindToDDL()
...{
string SQLSelect_Province = @"select * from province";
this.Province.DataSource = GetDS(SQLSelect_Province);
this.Province.DataTextField = "province";
this.Province.DataValueField = "provinceID";
this.Province.DataBind();
this.Province.Items.Insert(0, "请选择");
this.Province.Attributes.Add("onchange", "BindToCity(this.options[selectedIndex].value,'City');");
this.City.Attributes.Add("onchange", "BindToArea(this.options[selectedIndex].value,'Area');");
}
//根据省ID查询相应的城市
[AjaxPro.AjaxMethod]
public DataSet BindToCity(string ProvinceID)
...{
string SQLSelect_City = @"select city as Text,cityID as Value from city where father='" + ProvinceID + "'";
return GetDS(SQLSelect_City);
}
//根据城市ID查询相应的区域
[AjaxPro.AjaxMethod]
public DataSet BindToArea(string CityID)
...{
string SQLSelect_Area = @"select area as Text,areaID as Value from area where father='"+CityID+"'";
return GetDS(SQLSelect_Area);
}
}