用ajax 不用刷新页面就可实现国家,省,城市的三级联动

如果转帖的话，请注明来源谢谢．

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
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.Text;
using  GetCommand;

public   partial   class  Ajax_NationProvinceCity : System.Web.UI.Page
... {
    protected void Page_Load(object sender, EventArgs e)
    ...{
        if (!this.IsPostBack)
        ...{
            AjaxPro.Utility.RegisterTypeForAjax(typeof(Ajax_NationProvinceCity));

            this.ddlNationArea.Attributes.Add("onchange", "ddl_Province();");
            this.ddlProvince.Attributes.Add("onchange", "ddl_City();");
            this.BinderNationArea();
        }
    }
    [AjaxPro.AjaxMethod]
    public void BinderNationArea()
    ...{
        ddlNationArea.DataSource = SetConnection.getDataTable("SELECT NationAreaID,NationArea FROM NationArea order by NationArea desc");
        ddlNationArea.DataTextField = "NationArea";
        ddlNationArea.DataValueField = "NationAreaID";
        ddlNationArea.DataBind();
    }
    /**//// <summary>
    /// 帮定到某个DropDownList控件里去
    /// </summary>
    /// <param name="ds"></param>
    /// <param name="tableName"></param>
    /// <param name="idValue"></param>
    /// <param name="name"></param>
    /// <returns></returns>
    public string BinderDropDownList(DataSet ds, string tableName,string idValue,string name)
    ...{
        DataSet lookupData = ds;
        StringBuilder ids = new StringBuilder();
        StringBuilder names = new StringBuilder();
        int rowCount = 0;
        int numberRows = lookupData.Tables[tableName].Rows.Count;
        foreach (DataRow row in lookupData.Tables[tableName].Rows)
        ...{
            rowCount++;
            if (rowCount <= numberRows)
            ...{
                ids.Append(row[idValue].ToString());
                ids.Append("|");
                names.Append(row[name].ToString());
                names.Append("|");
            }
        }
        string returnData = string.Format("{0}~{1}", ids.ToString(), names.ToString());
        return returnData;
    }
    [AjaxPro.AjaxMethod]
    public string BinderProvince(string NationAreaID)
    ...{
        DataSet lookupData = SetConnection.getDataSet("SELECT ProvinceID,ProvinceName FROM Province WHERE NationAreaID='" + NationAreaID + "'", "Province");
        return BinderDropDownList(lookupData,"Province", "ProvinceID", "ProvinceName");
    }
    [AjaxPro.AjaxMethod]
    public string BinderCity(string ProvinceID)
    ...{
        DataSet lookupData = SetConnection.getDataSet("SELECT CityID,CityName FROM City WHERE ProvinceID = '" + ProvinceID + "'", "City");
        return BinderDropDownList(lookupData,"City", "CityID", "CityName");
    }
}

 -----------------------------

下面是javascript代码

function  ddl_Province() // 显示选择国家的省份或州来
... {
    var NationArea = document.getElementById("ddlNationArea");
    document.getElementById("ddlProvince").length = 0;
    var response = Ajax_NationProvinceCity.BinderProvince(NationArea.value);
    BinderDropDownList(response,1);
}
function  ddl_City() // 显示出选择省份或州的城市来
... {
    var Province = document.getElementById("ddlProvince");
    document.getElementById("ddlCity").length = 0;
    var response = Ajax_NationProvinceCity.BinderCity(Province.value);
    BinderDropDownList(response,2);
}
function  BinderDropDownList(response,number)
... {
    var idsAndNames = response.value.split("~");
    var ids = idsAndNames[0].split("|");
    var names = idsAndNames[1].split("|");
    var htmlCode;
    var ddl;
    if(number == 1)
    ...{
        ddl = document.getElementById("ddlProvince");
    }
    else
    ...{
        ddl = document.getElementById("ddlCity");
    }
    for (var i=0; i < ids.length-1; i++)
    ...{
        htmlCode = document.createElement('option');
        ddl.options.add(htmlCode);
        htmlCode.text = names[i];
        htmlCode.value = ids[i];
    }
}

－－－－－－－－－－－－－－－－－－－－－－
下面代码也就是HTML里的代码了,非常的简单

<% ... @ Page Language="C#" AutoEventWireup="true" CodeFile="NationProvinceCity.aspx.cs" Inherits="Ajax_NationProvinceCity"  %>

