用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])

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1340455