一、簡介

到目前為止，我們已經(jīng)討論了開發(fā)Ajax控件所涉及的客戶端相關(guān)技術(shù)。現(xiàn)在，讓我們來討論此過程中與服務(wù)器端相關(guān)的一些技術(shù)。

需要說明的是，在【客戶端】篇中我們的舉例本質(zhì)上僅是使用ASP.NET AJAX框架提供的面向?qū)ο驤avaScript技術(shù)來增強了一個客戶端圖像組件，而沒有明顯涉及到AJAX技術(shù)（除了ScriptManager在后臺以AJAX方式下載并管理客戶端腳本代碼外）。所以，這個例子是簡單的，僅憑客戶端相關(guān)知識就可以使用這個增強控件。

但是，在實際開發(fā)中，當要增強的客戶端控件涉及到AJAX技術(shù)時，或者干脆是想增強服務(wù)器端組件（如UpdatePanel控件）時，我們必須進行相關(guān)的服務(wù)器端編程，而這要求我們必須對Ajax控件開發(fā)中所涉及的服務(wù)器端相關(guān)聯(lián)的類有所了解。而且，還要以ASP.NET 2.0服務(wù)器控件開發(fā)相關(guān)知識為基本前提，特別是在開發(fā)復(fù)雜的Ajax控件時。

在本篇中，我們要重新構(gòu)造一個增強的圖像按鈕控件MySrvImageButton，此控件將以ASP.NET 2.0服務(wù)器控件ImageButton為基礎(chǔ)。

二、AJAX控件開發(fā)服務(wù)器端相關(guān)技術(shù)

首先，讓我們來看一下AJAX控件開發(fā)服務(wù)器端相關(guān)組件及其關(guān)系，這些類之間的繼承關(guān)系圖如下圖1所示。

圖1：控件開發(fā)涉及的主要服務(wù)器端類之間層次結(jié)構(gòu)圖

上圖展示了組件、控件和擴展器之間的繼承關(guān)系。如你所見，為了開發(fā)一個控件（注意，Component和Extender不在本文討論范圍之內(nèi)），我們有兩個選擇：其一，創(chuàng)建一個派生自ScriptControl的類；其二，創(chuàng)建一個實現(xiàn)IScriptControl接口的類。但是，如果你想使你的控件從WebControl派生，那么，ScriptControl應(yīng)該是一個更好的選擇—因為它正是派生自WebControl控件本身。但是，如果你想從頭開發(fā)創(chuàng)建你的控件，并且不要求實現(xiàn)WebControl所具備的任何內(nèi)在特征，那么，實現(xiàn)IScriptControl則更為恰當。此外，當你想在一個現(xiàn)有控件（例如本文中的MySrvImageButton）中添加Ajax特征時選擇使用接口IScriptControl也會是你的選擇。但是這兩種方法都要求重載下列兩個方法：①、GetScriptDescriptors；②、GetScriptReferences。

三、GetScriptDescriptors

這個方法負責在客戶端以自動方式生成$create語句（而在上篇中是使用手工方式）。它使用了一個特殊類ScriptDescriptor來生成它。在繼續(xù)往下討論前，首先讓我們來瀏覽一下ScriptDescriptor類中的繼承層次圖（如圖2所示）：

圖2：ScriptDescriptor類中的繼承層次圖

顯然，每一種具體類型的組件都存在其單獨的描述符。如果你在開發(fā)一個常規(guī)組件，那么，這個方法會返回一個ScriptComponentDescriptor的實例。對于擴展器而言，該方法返回的是一個ScriptBehaviorDescriptor實例；而對于一個控件，則返回ScriptControlDescriptor類的實例。該描述符中提供了一些特定的方法用于創(chuàng)建服務(wù)器端與客戶端的“連接”。下面，還是讓我們來分析一個有關(guān)$Create語句是如何在服務(wù)器端“注入”的簡短示例：

