利用JQuery+Ajax實現aspx頁面無重新整理的動態資料繫結
好長的名字啊！自己看得都覺得累了……廢話到此為止，開始正文：
我們在寫asp.net網頁的時候，會用到很多需要資料繫結的控制元件。Asp.net提供了資料繫結這一特性，確實方便了很多。但是這樣的繫結都是在伺服器端完成的，而我們有時會希望根據使用者的選擇來動態的更新其它一些控制元件的資料內容。例如用兩個DropDownList來讓使用者選擇所在的城市，一個繫結“省”一級的資料，如“浙江”、“吉林”等，另一個繫結使用者選擇的“省”下面的城市。要實現這樣一個動態的資料繫結其實不難，可以把前一個DropDownList的autopostback屬性設成true，然後在事件裡繫結後一個DropDownList
Ajax的應用十分廣泛，這裡僅僅介紹利用JQuery來實現非同步資料更新的方法。jQuery 是一個JavaScript 庫，它有助於簡化 JavaScript™以及 Asynchronous JavaScript + XML (Ajax) 程式設計。在JQuery中有一個Ajax的呼叫方法：
$.ajax({
type: "POST",
url: window.location.protocol + "//" + window.location.host + “a.aspx”,
data: postdata,
complete: function(msg){
ShowResult(msg.responseText);
} ,
dataType : "html"
});
這裡的url是目標頁面，通常我們會專門處理這些Ajax請求，單獨寫一個頁面，這裡假定為ajax.aspx。data是你要post給目標頁面的資料，例如“do=getcity&province=100”。Complete裡的那個function：ShowResult(msg.responseText);是用來處理Ajax的返回結果的，結果會以html的形式儲存在引數msg.responseText裡。
瞭解了這個
接下來要怎麼做也許你已經想到了，對了，我們要用的就是“狸貓換太子”的手段。前面呼叫ajax方法的時候，不是還有一個ShowResult的方法嗎？那個方法在獲得了我們ajax頁面的返回結果。我們知道，DropDownList最終生成的<select>空間，所以我們把返回結果裡從“<select>”到“</select>”之間的部分提取出來，替換到那個id=city的div的innerHTML裡，覆蓋原來佔位的那個DropDownList。於是，我們的動態資料繫結就完成了。
不知道你聽明白了沒有，下面給出文中提到的各個檔案的原始碼，如果你沒有看明白，就自己捉摸捉摸吧^_^
Ajax.js
function GetCity(provinceID)
{
$.ajax({
type: "POST",
url: window.location.protocol + "//" + window.location.host + "/Ajax.aspx",
data:"do=GetCity&ProvinceID=" + provinceID,
complete: function(msg){
ShowCity(msg.responseText);
} ,
dataType : "html"
});
}
function ShowCity(strCode)
{
var obj = document.getElementByid("City");
var start = strCode.indexOf("<select");
var end = strCode.indexOf("</select>") + 9;
var strHtml = strCode.substring(start,end);
if (obj!=null)
{
obj.innerHTML = strHtml;
}
}
Selectcity.aspx
<%@ Page language="c#" Codebehind="Selectcity.aspx.cs" AutoEventWireup="false" Inherits="Selectcity" %>
<html>
<head>
<title>Selectcity</title>
<script language="JavaScript" src="/Ajax.js" type="text/javascript"></script>
<script language="JavaScript" src="/jQuery.js" type="text/javascript"></script>
</head>
<body topmargin="0" marginwidth="0" marginheight="0">
<form id="Form1" method="post" runat="server">
<asp:DropDownList ID="province" runat="server"></asp:DropDownList>
<div id="city">
<asp:DropDownList ID="oldcity" runat="server"></asp:DropDownList>
</div>
</form>
</body>
</html>
Selectcity.aspx.cs
這個就不給了，隨便給那個ID= province的DropDownList繫結點資料即可。
ajax.aspx
<%@ Page language="c#" Codebehind="Ajax.aspx.cs" AutoEventWireup="false" Inherits="Selectcity" %>
<html>
<head>
<title>Selectcity</title>
<script language="JavaScript" src="/Ajax.js" type="text/javascript"></script>
<script language="JavaScript" src="/jQuery.js" type="text/javascript"></script>
</head>
<body topmargin="0" marginwidth="0" marginheight="0">
<form id="Form1" method="post" runat="server">
<asp:DropDownList ID="city" runat="server"></asp:DropDownList>
</form>
</body>
</html>
Ajax.aspx.cs（只列出關鍵程式碼，其它的省略）
protected void Page_Load(object sender, EventArgs e)
{
string strAction = Request.Form["do"] + String.Empty;
switch (strAction)
{
case "GetCity":
GetCity();
break;
}
}
protected void GetCity()
{
string strProvinceID = Request.Form["ProvinceID"] ?? String.Empty;
if (!String.IsNullOrEmpty(strProvinceID))
{
List<City> CityList = /*你要繫結的資料*/;
this.City.DataTextField = "CityName";//這裡的city就是前面aspx的DropDownList
this.City.DataValueField = "CityID";
this.City.DataSource = CityList;
this.City.DataBind();
}
}