基于Ajax的无刷新三级联动

 经常看到有人做“无刷新三级联动”，自己刚开始学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 >

以下是该页面的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);
    }
}