//上篇中從客戶端以手工方式使用$create $create(AjaxImageButtonNamespace.MyCliImageButton, {'hoverImageUrl':'Images/updateh.gif'}, {'click':buttonClicked}, null, $get('cliBtn')); 在本文中，我們在服務(wù)器端以下列幾個語句共同自動生成$Create語句： ScriptControlDescriptor desc = new ScriptControlDescriptor("AjaxImageButtonLib.MySrvImageButton", ClientID); if (!string.IsNullOrEmpty(HoverImageUrl)) { desc.AddProperty("hoverImageUrl", HoverImageUrl); } if (!string.IsNullOrEmpty(ClientClickFunction)) { desc.AddEvent("click", ClientClickFunction); } return desc;

在上面的代碼中，我們在構(gòu)造器中傳遞客戶端類型（盡管客戶端和服務(wù)器端具有相同的類型名）和DOM元素ID。這一步將填充$Create語句的第一個和最后一個參數(shù)。此后，我們設(shè)置hoverImageUrl屬性，它對應(yīng)于$Create語句的屬性部分。最后，通過設(shè)置Click事件處理器，我們填充$Create語句的事件部分。下面是腳本描述符中暴露的幾個重要的方法：

1)AddProperty()
這個方法能夠在客戶端添加一個屬性。第一個參數(shù)相應(yīng)于屬性名，第二個參數(shù)對應(yīng)該參數(shù)的取值。
2)AddEvent()
這個方法在客戶端添加一個事件。第一個參數(shù)相應(yīng)于事件名，第二個參數(shù)對應(yīng)你想綁定的函數(shù)的名稱。
3)AddScriptProperty()
這個方法能夠把JavaScript代碼指定為屬性的一個值。對于復(fù)雜的屬性賦值通常都要求這樣的操作。
4)AddElementProperty()
這個方法在客戶端添加一個屬性，但是其與AddProperty方法間的區(qū)別在于，該值作為一個參數(shù)傳遞給$get方法。
5)AddComponentProperty()
這個方法負責在$Create語句的Component部分添加一個組件引用。該值將被用于$find語句中實現(xiàn)屬性的賦值。這個方法的第一個參數(shù)相應(yīng)于屬性名，第二個參數(shù)對應(yīng)該組件的id。

四、GetScriptReferences

這個方法負責在ScriptManager中注冊JavaScript文件。在這個方法中，針對每一個要求的JavaScript文件，我們都需要創(chuàng)建一個相應(yīng)的ScriptReference實例。例如，在圖像按鈕例子中，我們按如下方式注冊JavaScript文件：

IEnumerable<ScriptReference> IScriptControl.GetScriptReferences() { return new ScriptReference(Page.ResolveUrl("~/SrvImageButton.js")); }

此外，我們還可以以嵌入式資源方式注冊JavaScript文件。為此，我們必須首先在Visual Studio的解決方案資源管理器中把一個JavaScript文件標記為一種嵌入式資源。然后，我們必須添加上WebResource屬性以便利用Asp.Net 2.0 Web資源處理器。下列代碼展示了如何把一個JavaScript文件注冊為一個嵌入式資源：

