Developer Express.Net控件中內嵌的Ajax技術研究

魏志明+李家+呂天陽

摘要：指出了Developer Express.Net是一款功能齊全、界面美觀的.NET基礎控件庫，為.NET框架進行充分優(yōu)化，可以最大限度地提高用戶的開發(fā)效率。Ajax 是Web 2.0 的核心技術之一，它利用客戶端的JavaScript 和服務器端代碼進行異步通信來實現(xiàn)頁面局部更新，可為用戶提供了更好的操作體驗。以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控件庫可以使開發(fā)人員的開發(fā)效率明顯提高。只需要簡單的點擊鼠標，可以通過使用ASPxBars和ASPxNavBar組件為應用程序增加導航工具，使用 ASPxHtmlEditor， ASPxPivotGrid， ASPxTreeList 和ASPxGridview組件瀏覽和編輯數據，以及通過ASPxReports和ASPxPrinting組件提高應用程序的可用性。與標準控件相比，Developer Express.Net控件更加美觀、簡易，編程者通過簡單操作可實現(xiàn)復雜的數據處理和頁面操作。

2 Ajax簡介

2.1 Ajax介紹

當前已經進入了Web服務的時代，人們的日常生活中，Web服務的作用日漸增大，Web可以帶給人們各種信息化服務。熱門站點的服務器每分每秒都在處理著大量的數據請求。在瀏覽網站時，通過鏈接從一個網頁跳轉到另一個網頁，很多頁面上存在著大量重復的信息。因此造成了數據的重復請求，增加了網站的服務器的負擔，進而造成了客戶端響應時間過長以及用戶等待時間過長。

針對以上問題，2005年2月Jesse James Garrett提出Ajax這個概念。Ajax是Asynchronous JavaScript and XML的縮寫。Ajax并不是一門新的語言或技術，它實際上是幾項技術按一定方式的組合，在共同的協(xié)作中發(fā)揮各自的作用[1]。

2.2 Ajax的工作原理

在經典的瀏覽器與服務器的交互方式中，由用戶觸發(fā)一個HTTP清求到服務器，服務器對其進行處理后再返回一個新的Web頁到瀏覽器。因此，當服務器接受瀏覽器提交的請求并進行處理時，用戶都只能等待處理結果。當需要用戶與服務器端進行一次簡單的數據交互時，也需要服務器端處理請求后將整個Web頁返回。這是客戶端接受整個頁面并進行刷新。這影響了響應時間，并且在負載較大時，會使響應時間變得過長，導致用戶需要長時間的等待[2]。

Ajax是作為一個中間層添加在用戶和服務器之間，使用戶操作與服務器響應產生異步化。它使部分需要服務器端進行處理的的用戶請求提交給服務器，而一些無需提交給服務器端的數據由Ajax完成驗證和處理。當確定需要從服務器讀取新數據時再由Ajax引擎代為向服務器提交請求[6，8]。通過使用AJAX引擎來減少服務器的處理，進而減輕服務器的負擔和減少用戶的等待時間。

2.3 XMLHttpRequest對象

XMLHttpRequest是得以實現(xiàn)異步通訊的根本。最早在IE 5 中以ActiveX組件實現(xiàn)。用XMLHttpRequest進行異步通訊，首先必須用JavaScript創(chuàng)建一個XMLHttpRequest對象實例。可以看出，創(chuàng)建XMLHttpRequest對象相當容易。首先，聲明一個全局變量xmlHttp用來保存即將創(chuàng)建的XMLHttpRequest對象的引用；然后，在createXMLHttpRequest（）方法中完成具體創(chuàng)建工作。因為IE與其他瀏覽器對XMLHttpRequest 對象的實現(xiàn)方法不同，因此在創(chuàng)建時，通過一個分支語句進行判斷。

3 Developer Express .Net控件庫

3.1 Developer Express .Net控件庫簡介

Developer Express .Net控件庫為第三方控件，是由Developer Express公司開發(fā)的控件。作為ASP.NET開發(fā)過程中的第三方控件，它具有功能豐富、應用方便、界面新穎、定制簡易的特點，極大地提高了開發(fā)效率[10]。這里不一一介紹，而是對其中AspxCallaback控件和AspxGridView控件以及其內嵌的AJAX技術進行介紹與設計實現(xiàn)。

3.2 ASPxCallback對象

AspxCallback是一個無界面控件，主要功能是啟動一個回調，進行數據交互。AspxCallback是在當前頁面中沒有自帶Callback方法的控件時所使用的無界面控件。ASPxCallback控件簡單來的來說是一個數據回調控件，不刷新頁面來展現(xiàn)數據，主要是通過注冊客戶端事件與服務器端的事件來相互通信完成任務。

