基于AJAX技术的DataGrid控件编程_[Asp.Net教程]

The author:(作者)delv
published in(发表于) 2014/1/6 9:11:52
基于AJAX技术的DataGrid控件编程_[Asp.Net教程]

　　在传统的Web开发中，每次DataGrid控件填充或更新都相应于一次到服务器的数据回馈。但是，借助于AJAX技术，我们可以在不进行表单提交（刷新）的情况下即可以填充DataGrid控件。

　　在本文中，我们通过一个简单示例并借助于一个DropDownList控件的帮助来讨论如何达到这一目的。在这个例子中，我们使用了一个DropDownList控件；一旦改变DropDownList的值，它即用相应的城市名来填充DataGrid控件，在此过程中我们巧妙了引入了AJAX技术。

　　既然我们已经了解一些AJAX的基本知识，现在让我们进一步讨论这个DataGrid示例程序。在本例中，我们主要解释如何从客户端发送请求，如何处理请求，以及如何运行客户端脚本来显示DataGrid中的数据。

　　在本例中，我们共建立了两个Web表单（AjaxServer.aspx和DataGridEx.aspx），一个JavaScript文件和一个层叠式样表文件（css）。文件AjaxServer.aspx负责服务器端功能（一旦选择即返回作者结果），而文件DataGridEx.aspx负责使用AJAX技术显示返回的结果。下面让我们作进一步分析。

　　这个页面以选择的“City”作为请求。它取回所有的属于该城市的作者并且把一个XML响应字符串返回到客户端（见列表1）。

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

　　这个页面开始把所有的作者信息显示在DataGrid中。每当DropDownList中发生变化，它使用JavaScript文件取回内容并预以显示。注意：为了显示当前正运行的进程的状况，我们在此使用了一个面板。该面板具有一个GIF图像（开始不可见）—在处理发生于服务器端时它被显示，而一旦处理结束即变为不可见的（见图1）。我们这样做的根本目的就是为了让用户详细了解当前正运行的进程情况。

　　这个文件负责整个进程的处理请求和响应。这个文件将生成XMLHttpRequest并且把选择的城市发送到AjaxServer.aspx页面。一旦返回，它得到一个类似于数据库表的输出结果—该结果将被填充到DataGrid中。

　　一开始，上图面板中的“进程”图像是不可见的。当DropDownList选择发生变化时，“进程”图像就显示出来，直到用返回的结果填充DataGrid为止（见列表2）。该DataGrid被返回的数据填充—通过使用一个简单的for循环来读取返回的内容（见列表3）。

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();

}

}

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开发的又一简单示例。