AJAX 揭秘 - 第二部分 - AJAX DataGrid

• 下载演示项目 - 22.1 Kb

引言

欢迎来到我的 AJAX for .NET 系列第二部分。如果您还没有尝试过关于使用 AJAX 和 ASP.NET 创建 AJAX 聊天框的第一篇文章，那么对于 AJAX 初学者来说，那是一个很好的起点。它还涵盖了关于 AJAX 是什么的一些入门知识，以及微软针对 AJAX 的实现 ATLAS 的简要背景。如果您已经阅读了那篇文章，并且正在寻找一些关于使用 AJAX 和 SQL 的实际应用，那么您来对地方了。

背景

在 Visual Studio 2002 中，微软提供了 DataGrid 控件，引发了无数与该控件使用相关的讨论。DataGrid 是一个极其强大的工具，也是向用户显示 SQL 结果集的绝佳方式。它实现了分页和排序，并且可以以多种不同的方式进行样式设置。在 ASP.NET 应用程序中使用 DataGrid 的唯一主要缺点是回发问题。绑定、排序和分页都需要服务器回发。很多时候，这会在网站上造成不希望的“闪烁”效果。本文将演示如何创建您自己的 AJAX 驱动的数据网格，该网格无需服务器回发即可进行样式设置、排序、分页和绑定。

入门

我提供了一个相当完整的演示项目，其中应该有足够的注释来为您提供一个相对的路线图。此外，如果您已经熟悉第一篇文章，就没有必要再介绍示例中使用的 XMLHttpRequest 对象了。我计划将更多地关注数据网格如何渲染回网站，以及您可以为应用程序添加功能的方面。如果您有点困惑，请务必回去阅读第一篇文章。它对 Javascript 中发生的事情进行了相当完整的概述。

概述

正如我之前所说，这个完整的示例具有以下功能，且无需回发：

• 绑定数据
• 分页网格
• 排序网格

在此示例中，我使用了那个众所周知的 Northwind 数据库（如图所示）。连接字符串从 web.config 文件中访问，因此在尝试运行应用程序之前，请务必将其更改为您本地的 MSSQL 数据库。主页面上的 HTML 输入处理 SQL 查询，因此您可以将其更改为您喜欢的任何内容。行输入将从您的数据表中返回 X 行。

使用代码

创建和使用代码涉及几个不同的步骤。因为 AJAX 使用多种技术来完成其任务，所以我将在此进行简要解释，并结合我提供的示例。

• ajaxDatagrid.aspx - 老实说，它甚至不需要是一个 ASP.NET 页面。它可以只是一个标准的 HTML 文件。它包含了我们将用于激活 Javascript 和显示响应的 HTML。
• ajaxDatagrid.js - 这是 Javascript 文件——它从 ajaxDatagrid.aspx 页面引用——它负责我们所有的请求处理。
• Web.Config - 包含 MSSQL 服务器连接字符串。
• ajaxDatagrid.css - 样式表。它美化了数据网格，使其极易定制。
• processSQL.aspx - HTML 页面本身什么都没有。我们只关心其代码隐藏。这是处理 XML 请求、进行所有处理并返回格式化 HTML 的服务器端脚本。

一旦您打开 processSQL.cs 文件，您就会发现大量的文本操作正在进行。现在，对于这个示例，我将所有内容都作为字符串返回。如果您不非常熟悉使用 HTML，您可能希望使用 .NET 中的 HTMLTextWriter 对象来创建您的 HTML 页面。我更喜欢老式的自己格式化文本。

我有一个“区域化”的部分，上面写着：“通用表格处理 - 无分页。”这是帮助我创建表格的第一个迭代。它并未在演示中使用，但我将其保留在那里，以防您希望仅显示一个表格，而不进行分页或排序。代码的核心部分包含在 processTable() 和 processSubsetTable() 方法中。每个方法都返回一个字符串——一个大的、格式化的 HTML 字符串，但仍然只是一个字符串——然后被转储到主页面的“results” div 中。处理流程大致如下：

• SQL 查询、行数、页面和排序表达式（后两者最初为 null）通过 XMLHttpRequest 对象传递到服务器。
• 服务器接收查询，从 SQL 服务器拉取数据，并将其存储在数据表中。
• 数据表在服务器上进行处理，将所有列和行转换为 HTML 表格。在此处添加 Javascript 的排序和分页函数。
• 格式化的 HTML 文本被发送回客户端，并转储到 div 标签中。CSS 会拾取它并动态格式化。

关注点

在 processSQL.cs 文件中，类被应用于 HTML 中的每个 TD 元素。它们被编码为“itm”或“alt”，并可以在您的 CSS 文件中使用，以便为行设置交替颜色，如果您愿意的话。所有的数据网格样式都完全由 CSS 文件处理，这使得修改起来非常容易，以改变您网格的外观和感觉。

当网格进行排序时，只有可见页面被排序，而不是整个后端数据表。当然，这可以通过一些技术上的努力来改变，但当我编写这个应用程序时，我只想一次排序一页，而不是整个数据集。

通过这个演示，我已尽力保持 ASP.NET DataGrid 的外观和感觉——以及标准功能——不变。但是，您会注意到性能上的速度差异，因为没有回发。

使用此功能执行长时间运行的查询是一个坏主意。如果您选择走这条路，我绝对会建议某种用户反馈，例如沙漏、动画“请稍候”条或类似的指示。

安全问题

此应用程序的查询字符串和参数未进行编码。它们使用原始 SQL 来演示。这绝非准备好部署。我创建此文件仅作为演示，而不是作为企业级应用程序使用。如果您希望将其用作企业级应用程序，请随意，但请务必在部署前解决您自己的安全问题！

祝您编码愉快！

历史

• 2006 年 9 月 20 日 -- 发布原始版本。
• 2007 年 6 月 21 日 -- 文章已编辑并移至 CodeProject.com 的主要文章库。