3.3 ASPxCallback控件的客戶端類

ASPx控件本身攜帶一個對應的客戶端類，例如，ASPxCallback的客戶端類為ASPxClientCallback。每個客戶端類都有方法和事件，可以在腳本中調用和響應。

PerformCallback方法會調用Callback1控件在服務器端的ASPxCallback1_Callback（）方法，以完成指定的操作。同時，PerformCallback（）中的參數可有可無，類型為string，當有參數時，服務器端可通過ASPxCallback1_Callback（） 中的 （ CallbackEventArgs e） e.Parameter來獲得，并通過e.Result參數返回結果值。此時，就可以通過執(zhí)行Client端的CallbackComplete方法得到返回的結果。

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

信息與技術

4 Ajax在ASPxGridView中的應用

4.1 ASPxGridView對象

ASPxGridView控件是一款功能比較強的表格控件，能創(chuàng)建高級的用戶界面。具有快速的數據加載能力。加載大型數據集時，在速度和內存使用方面，ASPxGridView具有很大的優(yōu)勢。

ASPxGridView支持AJAX技術。該Web組件提供三種用戶互動模式： postbacks ，callbacks和客戶端腳本。通過callbacks處理用戶的回調操作， callbacks的處理非常快，可以確保網站快速響應。只需較少的腳本加載到客戶端，整個網頁沒有隨著每個用戶行為而重載刷新。

4.2 ASPxGridView控件在客戶端的類

ASPxGridView的客戶端類為ASPxClientGridView，有客戶端的方法和事件，可以在腳本中調用和響應。

GetValuesOnCustomCallback發(fā)送一個回調到服務器端，發(fā)生該回調時ASPxGridView在服務器端產生CustomDataCallback事件，調用GetValuesOnCustomCallback時傳入的參數在服務器端事件中可以接收到。其中第一個參數為字符串類型，用于向服務器端傳輸信息。第二個參數為腳本中的函數，用于異步調用結束時接受服務器端的信息。GetValuesOnCustomCallback是取值回到客戶端。

PerformCallback發(fā)送一個回調到服務器端，發(fā)生回調時ASPxGridView在服務器端產生CustomCallback事件，調用PerformCallback時傳入的參數在服務器端事件中可以接收到。args參數為字符串，可以在服務器端的ASPxGridView.CustomCallback事件中接受。PerformCallback只是改動ASPxGridview中的某一個值。

4.3 ASPxGridView實現(xiàn)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事件，當輸入的值不符合規(guī)定類型時，彈出提示，并在程序中返回false就可以了。

當BtnClick事件返回false時，程序就不會再去指行服務器端的代碼。但是ASPxButton卻不可以，無論是事件的注冊方式還是處理都有很大的不同。在注冊事件時，需要在 標記中添加子節(jié)點。

4.3.3 選課界面設計

放入text控件和ASPxGridView控件，在ASPxGridView控件中設置主鍵字段為“課程名”，添加ASPxButton控件，添加GridViewCommandColumn列，設置ShowSelectCheckbox屬性為true，可多選；設置EditButton Visible屬性為true，進行行編輯。

4.3.4 選擇數據累加的實現(xiàn)

首先在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技術的原理和實現(xiàn)方式，并將它與ASPxGridView中的Ajax技術進行了對比。重點研究了ASPxGridView中的Ajax技術的原理和方法、ASPxGridView的客戶端類ASPxClientGridView和該類實現(xiàn)的各種回調方法及在服務器端的響應事件。

參考文獻：

[1]冉春玉，劉煉，劉剛.AJAX 技術在Web 頁面開發(fā)中的應用[J].軟件導刊，2007.

[2]楊振華，楊社堂，楊升山. Ajax及其性能分析[J].電腦開發(fā)與應用，2009.

[3]金 靈， 等譯.Ajax基礎教程[M].北京：人民郵電出版社，2006.

[4]孟憲瑞，易 磊，等譯. ASP.NET 2.0經典教程——C#篇[M].北京：人民郵電出版社，2007.

[5]王 沛，馮曼菲.征服Ajax——Web2.0開發(fā)技術詳解[M].北京：人民郵電出版社，2006.

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

[7]Dava Crane， Eric Pascarello， Darren James. Ajax 實戰(zhàn)[M].北京：人民郵電出版社，2006.

[8]陳黎夫 .ASP.NET AJAX程序設計 第I卷：服務器端[M].北京：人民郵電出版社，2007.

[9]王圣鑌，鄭欣欣.基于第三方控件的書目檢索系統(tǒng)的設計與實現(xiàn)[J].黑龍江科技信息，2013.