一个同学写的Ajax三级联动的DEMO
效果如下：
后台代码：
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.IO;
using System.Text;
namespace AjaxDropDownList.WebUI
{
/// <summary>
///
/// </summary>
public class _Default : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DropDownList ddlDistrict;
public static string DistrictSTR;
public static string StateSTR;
public static string CitySTR;
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
Ajax.Utility.RegisterTypeForAjax(typeof(_Default));
if(!this.IsPostBack)
{
DistrictSTR=Server.MapPath("Addr_District.xml");
StateSTR=Server.MapPath("Addr_State.xml");
CitySTR=Server.MapPath("Addr_City.xml");
initDistrict();
}
}
//地区
public void initDistrict()
{
DataSet ds=new DataSet();
ds.ReadXml(DistrictSTR);
this.ddlDistrict.DataSource=ds;
this.ddlDistrict.DataTextField="DistrictName";
this.ddlDistrict.DataValueField="DistrictCode";
this.ddlDistrict.DataBind();
this.ddlDistrict.Attributes.Add("onchange","StateResult()");
}
//省份
[Ajax.AjaxMethod()]
public string getState(string districtCode)
{
DropDownList ddlState=new DropDownList();
DataSet ds=new DataSet();
ds.ReadXml(StateSTR);
ddlState.DataSource=ds.Tables[0].DefaultView;
ds.Tables[0].DefaultView.RowFilter="StateCode like '"+districtCode+"%'";
ddlState.DataTextField="StateName";
ddlState.DataValueField="StateCode";
ddlState.DataBind();
ddlState.Width=120;
ddlState.Attributes.Add("onchange","CityResult()");
StringBuilder strb=new StringBuilder();
StringWriter sw=new StringWriter(strb);
HtmlTextWriter htw=new HtmlTextWriter(sw);
ddlState.RenderControl(htw);
return strb.ToString();
}
//城市
[Ajax.AjaxMethod()]
public string getCity(string stateCode)
{
DropDownList ddlCity=new DropDownList();
DataSet ds=new DataSet();
ds.ReadXml(CitySTR);
ddlCity.DataSource=ds.Tables[0].DefaultView;
ds.Tables[0].DefaultView.RowFilter="CityCode like'"+stateCode+"%'";
ddlCity.DataTextField="CityName";
ddlCity.DataValueField="CityCode";
ddlCity.DataBind();
ddlCity.Width=120;
StringBuilder strb=new StringBuilder();
StringWriter sw=new StringWriter(strb);
HtmlTextWriter htw=new HtmlTextWriter(sw);
ddlCity.RenderControl(htw);
return strb.ToString();
}
//DataGrid
[Ajax.AjaxMethod()]
public string getDataGrid(string stateCode)
{
DataGrid dg=new DataGrid();
DataSet ds=new DataSet();
ds.ReadXml(CitySTR);
dg.DataSource=ds.Tables[0].DefaultView;
ds.Tables[0].DefaultView.RowFilter="CityCode like '"+stateCode+"%'";
dg.DataBind();
dg.HeaderStyle.ForeColor=System.Drawing.Color.White;
dg.HeaderStyle.Font.Bold=true;
dg.HeaderStyle.BackColor=System.Drawing.Color.FromName("yellow");//highlight
dg.HeaderStyle.Height=20;
dg.CellPadding=3;
StringBuilder strb=new StringBuilder();
StringWriter sw=new StringWriter(strb);
HtmlTextWriter htw=new HtmlTextWriter(sw);
dg.RenderControl(htw);
return strb.ToString();
}
#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
前台代码：
<%@ Page language="c#" Codebehind="Default.aspx.cs" AutoEventWireup="false" Inherits="AjaxDropDownList.WebUI._Default" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Default</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<script language="javascript">
<!--
function StateResult()
{
var districtCode=document.getElementById("ddlDistrict").value;
var State=document.getElementById("stateTD");
State.innerHTML=_Default.getState(districtCode).value;
CityResult();
}
function CityResult()
{
var obj=document.getElementById("stateTD");
var stateCode=obj.getElementsByTagName("select")[0].value;
var City=document.getElementById("cityTD");
City.innerHTML=_Default.getCity(stateCode).value;
var dataGrid=document.getElementById("ucTD");
dataGrid.innerHTML=_Default.getDataGrid(stateCode).value;
}
-->
</script>
<style type="text/css">
TD { FONT-SIZE: 13px }
</style>
</HEAD>
<body onload="StateResult()">
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" cellSpacing="0" cellPadding="2" width="500" border="0">
<TR>
<TD style="WIDTH: 120px; HEIGHT: 20px">
<P align="right">地区</P>
</TD>
<TD style="HEIGHT: 20px">
<asp:dropdownlist id="ddlDistrict" runat="server" Width="120px"></asp:dropdownlist></TD>
</TR>
<TR>
<TD style="WIDTH: 120px; HEIGHT: 25px">
<P align="right">省份</P>
</TD>
<TD id="stateTD" style="HEIGHT: 25px"><FONT face="宋体"></FONT></TD>
</TR>
<TR>
<TD style="WIDTH: 120px; HEIGHT: 26px">
<P align="right">城市</P>
</TD>
<TD id="cityTD" style="HEIGHT: 26px"><FONT face="宋体"></FONT></TD>
</TR>
<TR>
<TD style="WIDTH: 120px"></TD>
<TD id="ucTD"><FONT face="宋体"></FONT></TD>
</TR>
</TABLE>
</form>
</body>
</HTML>
这里是读取XML数据的，想自己试一下的朋友，请这里下载XML 放到同级文件夹里即可！