开发环境:Windows Server 2003、.Net Framework 2.0
测试环境:IE6.0、IE7.0、Firefox、

原理简介:如上图,两个下拉列表控件DropDownList1代表省,DropDownList2代表城市,当DropDownList1发生变化时DropDownList2产生联动,这里使用AJAX技术来实现无刷新联动效果,过程如下:
1、当DropDownList1的值发生变更时会向一页面文件Output.aspx发送GET请求,将当前选中省份的ID传送过去。
2、Output.aspx收到ID,并根据该省份ID从数据库中查询出属于该省份的所有城市列表,以XML方式将数据返回给页面。
3、页面接收到城市数据,重新构造DropDownList2。
OK,原理非常简单,为方便大家便于理解,我在代码中作了详细注释:
Output.aspx与Output.aspx.cs:
建好该页面后可以后工输入参数测试一下XML输出,比如我的项目中山西省的ID为10:

包含DropDownList的主页面:
测试环境:IE6.0、IE7.0、Firefox、

原理简介:如上图,两个下拉列表控件DropDownList1代表省,DropDownList2代表城市,当DropDownList1发生变化时DropDownList2产生联动,这里使用AJAX技术来实现无刷新联动效果,过程如下:
1、当DropDownList1的值发生变更时会向一页面文件Output.aspx发送GET请求,将当前选中省份的ID传送过去。
2、Output.aspx收到ID,并根据该省份ID从数据库中查询出属于该省份的所有城市列表,以XML方式将数据返回给页面。
3、页面接收到城市数据,重新构造DropDownList2。
OK,原理非常简单,为方便大家便于理解,我在代码中作了详细注释:
Output.aspx与Output.aspx.cs:
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;
public partial class Service_ZoneXml : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["ZoneId"] != null)
{
//根据zone_id获取城市列表,以DataTable方式存放。(此处代码根据各自情况编写)
PaoTiao.IDAL.IAdmin myAdmin = new PaoTiao.DAL.Admin();
DataTable dt = this.myAdmin.ZoneList(int.Parse(Request.QueryString["ZoneId"]));
if (dt.Rows.Count > 0)
{
//构造xml
StringBuilder sb = new StringBuilder();
sb.Append("<?xml version='1.0' encoding='utf-8' ?>");
sb.Append("<zoneList>");
for (int i = 0; i < dt.Rows.Count; i++)
{
sb.Append("<zone id='" + dt.Rows[i]["zone_id"].ToString() + "' name='" + dt.Rows[i]["zone_name"] + "' />");
}
sb.Append("</zoneList>");
//输出xml
Response.Clear();
Response.ContentType = "text/xml";
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.Write(sb.ToString());
Response.End();
}
}
}
}
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;
public partial class Service_ZoneXml : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["ZoneId"] != null)
{
//根据zone_id获取城市列表,以DataTable方式存放。(此处代码根据各自情况编写)
PaoTiao.IDAL.IAdmin myAdmin = new PaoTiao.DAL.Admin();
DataTable dt = this.myAdmin.ZoneList(int.Parse(Request.QueryString["ZoneId"]));
if (dt.Rows.Count > 0)
{
//构造xml
StringBuilder sb = new StringBuilder();
sb.Append("<?xml version='1.0' encoding='utf-8' ?>");
sb.Append("<zoneList>");
for (int i = 0; i < dt.Rows.Count; i++)
{
sb.Append("<zone id='" + dt.Rows[i]["zone_id"].ToString() + "' name='" + dt.Rows[i]["zone_name"] + "' />");
}
sb.Append("</zoneList>");
//输出xml
Response.Clear();
Response.ContentType = "text/xml";
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.Write(sb.ToString());
Response.End();
}
}
}
}
建好该页面后可以后工输入参数测试一下XML输出,比如我的项目中山西省的ID为10:

