Developer Express.Net控件中內(nèi)嵌的Ajax技術(shù)研究

魏志明+李家+呂天陽

摘要：指出了Developer Express.Net是一款功能齊全、界面美觀的.NET基礎(chǔ)控件庫，為.NET框架進行充分優(yōu)化，可以最大限度地提高用戶的開發(fā)效率。Ajax 是Web 2.0 的核心技術(shù)之一，它利用客戶端的JavaScript 和服務(wù)器端代碼進行異步通信來實現(xiàn)頁面局部更新，可為用戶提供了更好的操作體驗。以ASPxGridView、ASPxCallback、控件為例研究了其中的Ajax技術(shù)。

關(guān)鍵詞：Ajax；Developer Express.NET；ASPx控件

中圖分類號：TP311.10

文獻標(biāo)識碼：A 文章編號：1674-9944（2016）20-0154-03

1 引言

Developer Express.Net控件庫為第三方控件，由Windows窗體控件和ASP.Net控件組成，其類庫的類均由C#語言編程。使用Developer Express.Net控件庫可以使開發(fā)人員的開發(fā)效率明顯提高。只需要簡單的點擊鼠標(biāo)，可以通過使用ASPxBars和ASPxNavBar組件為應(yīng)用程序增加導(dǎo)航工具，使用 ASPxHtmlEditor， ASPxPivotGrid， ASPxTreeList 和ASPxGridview組件瀏覽和編輯數(shù)據(jù)，以及通過ASPxReports和ASPxPrinting組件提高應(yīng)用程序的可用性。與標(biāo)準(zhǔn)控件相比，Developer Express.Net控件更加美觀、簡易，編程者通過簡單操作可實現(xiàn)復(fù)雜的數(shù)據(jù)處理和頁面操作。

2 Ajax簡介

2.1 Ajax介紹

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

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

2.2 Ajax的工作原理

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

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

2.3 XMLHttpRequest對象

XMLHttpRequest是得以實現(xiàn)異步通訊的根本。最早在IE 5 中以ActiveX組件實現(xiàn)。用XMLHttpRequest進行異步通訊，首先必須用JavaScript創(chuàng)建一個XMLHttpRequest對象實例。可以看出，創(chuàng)建XMLHttpRequest對象相當(dāng)容易。首先，聲明一個全局變量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ā)過程中的第三方控件，它具有功能豐富、應(yīng)用方便、界面新穎、定制簡易的特點，極大地提高了開發(fā)效率[10]。這里不一一介紹，而是對其中AspxCallaback控件和AspxGridView控件以及其內(nèi)嵌的AJAX技術(shù)進行介紹與設(shè)計實現(xiàn)。

3.2 ASPxCallback對象

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

3.3 ASPxCallback控件的客戶端類

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

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

魏志明，等：Developer Express .Net控件中內(nèi)嵌的Ajax技術(shù)研究

信息與技術(shù)

4 Ajax在ASPxGridView中的應(yīng)用

4.1 ASPxGridView對象

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

ASPxGridView支持AJAX技術(shù)。該Web組件提供三種用戶互動模式： postbacks ，callbacks和客戶端腳本。通過callbacks處理用戶的回調(diào)操作， callbacks的處理非?？欤梢源_保網(wǎng)站快速響應(yīng)。只需較少的腳本加載到客戶端，整個網(wǎng)頁沒有隨著每個用戶行為而重載刷新。

4.2 ASPxGridView控件在客戶端的類

ASPxGridView的客戶端類為ASPxClientGridView，有客戶端的方法和事件，可以在腳本中調(diào)用和響應(yīng)。

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

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

4.3 ASPxGridView實現(xiàn)Ajax調(diào)用示例

功能概述：可以進行登錄用戶密碼校驗，進行選課并取每行的數(shù)據(jù)進行計算，將選課結(jié)果顯示出來。所需數(shù)據(jù)庫中包含課程號、課程名、學(xué)分、任課教師、上課時間和學(xué)時。

4.3.1 登錄界面設(shè)計

登入界面由用戶名輸入、密碼輸入和登入按鈕組成。

4.3.2 登錄的校驗

首先在ASPxButton中的Client-Side Events中的Click事件中添加onclick（s，e）函數(shù)。當(dāng)用戶名與密碼有為空時，彈出提示，并且返回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基礎(chǔ)控件庫所提供的控件。

在客戶端驗證時，用AspButton時只需要添加 OnClientClick事件，當(dāng)輸入的值不符合規(guī)定類型時，彈出提示，并在程序中返回false就可以了。

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

4.3.3 選課界面設(shè)計

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

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

首先在ASPxGridView1中對客戶端的SelectionChanged事件增加onSelectionChanged函數(shù)。

通過GetSelectedFieldValues函數(shù)來獲取被選擇列的值。GetSelectedFieldValues 是ASPxClientGridView類中的回調(diào)方法，它的作用是返回所有被選擇列的值總和。

在提交的過程中還有兩個限制條件，一個為選課數(shù)不能為0，即必須選擇一門課程，一個為所選課程的總學(xué)分不能超過15分。在ASPxButton的客戶端事件中寫入onClick函數(shù)，代碼如下：

function onClick（s， e） {

e.processOnServer = false；

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

alert（"請選擇課程"）

}

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

alert（"最多選擇課程學(xué)分不得超過15分"）

}

else {

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

}

}

function onCallback1（result） {

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

}

這里使用了ASPxGridView的GetSelectedFieldValues方法，這個方法可以查詢并取到課程名一列的值。將其通過onCallback方法將其值賦給p1，并通過window.open方法將其值傳入結(jié)果界面。

4.3.5 選擇結(jié)果的顯示

選課的結(jié)果是在一個新的網(wǎng)頁中顯示的，只需要一個ASPxGridView即可。

在Page_Load中，用Request對象獲得p1的值，再通過select語句查詢所選中的記錄。最后將所查詢到的數(shù)據(jù)綁定到ASPxGridView上，獲得所要的結(jié)果。核心代碼如下：

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(chǎn)中的值為多個用逗號隔開的字段，所以需要用Replace方法來將其中的逗號轉(zhuǎn)化為“，”。并在select語句中使用“select * from 選課表where 課程名 in ”+a；而不是“select * from 選課表where 課程名 = ”+a；。效果如圖1所示。

5 結(jié)語

本課題研究了Ajax技術(shù)在ASPxGridView中的應(yīng)用。通過建立Ajax在Web下的一個應(yīng)用示例，介紹了Ajax技術(shù)的原理和實現(xiàn)方式，并將它與ASPxGridView中的Ajax技術(shù)進行了對比。重點研究了ASPxGridView中的Ajax技術(shù)的原理和方法、ASPxGridView的客戶端類ASPxClientGridView和該類實現(xiàn)的各種回調(diào)方法及在服務(wù)器端的響應(yīng)事件。

參考文獻：

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

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

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

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

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

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

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

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

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