基於AJAX技術的DataGrid控制項編程

簡介

在傳統的Web開發中，每次DataGrid控制項填充或更新都相應於一次到伺服器的資料回饋。但是，藉助於AJAX技術，我們可以在不進行表單提交重新整理）的情況下即可以填充DataGrid控制項。

在本文中，我們通過一個簡單樣本並藉助於一個DropDownList控制項的協助來討論如何達到這一目的。在這個例子中，我們使用了一個DropDownList控制項；一旦改變DropDownList的值，它即用相應的城市名來填充DataGrid控制項，在此過程中我們巧妙了引入了AJAX技術。

既然我們已經瞭解一些AJAX的基本知識，現在讓我們進一步討論這個DataGrid樣本程式。在本例中，我們主要解釋如何從用戶端發送請求，如何處理請求，以及如何運行用戶端指令碼來顯示DataGrid中的資料。

應用程式範例結構

在本例中，我們共建立了兩個Web表單AjaxServer.aspx和DataGridEx.aspx），一個JavaScript檔案和一個層疊式樣表檔案css）。檔案AjaxServer.aspx負責伺服器端功能一旦選擇即返回作者結果），而檔案DataGridEx.aspx負責使用AJAX技術顯示返回的結果。下面讓我們作進一步分析。

1. AjaxServer.aspx

這個頁面以選擇的“City”作為請求。它取回所有的屬於該城市的作者並且把一個XML響應字串返回到用戶端見列表1）。

列表1—AjaxSever.aspx.vb代碼

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load If Not IsPostBack Then choice = Request("Choice") If choice.Length > 0 Then Response.Clear() If choice = "All Cities" Then DA = New SqlDataAdapter("select * from authors", con) Else DA = New SqlDataAdapter("select * from authors where city ='" & Request("Choice") & "'", con) End If DA.Fill(ds) chString = ds.GetXml() Response.Clear() Response.ContentType = "text/xml" Response.Write(chString) Response.End() Else Response.Clear() Response.End() End If Else Response.Clear() Response.End() End If End Sub

2. DataGridEx.aspx

這個頁面開始把所有的作者資訊顯示在DataGrid中。每當DropDownList中發生變化，它使用JavaScript檔案取回內容並預以顯示。注意：為了顯示當前正啟動並執行進程的狀況，我們在此使用了一個面板。該面板具有一個GIF映像開始不可見）—在處理髮生於伺服器端時它被顯示，而一旦處理結束即變為不可見的見圖1）。我們這樣做的根本目的就是為了讓使用者詳細瞭解當前正啟動並執行進程情況。

圖1.DatagridEx.aspx的快照為了顯示進程）

3.JavaScript檔案

這個檔案負責整個進程的處理請求和響應。這個檔案將產生XMLHttpRequest並且把選擇的城市發送到AjaxServer.aspx頁面。一旦返回，它得到一個類似於資料庫表的輸出結果—該結果將被填充到DataGrid中。
一開始，面板中的“進程”映像是不可見的。當DropDownList選擇發生變化時，“進程”映像就顯示出來，直到用返回的結果填充DataGrid為止見列表2）。該DataGrid被返回的資料填充—通過使用一個簡單的for迴圈來讀取返回的內容見列表3）。

列表2—進程狀態

function FetchDGContents(){ var selecteditem = document.Form1.ddlcity.value; imgtbl.style.visibility = 'visible'; var requestUrl = AjaxServerPageName + "?Choice=" + encodeURIComponent(selecteditem); CreateXmlReq(); if(XmlReq){ XmlReq.onreadystatechange = HandleResponse; XmlReq.open("GET", requestUrl, true); XmlReq.send(); } }

列表3—使用收到的響應資料填充DataGrid控制項

function FillTable(scity){ var auth = scity.getElementsByTagName('Authors'); var tbl = document.getElementById('dgauthors').getElementsByTagName("tbody")[0]; for(var i=0;i{ var row = document.createElement("TR"); row.setAttribute("className","text"); row.setAttribute("bgColor","#ECECEC"); for(var j=0;j{ var cell = document.createElement("TD"); cell.innerHTML = auth.context.childNodes(i).childNodes(j).text; row.appendChild(cell); } tbl.appendChild(row) } }

運行範例程式碼

你可以下載本文相應的樣本源碼進行分析。首先，建立一個命名為MyAjax的虛擬目錄，然後把解壓後的檔案複製到該目錄下即可。最後，開啟Visual Studio.NET方案總管並按F5鍵運行程式，並觀察結果。

總結

本文通過一個簡單的例子—使用AJAX技術操作DataGrid控制項—來顯示伺服器調用的處理狀態。這是把AJAX技術應用於.NET平台Web開發的又一簡單樣本。

(