基于AJAX技術的DataGrid控件編程

2024-07-21 02:29:08

字體：大中小

來源：轉載

供稿：網友

菜鳥學堂：

　　簡介

　　在傳統的中，每次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)

}

}