用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");
}
}
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>
</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 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>
</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])
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])