AJAX解释第二部分 AJAX DataGrid

分享于 

7分钟阅读

Web开发

  繁體

Sample Image - ajaxdatagrid.gif

介绍

欢迎使用我的系列第二部分来解释. NET的AJAX。 如果你还没有尝试使用AJAX和 ASP.NET 创建 AJAX Shoutbox,那么你可以开始为AJAX初学者创建 AJAX。 它还介绍了关于AJAX的一些介绍性部分,以及关于AJAX的AJAX实现的简要背景,叫做 ATLAS。 如果你已经介绍了这篇文章,并且希望将你的牙齿放入一些有关AJAX和SQL的实际应用中。

背景

在 Visual Studio 2002中,微软提供了Datagrid控件,从而产生了关于使用该事件的大量相关主题。 Datagrid是一个非常强大的工具,它是向用户显示SQL结果集的好方法。 它实现了分页和排序,并且可以多种方式进行样式化。 在 ASP.NET 应用程序中使用Datagrid的唯一缺点是post后端的问题。 绑定,排序和分页所有必需的服务器日志备份。 在很多时候,这造成了对网站的不必要的"闪烁"效果。 本文将演示如何创建你自己的ajax数据网格,它可以在不使用服务器 postback的情况下进行样式化。排序。分页和绑定。

入门

我提供了一个相当完整的演示项目,应该有足够的注释来给你一个 relative 路线图。 另外,如果你已经熟悉了第一篇文章,那么我就没有理由去查看我在示例中使用的XMLHttpRequest 对象了。 我计划更多地将数据网格呈现回网站以及你可以为应用程序添加功能的方式。 如果你有点迷路,请务必回到阅读第一篇文章。 它对Javascript中的内容进行了相当全面的概述。

概述

如上所述,这里完整示例执行以下不带 postback的函数:

  • 绑定数据
  • 页面的页面
  • 对网格进行排序

对于本示例,我使用了 oh-so-famous Northwind数据库( 如图所示)。 在运行该应用程序之前,从 web.config 文件中访问连接字符串,因此要确保将它的更改为本地sql数据库。 主页面上的HTML输入处理SQL查询,因此你可以将它的更改为任何你想要的。 行输入将从数据表返回行数。

使用代码

创建和使用代码有几个不同的步骤。 由于AJAX使用多种技术来完成它的任务,我将在这里处简要解释使用包含的示例:

  • 实际上,不需要为 ASP.NET 页面。 这可能只是一个标准的HTML文件。 它包含了我们用来激活Javascript并显示响应的HTML。
  • 这是从 ajaxDatagrid.aspx 页面--引用的Javascript文件,它处理我们的所有请求处理。
  • Web.Config - 包含 sql server连接字符串。
  • ajaxDatagrid.css - 样式表。 这个 spruces up数据网格,让它变得非常可以定制。
  • processSQL.aspx - HTML页面。 我们只对后面的代码感兴趣。 这是处理XML请求的服务器端脚本,执行所有处理并返回格式化的HTML。

一旦打开了文件,就会发现许多文本操作进行。 在这个例子中,我将所有内容作为字符串返回。 如果你不适合使用 HTML,你可以能希望使用. NET 内的HTMLTextWriter 对象来创建你的HTML页面。 我更喜欢老式的格式化文本的方式。

我有一个区域"regioned输出"读取: "通用 table 处理。没有分页。这是第一次帮助我创建 table的迭代。 在演示中没有使用它,但是我保存在那里,以防你想只显示一个网格,没有分页或者排序。 代码的内容存放在 processTable()processSubsetTable() 方法中。 每种方法都返回一个大的。格式化的HTML字符串,但仍然只是转储到主页面上div的字符串 --。 流程流程的工作方式如下:

  • SQL查询。行计数。页和排序表达式( 最后两个为空) 通过 XMLHttpRequest 对象传递给服务器。
  • 服务器接收查询并从 SQL Server 获取数据,并将它的存储在数据表中。
  • 数据 table 处理服务器,将所有的列和行转换为一个 HTML table。 Javascript排序和页面函数在这里添加。
  • 格式化的HTML文本发送回客户端并转储到div标签中。 CSS会自动获取并将它的格式化。

Points of interest

在 processSQL.cs 文件中,类被应用到HTML中的每个 td 元素。 它们被编码为"itm"或者"alt",并且可以在你的CSS文件中使用交替颜色,如果你选择。 所有的数据网格样式都是由CSS文件单独处理的,使得更改网格的外观和感觉变得非常容易。

当网格排序时,只对可见页面进行排序,而不是对整个后端数据 table 进行排序。 当我编码这个应用程序时,我只需要一个页面,而不是整个集合。

通过这个演示,我尽量尽可以能地保持外观和感觉--以及 ASP.NET Datagrid的标准功能 --。 但是,你会注意到性能差异的速度,因为没有任何后端。

使用这个函数执行长期运行的查询是一个不好的主意。 如果你选择去这个路线,我肯定会建议某种用户反馈,如沙漏,动画"请稍候"条或者沿这些线。

安全注意事项

这里应用程序的查询字符串和参数未编码。 他们使用原始的SQL来演示演示。 这绝对不能用于部署。 我只是作为演示而不是作为企业应用程序来创建的。 如果你希望使用这样的方法,但是在部署之前请确保你解决了自己的安全问题。

开心编码!

历史记录

  • 20 2006年09月 --原始版本已经发布。
  • 21 2007年06月 --文章已经编辑并移动到主 CodeProject.com 文章基础。

数据  PAR  Datagrid  
相关文章