基于AJAX技术的DataGrid控件编程

 

【导读】在本文中，我们使用AJAX技术来实现填充网页中的DataGrid控件。为此，我们使用了一个DropDownList控件作为DataGrid控件的数据源。每当DropDownList的选择发生改变，该DataGrid控件的内容将基于AJAX技术进行相应的刷新。

 

简介

在传统的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）。我们这样做的根本目的就是为了让用户详细了解当前正运行的进程情况。

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