<! 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  type ="text/javascript"  language  = "javascript"  src ="../Scripts/NationAreaAndProvinceAndCity.js" > ...
     </ script >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
         < div >
             < table >
                 < tr >
                     < td  style ="width: 100px" >
                        国家 </ td >
                     < td  style ="width: 100px" >
                        省 </ td >
                     < td  style ="width: 100px" >
                        城市 </ td >
                 </ tr >
                 < tr >
                     < td  style ="width: 100px" >
                         < asp:DropDownList   ID ="ddlNationArea"  runat ="server" >
                         </ asp:DropDownList ></ td >
                     < td  style ="width: 100px" >
                         < asp:DropDownList  ID ="ddlProvince"  runat ="server" >
                         </ asp:DropDownList ></ td >
                     < td  style ="width: 100px" >
                         < asp:DropDownList  ID ="ddlCity"  runat ="server" >
                         </ asp:DropDownList ></ td >
                 </ tr >
             </ table >
         </ div >
     < div >
         < asp:Label  ID ="lblMessage"  runat ="server" ></ asp:Label > &nbsp;
     </ div >
     </ form >
</ body >
</ html >

－－－－－－－－－－－－－－－－－－－－－－－－－
数据表的，我这里这样写的，表好像设计的不好．

// 下面是一张国家表的结构
USE   [ People ]
GO
/**/ /****** 对象:  Table [dbo].[NationArea]    脚本日期: 10/19/2006 09:13:11 ******/
SET  ANSI_NULLS  ON
GO
SET  QUOTED_IDENTIFIER  ON
GO
CREATE   TABLE   [ dbo ] . [ NationArea ] (
     [ NationAreaID ]   [ int ]   NOT   NULL ,
     [ NationArea ]   [ nchar ] ( 40 ) COLLATE Chinese_PRC_CI_AS  NULL ,
     [ EnglishName ]   [ nchar ] ( 40 ) COLLATE Chinese_PRC_CI_AS  NULL ,
PRIMARY   KEY   CLUSTERED  
(
     [ NationAreaID ]   ASC
) WITH  (IGNORE_DUP_KEY  =   OFF )  ON   [ PRIMARY ]
)  ON   [ PRIMARY ]
// 下面是一张省份或州的结构
USE   [ People ]
GO
/**/ /****** 对象:  Table [dbo].[Province]    脚本日期: 10/19/2006 09:13:44 ******/
SET  ANSI_NULLS  ON
GO
SET  QUOTED_IDENTIFIER  ON
GO
CREATE   TABLE   [ dbo ] . [ Province ] (
     [ ProvinceID ]   [ int ]   IDENTITY ( 1 , 1 )  NOT   NULL ,
     [ NationAreaID ]   [ int ]   NULL ,
     [ ProvinceName ]   [ nvarchar ] ( 20 ) COLLATE Chinese_PRC_CI_AS  NULL ,
     [ EnglishName ]   [ nvarchar ] ( 50 ) COLLATE Chinese_PRC_CI_AS  NULL ,
  CONSTRAINT   [ PK__Province__060DEAE8 ]   PRIMARY   KEY   CLUSTERED  
(
     [ ProvinceID ]   ASC
) WITH  (IGNORE_DUP_KEY  =   OFF )  ON   [ PRIMARY ]
)  ON   [ PRIMARY ]

GO
USE   [ People ]
GO
ALTER   TABLE   [ dbo ] . [ Province ]    WITH   CHECK   ADD    CONSTRAINT   [ FK__Province__Nation__07020F21 ]   FOREIGN   KEY ( [ NationAreaID ] )
REFERENCES   [ dbo ] . [ NationArea ]  ( [ NationAreaID ] )
// 下面是一张城市表的结构
USE   [ People ]
GO
/**/ /****** 对象:  Table [dbo].[City]    脚本日期: 10/19/2006 09:14:02 ******/
SET  ANSI_NULLS  ON
GO
SET  QUOTED_IDENTIFIER  ON
GO
CREATE   TABLE   [ dbo ] . [ City ] (
     [ CityID ]   [ int ]   IDENTITY ( 1 , 1 )  NOT   NULL ,
     [ CityName ]   [ nchar ] ( 16 ) COLLATE Chinese_PRC_CI_AS  NULL ,
     [ ProvinceID ]   [ int ]   NULL ,
     [ PostCode ]   [ nchar ] ( 8 ) COLLATE Chinese_PRC_CI_AS  NULL ,
     [ BlockCode ]   [ nchar ] ( 7 ) COLLATE Chinese_PRC_CI_AS  NULL ,
     [ EnglishName ]   [ nvarchar ] ( 40 ) COLLATE Chinese_PRC_CI_AS  NULL ,
  CONSTRAINT   [ PK__City__0BC6C43E ]   PRIMARY   KEY   CLUSTERED  
(
     [ CityID ]   ASC
) WITH  (IGNORE_DUP_KEY  =   OFF )  ON   [ PRIMARY ]
)  ON   [ PRIMARY ]

GO
USE   [ People ]
GO
ALTER   TABLE   [ dbo ] . [ City ]    WITH   CHECK   ADD    CONSTRAINT   [ FK__City__ProvinceID__0CBAE877 ]   FOREIGN   KEY ( [ ProvinceID ] )
REFERENCES   [ dbo ] . [ Province ]  ( [ ProvinceID ] )