[assembly: WebResource("MyControls.SubControl.Script1.js", "text/javascript")] namespace MyControls{ public class SubControl: Control, IScriptControl { //……… IEnumerable<ScriptReference> IScriptControl.GetScriptReferences() { return new ScriptReference(this.Page.ClientScript.GetWebResourceUrl( this.GetType(), "MyControls.SubControl.Script1.js")); } } }

此外，如果我們想實現(xiàn)IScriptControl接口而不是從ScriptControl中繼承的話，我們還必須重載OnPreRender與Render方法。這樣將能確保ScriptManger識別出該服務(wù)器控件是一個支持Ajax功能的控件。

下列代碼展示了開發(fā)基于ASP.NET 2.0服務(wù)器端控件的AJAX控件時必須在服務(wù)器端實現(xiàn)的最少代碼：

using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace DummyNamespace { public class DummyControl : Control, IScriptControl { public DummyControl(): base() {} protected override void OnPreRender(EventArgs e) { base.OnPreRender(e); ScriptManager scriptManager = ScriptManager.GetCurrent(Page); if (scriptManager == null) { throw new InvalidOperationException( "此頁面中必須存在一個ScriptManager控件！"); } scriptManager.RegisterScriptControl(this); } protected override void Render(HtmlTextWriter writer) { base.Render(writer); writer.AddAttribute(HtmlTextWriterAttribute.Id, this.ClientID); writer.RenderBeginTag(HtmlTextWriterTag.Div); writer.Write("這是一個啞元控件"); writer.RenderEndTag(); if (!DesignMode) { ScriptManager.GetCurrent(this.Page).RegisterScriptDescriptors(this); } } IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors() { //因為這僅是一個啞元控件，所以我們只是創(chuàng)建一個新的實例 return new ScriptControlDescriptor("DummyNamespace.DummyControl", ClientID); } IEnumerable<ScriptReference> IScriptControl.GetScriptReferences() { return new ScriptReference(Page.ResolveUrl("~/DummyControl.js")); } } }

上面代碼中，我們在OnPreRender方法中實現(xiàn)注冊控件，而在Render方法中注冊腳本描述符部分。當然，如果頁面上不存在ScriptManager控件的話，我們必須拋出一個錯誤提示。但是，如果你正在開發(fā)非基于ASP.NETAJAX框架的控件的話，你完全可以從頁面中刪除ScriptManager控件。

五、創(chuàng)建基于ASP.NET服務(wù)器端控件的增強AJAX圖像控件

(一)創(chuàng)建示例AJAX網(wǎng)站

啟動Visual Studio 2005，選擇“文件→新建網(wǎng)站…”，然后選擇“ASP.NET AJAX-Enabled Web Site”模板，命名工程為“AjaxServCtrlTest”，并選擇C#作為內(nèi)置支持語言，最后點擊“確定”。

(二)創(chuàng)建AJAX技術(shù)支持的增強服務(wù)器控件

點擊菜單“文件→添加→新建項目…”，在“添加新項目”對話框中，從左邊選擇“項目類型”為“Visual C#→Windows”，從右邊選擇“模板類型”為“Web控件庫”，輸入控件庫的名字為AjaxImageButtonLib，選擇目標目錄為前面創(chuàng)建的網(wǎng)站根目錄，最后點擊“確定”。

接下來，根據(jù)我們前面的分析，把類庫源WebCustomControl1.cs文件的內(nèi)容更改為以下形式：

//…………（省略命名空間引用部分） namespace AjaxImageButtonLib { public class MySrvImageButton : System.Web.UI.WebControls.ImageButton, IScriptControl { public string HoverImageUrl { get { object value = ViewState["hoverImageUrl"]; return (value == null) ? string.Empty : (string)value; } set { ViewState["hoverImageUrl"] = value; } } public string ClientClickFunction { get { object value = ViewState["clientClickFunction"]; return (value == null) ? string.Empty : (string)value; } set { ViewState["clientClickFunction"] = value; } } public MySrvImageButton() : base() { } protected override void OnPreRender(EventArgs e) { base.OnPreRender(e); ScriptManager scriptManager = ScriptManager.GetCurrent(Page); if (scriptManager == null) { throw new InvalidOperationException ("ScriptManager required on the page."); } scriptManager.RegisterScriptControl(this); } protected override void Render(HtmlTextWriter writer) { base.Render(writer); if (!DesignMode) { ScriptManager.GetCurrent(this.Page).RegisterScriptDescriptors(this); } } IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors() { ScriptControlDescriptor desc = new ScriptControlDescriptor("AjaxImageButtonLib.MySrvImageButton", ClientID); if (!string.IsNullOrEmpty(HoverImageUrl)) { desc.AddProperty("hoverImageUrl", HoverImageUrl); } if (!string.IsNullOrEmpty(ClientClickFunction)) { desc.AddEvent("click", ClientClickFunction); } yield return desc; } IEnumerable<ScriptReference> IScriptControl.GetScriptReferences() { yield return new ScriptReference(Page.ResolveUrl("~/SrvImageButton.js")); } } }

首先，我們注意到我們要創(chuàng)建的新控件MySrvImageButton繼承自ASP.NET服務(wù)器控件ImageButton，并繼承了接口IScriptControl。

有了前面的理論描述，在此，我們省略對于其中幾個常規(guī)方法的描述。

接下來，我們要構(gòu)建這個控件庫（即程序集）。右擊此庫工程，并點擊“生成”命令以生成程序集AjaxImageButtonLib.dll，此庫文件中即包含了我們的服務(wù)器控件。

(三)創(chuàng)建客戶端JavaScript代碼

這里創(chuàng)建的客戶端控件類相應(yīng)的JavaScript文件ImageButton.js在內(nèi)容上完全相同，只不過為了區(qū)別起見，我們進行了某些地方的重新命名罷了。在此不再贅述。

(四)在示例網(wǎng)頁中應(yīng)用構(gòu)建的新控件

以鼠標右擊前面網(wǎng)站AjaxServCtrlTest，把它設(shè)置為“啟動項目”。事實上，因為這個網(wǎng)站工程與前面的類庫工程創(chuàng)建于同一個方案下，所以，在前面生成程序集AjaxImageButtonLib.dll的一結(jié)束，新建的服務(wù)器控件就被自動添加到Visual Studio 2005工具欄中，如下圖3所示。于是，我們可以直接把這個控件拖動到示例網(wǎng)頁Default.aspx中。

圖3：拖動新建的服務(wù)器控件到示例網(wǎng)頁中

根據(jù)前面的控件代碼實現(xiàn)，不出所料，點擊上圖3中的圖形按鈕控件，即可在其相應(yīng)的“屬性”對話框中設(shè)置這個控件的hoverImageUrl屬性，而且指定其ClientClickFunction方法（其實正是此控件的click事件處理器函數(shù)指針）。

注意，因為控件代碼中的方法GetScriptReferences已經(jīng)為我們自動生成了前面提到的$create方法，所以我們不需要再在ScriptManager中注冊在本篇中創(chuàng)建的JavaScript文件—SrvImageButton.js了。

(五)運行及性能簡析

現(xiàn)在，請按F5鍵運行此頁面并移動鼠標到圖像按鈕上觀察，你會注意到結(jié)果與上篇中的效果一致（即在鼠標移動切換新圖像時，這些動作都發(fā)生于客戶瀏覽器端而不再與服務(wù)器端相關(guān)）。下圖4相應(yīng)于此示例頁面運行時刻快照。

圖4：示例網(wǎng)頁運行時刻屏幕快照

通過以鼠標右擊網(wǎng)頁并選擇彈出菜單中的“查看源文件”觀察上、下篇中示例頁面相應(yīng)的源碼，我們會注意到其內(nèi)容基本是一致的。另外，通過使用Fiddler觀察這兩個示例頁面下載到客戶端時各模塊的大小，你也會注意到基本一致，如下面圖5所示。

圖5：兩個示例頁面下載到客戶端時各模塊大小比較

因為本文兩個例子極為簡單，所以其性能基本平衡。但隨著服務(wù)端編程的復(fù)雜化，本篇中基于服務(wù)器端控件的擴展方案應(yīng)該有較大的性能損耗。但應(yīng)該仍具有令人滿意的效果，這也正是AJAX Control Toolkit控件數(shù)量急劇增加的重要原因之一。而上篇中的方案基于“純粹”（相對而言）的客戶端，即使性能上與本篇中方案相差無幾，但是卻明顯多出了跨越服務(wù)器端平臺的優(yōu)勢，這也正是上篇中方案吸引人的主要原因。

六、總結(jié)

雖然以上、下兩個篇幅形成此文，但是這也僅能通過簡短的例子向你闡述了開發(fā)ASP.NETAJAX框架中的Ajax控件所涉及的主要技術(shù)。盡管目前的ASP.NET AJAX框架已經(jīng)形成正規(guī)的1.0版本，而且這個框架為基于AJAX技術(shù)開發(fā)以ASP.NET 2.0為主的Web應(yīng)用提供了全方位支持，但是這個框架仍然在許多方面有待改進。事實上，我們可以進一步沿著ASP.NET AJAX客戶端與服務(wù)器端架構(gòu)層次關(guān)系圖進一步擴展其底層。當然，在此框架與Visual Studio整合方面也存在相當?shù)耐诰驖摿Α?/p>

如今，隨著微軟Silverlight技術(shù)的推出，ASP.NET AJAX框架的重要性日顯突出。自然，與此框架相關(guān)的控件開發(fā)也必將在這一大環(huán)境中占居著重要的位置。

轉(zhuǎn)載于:https://www.cnblogs.com/xujiaci/archive/2007/09/13/891417.html

總結(jié)

以上是生活随笔為你收集整理的探讨微软ASP.NET AJAX控件开发技术（服务器端）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。