在網站註冊的頁面上經常要選擇註冊地點，如果改變省的名稱就能出現對應的市級的名稱，將爲用戶帶來很大的方便，雖然用.NET的服務端時間實現很容易，不過選一下刷新頁面的操作，用戶體驗實在不怎麼樣，現在給大家送上AJAX實現的三級聯動
代碼有點多，但是實際的項目過程中，我們必須這麼做
應要求，先給大家一個代碼下載地址.DropDownList控件實現省市聯動(AJAX實現） 。放心，偶得資源不要積分
首先在頁面上初始化省的數據，添加onchange的js事件。。在用戶改變地區選擇的時候，調用JS函數（通過AJAX）調用後臺C#代碼，C#通過查詢數據庫，返回數據，並生成HTML，傳給客戶端，客戶端在拿到HTML，放到相應的位置，即可。
jquery的ajax是異步的，這樣不會阻塞瀏覽器，也不用刷新頁面。
減少了網絡開銷也降低了服務器壓力，最重要的是用戶體驗更好了。
首先，建立數據庫，SQL如下：
create database zone
go
use zone
go
create table zone
(
id int primary key identity(1,1),
name varchar(30),
iid int
)
/*iid int references zone(id)*/然後，建立一個WebApplication的工程。
引入jquery.js。。新建3個文件Service.cs（數據庫訪問）、LinkageAjax.ashx（響應AJAX請求）、Default.aspx（聯動頁面）。如下圖所示：
首先，編寫Service.cs（數據庫訪問）代碼：
using System.Data;
using System.Data.SqlClient;
namespace Test_Ajax.Linkage
{
public class Service
{
private const string conStr = "server = .;database = zone;uid = sa; pwd = 3717";
public DataTable GetZoneInfo(int fatherID)
{
using (SqlConnection con = new SqlConnection(conStr))
{
string sql = "select * from zone(nolock) where iid = " + fatherID;
SqlDataAdapter adp = new SqlDataAdapter(sql, con);
DataTable dt = new DataTable();
adp.Fill(dt);
con.Close();
return dt;
}
}
}
}
然後是Default.aspx（聯動頁面）代碼。
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Test_Ajax.Linkage.Default" %>
<!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 src="../JS/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function GetZoneInfo(zoneID, level) {
$.ajax({
type: "POST",
url: "LinkageAjax.ashx?type=GetZoneInfo" + "&zoneID=" + zoneID + "&level=" + level + "&random=" + Math.random(),
data: "",
beforeSend: function() { },
success: function(msg) {
switch (level) {
case 1:
$("#span_City").html(msg);
break;
case 2:
$("#span_County").html(msg);
break;
default:
break;
}
},
error: function() { alert("網絡繁忙，請稍後再試。"); },
complete: function() { }
});
}
function ChangeSlect(zoneID, name) {
if (zoneID == "0") return;
switch (name) {
case "<%=Drop_Province.ClientID%>":
GetZoneInfo(zoneID, 1);
break;
case "Drop_City":
GetZoneInfo(zoneID, 2);
break;
default:
break;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span id="span_Province">
<asp:DropDownList ID="Drop_Province" runat="server"
οnchange="ChangeSlect(this.options[this.selectedIndex].value,this.name)"
ondatabound="Drop_Province_DataBound">
</asp:DropDownList>省
</span>
<span id="span_City"></span>
<span id="span_County"></span>
</div>
</form>
</body>
</html>
Default.aspx.cs
using System;
using System.Web.UI.WebControls;
using System.Data;
namespace Test_Ajax.Linkage
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Service ser = new Service();
DataTable dt = ser.GetZoneInfo(0);
Drop_Province.DataSource = dt;
Drop_Province.DataTextField = "name";
Drop_Province.DataValueField = "id";
Drop_Province.DataBind();
}
}
protected void Drop_Province_DataBound(object sender, EventArgs e)
{
Drop_Province.Items.Insert(0,new ListItem("未選擇", "0"));
Drop_Province.SelectedValue = "0";
}
}
}
最後是LinkageAjax.ashx（響應AJAX請求）的代碼：
using System;
using System.Data;
using System.Web;
using System.Web.Services;
using System.Text;
namespace Test_Ajax.Linkage
{
/// <summary>
/// $codebehindclassname$ 的摘要說明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class LinkageAjax : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
if (!string.IsNullOrEmpty(context.Request.QueryString["type"]))
{
switch (context.Request.QueryString["type"])
{
case "GetZoneInfo":
GetZoneInfo(context);
break;
default:
break;
}
}
}
public void GetZoneInfo(HttpContext context)
{
if (!string.IsNullOrEmpty(context.Request.QueryString["zoneID"])
&& !string.IsNullOrEmpty(context.Request.QueryString["level"]))
{
string controlName = "";
switch (context.Request.QueryString["level"])
{
case"1":
controlName = "Drop_City";
break;
case"2":
controlName = "Drop_County";
break;
default:
return;
}
Service ser = new Service();
DataTable dt = ser.GetZoneInfo(int.Parse(context.Request.QueryString["zoneID"]));
StringBuilder sb = new StringBuilder();
sb.Append(String.Format("<select name=\"{0}\" id=\"{1}\" οnchange=\"ChangeSlect(this.options[this.selectedIndex].value,this.name)\">", controlName, controlName));
sb.Append("<option value=\"0\">未選擇</option>");
foreach (DataRow row in dt.Rows)
{
sb.Append("<option value=\"");
sb.Append(row["id"].ToString());
sb.Append("\">");
sb.Append(row["name"].ToString());
sb.Append("</option>");
}
sb.Append("</select>");
context.Response.Write(sb.ToString());
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
最後，貼給大家一點數據的INSERT語句：
insert into zone (name,iid)
values('四川',0)
insert into zone (name,iid)
values('綿陽',1)
insert into zone (name,iid)
values('樂山',1)
insert into zone (name,iid)
values('雲南',0)
insert into zone (name,iid)
values('大理',4)
insert into zone (name,iid)
values('昆明',4)
insert into zone (name,iid)
values('上海',0)
insert into zone (name,iid)
values('夾江',3)
insert into zone (name,iid)
values('涪城',2)
insert into zone (name,iid)
values('廣州',0)
insert into zone (name,iid)
values('深圳',10)
insert into zone (name,iid)
values('廣東',10)
insert into zone (name,iid)
values('江蘇',0)
insert into zone (name,iid)
values('杭州',13)
insert into zone (name,iid)
values('無錫',13)
insert into zone (name,iid)
values('南京',13)
insert into zone (name,iid)
values('常州',13)