Developer Express.Net控件中内嵌的Ajax技术研究

魏志明+李家+吕天阳

摘要：指出了Developer Express.Net是一款功能齐全、界面美观的.NET基础控件库，为.NET框架进行充分优化，可以最大限度地提高用户的开发效率。Ajax 是Web 2.0 的核心技术之一，它利用客户端的JavaScript 和服务器端代码进行异步通信来实现页面局部更新，可为用户提供了更好的操作体验。以ASPxGridView、ASPxCallback、控件为例研究了其中的Ajax技术。

关键词：Ajax；Developer Express.NET；ASPx控件

中图分类号：TP311.10

文献标识码：A 文章编号：1674-9944（2016）20-0154-03

1 引言

Developer Express.Net控件库为第三方控件，由Windows窗体控件和ASP.Net控件组成，其类库的类均由C#语言编程。使用Developer Express.Net控件库可以使开发人员的开发效率明显提高。只需要简单的点击鼠标，可以通过使用ASPxBars和ASPxNavBar组件为应用程序增加导航工具，使用 ASPxHtmlEditor， ASPxPivotGrid， ASPxTreeList 和ASPxGridview组件浏览和编辑数据，以及通过ASPxReports和ASPxPrinting组件提高应用程序的可用性。与标准控件相比，Developer Express.Net控件更加美观、简易，编程者通过简单操作可实现复杂的数据处理和页面操作。

2 Ajax简介

2.1 Ajax介绍

当前已经进入了Web服务的时代，人们的日常生活中，Web服务的作用日渐增大，Web可以带给人们各种信息化服务。热门站点的服务器每分每秒都在处理着大量的数据请求。在浏览网站时，通过链接从一个网页跳转到另一个网页，很多页面上存在着大量重复的信息。因此造成了数据的重复请求，增加了网站的服务器的负担，进而造成了客户端响应时间过长以及用户等待时间过长。

针对以上问题，2005年2月Jesse James Garrett提出Ajax这个概念。Ajax是Asynchronous JavaScript and XML的缩写。Ajax并不是一门新的语言或技术，它实际上是几项技术按一定方式的组合，在共同的协作中发挥各自的作用[1]。

2.2 Ajax的工作原理

在经典的浏览器与服务器的交互方式中，由用户触发一个HTTP清求到服务器，服务器对其进行处理后再返回一个新的Web页到浏览器。因此，当服务器接受浏览器提交的请求并进行处理时，用户都只能等待处理结果。当需要用户与服务器端进行一次简单的数据交互时，也需要服务器端处理请求后将整个Web页返回。这是客户端接受整个页面并进行刷新。这影响了响应时间，并且在负载较大时，会使响应时间变得过长，导致用户需要长时间的等待[2]。

Ajax是作为一个中间层添加在用户和服务器之间，使用户操作与服务器响应产生异步化。它使部分需要服务器端进行处理的的用户请求提交给服务器，而一些无需提交给服务器端的数据由Ajax完成验证和处理。当确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求[6，8]。通过使用AJAX引擎来减少服务器的处理，进而减轻服务器的负担和减少用户的等待时间。

2.3 XMLHttpRequest对象

XMLHttpRequest是得以实现异步通讯的根本。最早在IE 5 中以ActiveX组件实现。用XMLHttpRequest进行异步通讯，首先必须用JavaScript创建一个XMLHttpRequest对象实例。可以看出，创建XMLHttpRequest对象相当容易。首先，声明一个全局变量xmlHttp用来保存即将创建的XMLHttpRequest对象的引用；然后，在createXMLHttpRequest（）方法中完成具体创建工作。因为IE与其他浏览器对XMLHttpRequest 对象的实现方法不同，因此在创建时，通过一个分支语句进行判断。

3 Developer Express .Net控件库

3.1 Developer Express .Net控件库简介

Developer Express .Net控件库为第三方控件，是由Developer Express公司开发的控件。作为ASP.NET开发过程中的第三方控件，它具有功能丰富、应用方便、界面新颖、定制简易的特点，极大地提高了开发效率[10]。这里不一一介绍，而是对其中AspxCallaback控件和AspxGridView控件以及其内嵌的AJAX技术进行介绍与设计实现。