包含DropDownList的主页面:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--
//定义一个全局的xmlhttprequest对象
var http_request;
//创建xmlhttprequest对象函数
function createXMLHttpRequest()
{
//针对IE浏览器
if (window.ActiveXObject)
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
//针对非IE浏览器
else if(window.XMLHttpRequest)
{
http_request = new XMLHttpRequest();
}
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
}
}
//定义一个生成随机数的函数,辅助AJAX以防止IE缓存产生的数据重复
function getRandom()
{
var result = new Date();
return result.getTime();
}
//主要实现
function sendZoneId()
{
//创建xmlhttprequest对象
createXMLHttpRequest();
//指定接收服务器响应的函数
http_request.onreadystatechange = function getZoneXml()
{
if(http_request.readyState == 4)
{
if(http_request.status == 200)
{
//获取xml
var xmlDoc = http_request.responseXML;
//如果xml不为空
if(xmlDoc != null)
{
//找到待变更的城市控件
var dropZone2 = document.getElementById("dropZone2");
//清空
dropZone2.length = 0;
//获取xml根节点
var xmlRoot = xmlDoc.documentElement;
//遍历根节点
for(var i = 0; i < xmlRoot.childNodes.length; i++)
{
//添加项
var itemOption = new Option(xmlRoot.childNodes[i].getAttribute("name"), xmlRoot.childNodes[i].getAttribute("id"));
dropZone2.options.add(itemOption);
}
}
}
}
};
//异步方式发送GET请求
http_request.open('GET', '/Service/ZoneXml.aspx?ZoneId='+document.getElementById("dropZone1").value+'&Random='+getRandom(), true);
http_request.send(null);
}
//-->
</script>
</head>
<body>
<form id="form1" runat="server">
<!--注:本文基于.net 2.0 示例,DropDownList初始化过程省略;如为其它开发环境,请更改相应的服务端代码-->
<!--省分,客户端触发onchange事件时调用sendZoneId()函数-->
<asp:DropDownList runat="server" id="dropZone1" onchange="sendZoneId();"></asp:DropDownList>
<!--城市-->
<asp:DropDownList runat="server" id="dropZone2"></asp:DropDownList>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--
//定义一个全局的xmlhttprequest对象
var http_request;
//创建xmlhttprequest对象函数
function createXMLHttpRequest()
{
//针对IE浏览器
if (window.ActiveXObject)
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
//针对非IE浏览器
else if(window.XMLHttpRequest)
{
http_request = new XMLHttpRequest();
}
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
}
}
//定义一个生成随机数的函数,辅助AJAX以防止IE缓存产生的数据重复
function getRandom()
{
var result = new Date();
return result.getTime();
}
//主要实现
function sendZoneId()
{
//创建xmlhttprequest对象
createXMLHttpRequest();
//指定接收服务器响应的函数
http_request.onreadystatechange = function getZoneXml()
{
if(http_request.readyState == 4)
{
if(http_request.status == 200)
{
//获取xml
var xmlDoc = http_request.responseXML;
//如果xml不为空
if(xmlDoc != null)
{
//找到待变更的城市控件
var dropZone2 = document.getElementById("dropZone2");
//清空
dropZone2.length = 0;
//获取xml根节点
var xmlRoot = xmlDoc.documentElement;
//遍历根节点
for(var i = 0; i < xmlRoot.childNodes.length; i++)
{
//添加项
var itemOption = new Option(xmlRoot.childNodes[i].getAttribute("name"), xmlRoot.childNodes[i].getAttribute("id"));
dropZone2.options.add(itemOption);
}
}
}
}
};
//异步方式发送GET请求
http_request.open('GET', '/Service/ZoneXml.aspx?ZoneId='+document.getElementById("dropZone1").value+'&Random='+getRandom(), true);
http_request.send(null);
}
//-->
</script>
</head>
<body>
<form id="form1" runat="server">
<!--注:本文基于.net 2.0 示例,DropDownList初始化过程省略;如为其它开发环境,请更改相应的服务端代码-->
<!--省分,客户端触发onchange事件时调用sendZoneId()函数-->
<asp:DropDownList runat="server" id="dropZone1" onchange="sendZoneId();"></asp:DropDownList>
<!--城市-->
<asp:DropDownList runat="server" id="dropZone2"></asp:DropDownList>
</form>
</body>
</html>