基于AJAX技术的DataGrid控件编程
2006-09-02 20:25
190 查看
【导读】在本文中,我们使用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 |
这个页面开始把所有的作者信息显示在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(); } } |
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开发的又一简单示例。
相关文章推荐
- 实现基于Spring技术应用的远程服务编程
- 基于AJAX.NET技术的DataGrid控件开发
- asp.net教程:ASP.NET MVC框架内置AJAX支持编程技术
- 基于Ajax技术实现的数据表格控件
- 基于Ajax技术实现的树形导航组件
- 基于Corba技术使用java与C++混合编程
- Dynamics CRM 2011 编程系列(30):使用ASP.NET Ajax技术的自定义页面
- SparkWeb-基于Web ajax技术的XMPP客户端
- SparkWeb-基于Web ajax技术的XMPP客户端
- 基于Ajax技术的简易进度条的实现
- Notes Web编程运用ajax技术(Page)
- 通达OA 开发基于AJAX技术数据列表控件的智能表单(图文)
- 带着镣铐的舞者(从用户体验与编程模型两方面看AJAX与B/S 技术)
- 带着镣铐的舞者(从用户体验与编程模型两方面看AJAX与B/S 技术)
- 基于ASP.NET Webapi和ajax技术且兼容Chrome、Firefox和IE浏览器的Excel文件下载方法
- 基于ajax技术的单一数据源的数据关联的设计与实现
- 基于JSON的高级AJAX开发技术
- 基于 AJAX和Webservice 的长轮询(long-polling)方式ServerPush技术试验
- 基于dwr框架的Ajax技术的使用
- 基于AJAX技术的WebGis系统实践 (4. 三维城市地图系统功能概述)