3.2 ASPxCallback对象

AspxCallback是一个无界面控件，主要功能是启动一个回调，进行数据交互。AspxCallback是在当前页面中没有自带Callback方法的控件时所使用的无界面控件。ASPxCallback控件简单来的来说是一个数据回调控件，不刷新页面来展现数据，主要是通过注册客户端事件与服务器端的事件来相互通信完成任务。

3.3 ASPxCallback控件的客户端类

ASPx控件本身携带一个对应的客户端类，例如，ASPxCallback的客户端类为ASPxClientCallback。每个客户端类都有方法和事件，可以在脚本中调用和响应。

PerformCallback方法会调用Callback1控件在服务器端的ASPxCallback1_Callback（）方法，以完成指定的操作。同时，PerformCallback（）中的参数可有可无，类型为string，当有参数时，服务器端可通过ASPxCallback1_Callback（） 中的 （ CallbackEventArgs e） e.Parameter来获得，并通过e.Result参数返回结果值。此时，就可以通过执行Client端的CallbackComplete方法得到返回的结果。

魏志明，等：Developer Express .Net控件中内嵌的Ajax技术研究

信息与技术

4 Ajax在ASPxGridView中的应用

4.1 ASPxGridView对象

ASPxGridView控件是一款功能比较强的表格控件，能创建高级的用户界面。具有快速的数据加载能力。加载大型数据集时，在速度和内存使用方面，ASPxGridView具有很大的优势。

ASPxGridView支持AJAX技术。该Web组件提供三种用户互动模式： postbacks ，callbacks和客户端脚本。通过callbacks处理用户的回调操作， callbacks的处理非常快，可以确保网站快速响应。只需较少的脚本加载到客户端，整个网页没有随着每个用户行为而重载刷新。

4.2 ASPxGridView控件在客户端的类

ASPxGridView的客户端类为ASPxClientGridView，有客户端的方法和事件，可以在脚本中调用和响应。

GetValuesOnCustomCallback发送一个回调到服务器端，发生该回调时ASPxGridView在服务器端产生CustomDataCallback事件，调用GetValuesOnCustomCallback时传入的参数在服务器端事件中可以接收到。其中第一个参数为字符串类型，用于向服务器端传输信息。第二个参数为脚本中的函数，用于异步调用结束时接受服务器端的信息。GetValuesOnCustomCallback是取值回到客户端。

PerformCallback发送一个回调到服务器端，发生回调时ASPxGridView在服务器端产生CustomCallback事件，调用PerformCallback时传入的参数在服务器端事件中可以接收到。args参数为字符串，可以在服务器端的ASPxGridView.CustomCallback事件中接受。PerformCallback只是改动ASPxGridview中的某一个值。

4.3 ASPxGridView实现Ajax调用示例

功能概述：可以进行登录用户密码校验，进行选课并取每行的数据进行计算，将选课结果显示出来。所需数据库中包含课程号、课程名、学分、任课教师、上课时间和学时。

4.3.1 登录界面设计

登入界面由用户名输入、密码输入和登入按钮组成。

4.3.2 登录的校验

首先在ASPxButton中的Client-Side Events中的Click事件中添加onclick（s，e）函数。当用户名与密码有为空时，弹出提示，并且返回false。

脚本代码为：

