当前位置:首页 > 基于AJAX.NET技术的DataGrid控件开发

基于AJAX.NET技术的DataGrid控件开发

点击次数:1467  更新日期:2010-12-25
\n

摘要 本文中的这个DataGrid是一个客户端控件,它是使用JavaScript和Ajax.net技术构建的。

  一、 简介

  本文中要创建的这个DataGrid是一个客户端控件。它是使用JavaScript并且使用Ajax.net技术构建的以实现与ASP.NET后端代码的通讯;而在这个后端,我们使用ADO.NET存取数据库并使用Dataset更新数据库。
\n

  这个控件具有一个DataGrid应该具有的一切特征,并且具有在你建立连接串和表名后不需要编写任何代码就能够自动工作的所有功能。

  这个Datagrid支持如下功能:

  1. 页面。

  2. 排序。

  3. Master-Detail(Detail部分还支持页面和排序)。

  4. 基于给定的列条件可以定制行颜色。

  5. 编辑。

  6. 当没有页面支持时,没有头部滚动的滚动条支持。

  7. 支持控件(图像,文本框,超级链接,下拉列表框,复选框)。

  8. 自动分割头部名称。

  9. 针对十进制、电子邮件和数字的自动校验文本框。

  通过右击屏幕打开一个弹出窗口(参考图1),可以实现这个DataGrid在不同的模式之间的切换(图2展示一种模式下的视图):


\n



图2.这个DataGrid具有分页,Master-Detail和编辑功能。

图3.这个DataGrid具有定制控件和含有静态头部的滚动条


\n


  二、 性能剖析

  这个DataGrid是应邀使用javascript创建的,而JavaScript并不是一种编译语言,因此,与把xtml代码直接生成到页面的技术相比,这种方式速度显然慢些。如果DataGrid包含多于200记录,那么最好还是使用页面方式。否则,性能将会受到很大影响。

  我们使用CSS(层叠式样表)来配置这个控件的外观;因此,用户可以很容易地进行修改。


\n

  三、 用法

  这个用户控件包括五个部分:

  1. 用户控件.ascx文件

  2. JavaScript文件

  3. 数据库存取文件
 
  4. CSS文件

  5. AJAX.NET动态链接库(.dll)

  首先,要添加对ajax.dll的参考。

  然后,把UserControl目录直接复制到你的工程并且把这个用户控件添加到你的ASP.Net页面(请参考工程源码):
<%@ Register TagPrefix=”WebDataGridDemo” TagName=”WebDataGrid” Src= “UserControl/WebDataGridUserControl.ascx”%>
<WEBDATAGRIDDEMWEBDATAGRID id=”wdg1″ runat=”server”> </WEBDATAGRIDDEMWEBDATAGRID>

  在这个Web.config文件中,安装连接字符串。接下来,添加对Ajax.net dll的参考:


\n
<appSettings>
<add key=”ConnectionString” value=”Data Source=(local);Initial Catalog=Northwind;User Id=sa;Password=xxx;” />
</appSettings>
<httpHandlers>
<add verb=”POST,GET” path=”
type=”Ajax.PageHandlerFactory, Ajax ” />
</httpHandlers>

\n