function onClick（s， e） {

if （ASPxTextBox1.GetText（） == ） {

alert（请输入用户名！）；

e.processOnServer = false；

}

else if （ASPxTextBox2.GetText（） == ） {

alert（请输入密码！）；

e.processOnServer = false；

}

在这里要简单对ASPButton与ASPxButton的校验不同进行一下解释。首先ASPButton是ASP.NET所提供的控件，而ASPxButton是Developer Express .Net基础控件库所提供的控件。

在客户端验证时，用AspButton时只需要添加 OnClientClick事件，当输入的值不符合规定类型时，弹出提示，并在程序中返回false就可以了。

当BtnClick事件返回false时，程序就不会再去指行服务器端的代码。但是ASPxButton却不可以，无论是事件的注册方式还是处理都有很大的不同。在注册事件时，需要在 标记中添加子节点。

4.3.3 选课界面设计

放入text控件和ASPxGridView控件，在ASPxGridView控件中设置主键字段为“课程名”，添加ASPxButton控件，添加GridViewCommandColumn列，设置ShowSelectCheckbox属性为true，可多选；设置EditButton Visible属性为true，进行行编辑。

4.3.4 选择数据累加的实现

首先在ASPxGridView1中对客户端的SelectionChanged事件增加onSelectionChanged函数。

通过GetSelectedFieldValues函数来获取被选择列的值。GetSelectedFieldValues 是ASPxClientGridView类中的回调方法，它的作用是返回所有被选择列的值总和。

在提交的过程中还有两个限制条件，一个为选课数不能为0，即必须选择一门课程，一个为所选课程的总学分不能超过15分。在ASPxButton的客户端事件中写入onClick函数，代码如下：

function onClick（s， e） {

e.processOnServer = false；

if （document.getElementById（"TextBox1"）.value == 0） {

alert（"请选择课程"）

}

if （document.getElementById（"TextBox1"）.value > 15） {

alert（"最多选择课程学分不得超过15分"）

}

else {

ASPxGridView1.GetSelectedFieldValues（"课程名"，onCallback1）；

}

}

function onCallback1（result） {

window.open（"Default3.aspx？p1=" + result， "_blank"）；

}

这里使用了ASPxGridView的GetSelectedFieldValues方法，这个方法可以查询并取到课程名一列的值。将其通过onCallback方法将其值赋给p1，并通过window.open方法将其值传入结果界面。

4.3.5 选择结果的显示

选课的结果是在一个新的网页中显示的，只需要一个ASPxGridView即可。

在Page_Load中，用Request对象获得p1的值，再通过select语句查询所选中的记录。最后将所查询到的数据绑定到ASPxGridView上，获得所要的结果。核心代码如下：

string a = "（"+ Request["p1"]+"）"；

a=a.Replace（"，"， "，"）；

String str = @"Data Source=（local）；Initial Catalog=master；Integrated Security=True"；

SqlConnection conn = new SqlConnection（）；

conn.ConnectionString = str；

conn.Open（）；

String mysql = "select * from 选课表where 课程名 in "+a；

SqlDataAdapter myda = new SqlDataAdapter（mysql， conn）；

DataSet myds = new DataSet（）；

myda.Fill（myds）；

GridView1.DataSource = myds；

GridView1.DataBind（）；

DataBind（）；

conn.Close（）；

字符串a中的值为多个用逗号隔开的字段，所以需要用Replace方法来将其中的逗号转化为“，”。并在select语句中使用“select * from 选课表where 课程名 in ”+a；而不是“select * from 选课表where 课程名 = ”+a；。效果如图1所示。

5 结语

本课题研究了Ajax技术在ASPxGridView中的应用。通过建立Ajax在Web下的一个应用示例，介绍了Ajax技术的原理和实现方式，并将它与ASPxGridView中的Ajax技术进行了对比。重点研究了ASPxGridView中的Ajax技术的原理和方法、ASPxGridView的客户端类ASPxClientGridView和该类实现的各种回调方法及在服务器端的响应事件。

参考文献：

[1]冉春玉，刘炼，刘刚.AJAX 技术在Web 页面开发中的应用[J].软件导刊，2007.

[2]杨振华，杨社堂，杨升山. Ajax及其性能分析[J].电脑开发与应用，2009.

[3]金 灵， 等译.Ajax基础教程[M].北京：人民邮电出版社，2006.

[4]孟宪瑞，易 磊，等译. ASP.NET 2.0经典教程——C#篇[M].北京：人民邮电出版社，2007.

[5]王 沛，冯曼菲.征服Ajax——Web2.0开发技术详解[M].北京：人民邮电出版社，2006.

[6]Ryan Asleson，Nathaniel T.Schutta. Ajax 基础教程[M].北京：人民邮电出版社，2006.

[7]Dava Crane， Eric Pascarello， Darren James. Ajax 实战[M].北京：人民邮电出版社，2006.

[8]陈黎夫 .ASP.NET AJAX程序设计 第I卷：服务器端[M].北京：人民邮电出版社，2007.

[9]王圣镔，郑欣欣.基于第三方控件的书目检索系统的设计与实现[J].黑龙江科技信息，2013.