【摘要】在本文中，我將向你展示如何使用ASP.NET AJAX框架對添加可點(diǎn)擊的熱點(diǎn)的HTML Map控件進(jìn)行擴(kuò)展。經(jīng)擴(kuò)展后，當(dāng)我們的鼠標(biāo)移動到這些熱點(diǎn)上后，即彈出關(guān)于這些熱點(diǎn)的詳細(xì)信息;但是，這些詳細(xì)信息都是通過AJAX異步方式從遠(yuǎn)程服務(wù)中取得的。 一、 簡介 首先，我們注意到，ASP.NET 2.0中也提供了一個服務(wù)器控件ImageMap。此控件是一個讓你可以在圖片上定義熱點(diǎn)(HotSpot)區(qū)域的服務(wù)器控件。用戶可以通過點(diǎn)擊這些熱點(diǎn)區(qū)域進(jìn)行回發(fā)(PostBack)操作或者轉(zhuǎn)發(fā)到某個URL地址。典型情況下，該控件用于需要對某張圖片的局部范圍進(jìn)行互動操作。然而，這個控件的不足之處在于，在點(diǎn)擊這些熱點(diǎn)區(qū)域進(jìn)行回發(fā)時將導(dǎo)致整個Web頁面的刷新。 在本文中，我們將基于ASP.NET AJAX技術(shù)對普通的HTML Map控件加以擴(kuò)展，以達(dá)到在點(diǎn)擊其上的熱點(diǎn)區(qū)域時，在顯示有關(guān)詳細(xì)信息時僅僅導(dǎo)致局部的頁面更新，從而使之適應(yīng)Web 2.0應(yīng)用程序開發(fā)潮流。 下面圖1展示了本文示例程序運(yùn)行時的一個快照。 圖1.使用AJAX技術(shù)擴(kuò)展后的Map控件熱點(diǎn)點(diǎn)擊僅引發(fā)局部更新。 從上圖中看到，當(dāng)鼠標(biāo)懸浮于上圖太陽系中的木星(木星)上時，有關(guān)該星球的細(xì)節(jié)信息將以一個彈出窗口形式友好地展示出來(注：此圖取自MSDN，這里沒有翻譯相應(yīng)單詞)。 二、 創(chuàng)建一個AJAX示例網(wǎng)站 啟動Visual Studio 2005，選擇“文件→新建網(wǎng)站…”，然后選擇“ASP.NET AJAX-Enabled Web Site”模板，命名工程為“Ajax_ImageMap”，并選擇C#作為內(nèi)置支持語言，最后點(diǎn)擊OK。 然后，添加一個新的ASPX頁面ImageMap.aspx，并且按如下所示修改其中的HTML代碼部分：

以下是引用片段： <IMG SRC="images\solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0 ??? ALT="Solar System" USEMAP="#SystemMap"> ??????? <MAP NAME="SystemMap"> ??????????? <AREA SHAPE="rect" COORDS="0,0,82,126" ??????????????? 'sun');"? οnmοuseοut="javascript:HidePopup();"> ??????????? <AREA SHAPE="circle" COORDS="90,58,3" ??????????????? 'merglobe');"? οnmοuseοut="javascript:HidePopup();" > ??????????? <AREA SHAPE…………（省略） ??????? </MAP>

在上面代碼中，我們添加了一個HTML 元素和一個HTML 元素(注：VS2005工具欄中沒有提供現(xiàn)成的控件，只能手工添加)。其中定義了各個星球相應(yīng)的熱點(diǎn)形狀及坐標(biāo)信息。而且，每一個熱點(diǎn)都有一個相應(yīng)的 JavaScript函數(shù)與之相關(guān)聯(lián)。當(dāng)鼠標(biāo)在這些熱點(diǎn)上移動時，這兩個函數(shù)將被激活，相應(yīng)信息被顯示出來。有關(guān)這兩個函數(shù)，我們將在后面詳細(xì)討論。 三、 創(chuàng)建一個AJAX服務(wù) 現(xiàn)在，我們需要創(chuàng)建一個新的Web服務(wù)，由它負(fù)責(zé)與熱點(diǎn)點(diǎn)擊相關(guān)的數(shù)據(jù)檢索任務(wù)。其實(shí)，這里所謂的“AJAX服務(wù)”，其功能與通常的Web服務(wù)是一致的。有關(guān)它們之間的細(xì)節(jié)區(qū)別在此不再贅述?，F(xiàn)在，你可以右擊工程，然后添加一個命名為LocationService.asmx的Web服務(wù)。 注意，在本例中我們僅想通過這個Web服務(wù)來模擬實(shí)戰(zhàn)環(huán)境中的一種簡單邏輯。因此，它僅包含一個Web方法;此方法負(fù)責(zé)模擬從服務(wù)器數(shù)據(jù)庫中取得客戶端需要的信息。 在此，為了使這個ASP.NET Web服務(wù)能夠被從客戶端以AJAX方式加以調(diào)用，必須把ScriptService屬性添加到類聲明的前面，如下所示：

以下是引用片段： [ScriptService()] 　　public?class?LocationService?:?System.Web.Services.WebService 　　{

現(xiàn)在，編寫我們的Web方法：

以下是引用片段： 　[WebMethod] 　　[ScriptMethod(UseHttpGet?=?false,?ResponseFormat?=?ResponseFormat.Json)] 　　public?string?GetAreaInfo(string?area) 　　{ 　　return?area; 　　}

根據(jù)權(quán)威人士建議，為了安全起見，我們一般要使用HttpPost(或者HttpGet= false)方式訪問Web方法。然后，我們把返回的數(shù)據(jù)格式配置為JSON格式(默認(rèn)方式即為JSON方式)。 為了簡化起見，這里的GetAreaInfo方法僅僅返回輸入?yún)?shù)的相同值;但在實(shí)際開發(fā)中，我們應(yīng)該在此替換以從數(shù)據(jù)庫中檢索數(shù)據(jù)。 到目前為止，我們已經(jīng)成功創(chuàng)建從客戶端以AJAX方式加以調(diào)用的Web服務(wù)。 但是，我們還要對頁面中的服務(wù)器控件ScriptManager進(jìn)行一些適當(dāng)?shù)呐渲?#xff0c;如下所示：

以下是引用片段： <asp:ScriptManager ID="ScriptManager1" runat="server"> <services> ? <asp:servicereference path="~/LocationService.asmx" /> </services> </asp:ScriptManager>

<?xml:namespace prefix = asp /> 在此，我們僅在節(jié)點(diǎn)下加入了一個服務(wù)參考，但其作用如何呢? 從生成的HTML源碼分析，上面的配置將生成如下所示內(nèi)容：

以下是引用片段： <script src="LocationService.asmx/jsdebug" type="text/javascript"></script>

這里的腳本標(biāo)簽引用了一個JavaScript文件LocationService.asmx/jsdebug。其實(shí)這是一個Web服務(wù)代理類。正是通過此代理類，我們才得以從客戶端以異步方式調(diào)用服務(wù)器端的Web服務(wù)。 更有意思的是，如果你簡單地復(fù)制顯示在上面的路徑到瀏覽器中，你將看到一個在運(yùn)行時刻由AJAX環(huán)境生成的JavaScript文件—此文件使腳本服務(wù)調(diào)用可用。有關(guān)代理類，我們不再深入討論。 下面，我們來看如何創(chuàng)建一個定制的客戶端類。 四、 創(chuàng)建客戶端定制類 我們知道ASP.NET AJAX框架的重大“發(fā)明”之一就是，它引入了面向?qū)ο蟮腏avaScript編程模型。現(xiàn)在，借助于JavaScript設(shè)計模式，我們可以輕松地創(chuàng)建自己的模板或類，加入繼承概念，創(chuàng)建接口與枚舉等。 在本文中，我們將開發(fā)一個封裝所有本示例中要求功能的客戶端類。 現(xiàn)在，右擊工程，并新添加一個名為ImageMap的JavaScript文件。在此文件中，我們將定義一個新的命名空間MyServices;這個命名空間將包含我們要開發(fā)的客戶端類。如下所示：

以下是引用片段： Type.registerNamespace("MyServices");

接下來，我們定義要創(chuàng)建的客戶端類的構(gòu)造函數(shù)：

以下是引用片段： MyServices.Location = function (uiElement, uiBody) { MyServices.Location.initializeBase(this); this._uiElement = uiElement; this._uiBody = uiBody; this._xAxis = 0; this._yAxis = 0; }

一個模板或類的構(gòu)造函數(shù)也只不過是一個普通的JavaScript函數(shù)。該構(gòu)造器共有兩個參數(shù)：uiElement和uiBody。 這兩個參數(shù)都將用于描述在頁面顯示的彈出窗口。另外兩個私有變量_xAxis和_yAxis用于描述彈出窗口的顯示位置。典型情況下，我們最好在構(gòu)造器中聲明所有的私有成員。 接下來，我們將使用原型設(shè)計模式編寫該類中的成員函數(shù)和屬性：

以下是引用片段： MyServices.Location.prototype = { ? get_uiElement: function() ? { ??? return this._uiElement; ? }, ?? set_uiElement: function(value) ? { ??? this._uiElement = value; ? }, ? get_uiBody: function() ? { ??? return this._uiBody; ? }, ?? set_uiBody: function(value) ? { ??? this._uiBody = value; ? },

注意，這里的UI元素屬性方法的定義方式非常類似于.NET中各種語言中的定義形式。 下面的成員函數(shù)是我們的重點(diǎn)，它負(fù)責(zé)調(diào)用遠(yuǎn)程的Web服務(wù)：

以下是引用片段： 　　ShowPopupinfo: function(event, areaName) { ? MyServices.LocationService.GetAreaInfo(areaName, ? Function.createDelegate(this, this.OnCompleted), ? this.OnError,? //負(fù)責(zé)進(jìn)行錯誤處理的回叫函數(shù) ? this.OnTimeOut); //負(fù)責(zé)進(jìn)行超時處理的回叫函數(shù) ? this._xAxis = event.clientX; ? this._yAxis = event.clientY; }

上面的代碼展示的是非常典型的從客戶端調(diào)用Web服務(wù)的方法： 1)形式與調(diào)用一個普通的本地方法幾乎一樣方便; 2)Function.createDelegate函數(shù)是ASP.NET AJAX客戶端開發(fā)中的極為重要的全局函數(shù)。創(chuàng)建此函數(shù)的原始目的之一是解決this關(guān)鍵字的問題。在一個由一個DOM元素引發(fā)的事件處理器中，this關(guān)鍵字總是引用此DOM元素而不是類本身。但在此，我們使用這個函數(shù)的理由是，使得AJAX環(huán)境在與激發(fā)Web服務(wù)的相同的類實(shí)例中調(diào)用成功時的回叫函數(shù)。當(dāng)你需要引用客戶端類的屬性和方法時，這是相當(dāng)重要的。簡言之，使用此函數(shù)將使得訪問調(diào)用Web服務(wù)的客戶端類的屬性和方法安全而準(zhǔn)確。否則，進(jìn)行異步調(diào)用的客戶端類實(shí)例將為null，因?yàn)閃eb服務(wù)的響應(yīng)是在另一個不同的上下文中執(zhí)行的—這個上下文不再等同于發(fā)出異步Web調(diào)用請求的那個上下文。 3)有意思的是，這里的GetAreaInfo方法并不是我們在前面創(chuàng)建的Web服務(wù)中的那個，而是屬于在運(yùn)行時刻創(chuàng)建的Web服務(wù)代理類—此代理類作為一個客戶端代理訪問服務(wù)器端的ASMX Web服務(wù)。 上面ShowPopupInfo函數(shù)中的最后兩行代碼中，使用事件的輸入?yún)?shù)設(shè)置兩個私有變量xAxis和yAxis的值。我們在此的目的是，在與用戶點(diǎn)擊位置盡可能近的地方顯示彈出窗口。 下面是調(diào)用成功時對應(yīng)的回叫函數(shù)的實(shí)現(xiàn)代碼：

以下是引用片段： OnCompleted: function(result, userContext, methodName) { ? var uiElement = $get(this.get_uiElement()); ? var uiBody = $get(this.get_uiBody()); ? if (uiBody != null) ? { ??? var textNode = uiBody.firstChild; ??? if (!textNode) ??? { ????? textNode = document.createTextNode(result); ????? uiBody.appendChild(textNode); ??? } ??? else ??? { ????? textNode.nodeValue = result; ??? } ??? if (uiElement != null) ??? { ????? uiElement.style.visibility = "visible"; ????? uiElement.style.display = "inline"; ????? uiElement.style.left = this._xAxis + "px"; ????? uiElement.style.top = this._yAxis + "px"; ??? } ? } },

內(nèi)容相當(dāng)簡單—把從服務(wù)器端返回的數(shù)據(jù)設(shè)置為彈出窗口的顯示內(nèi)容并根據(jù)情況確保顯示此窗口。 在創(chuàng)建客戶端類的最后，我們還必須告訴AJAX框架在客戶端注冊之，以便可以從客戶端訪問它：

以下是引用片段： MyServices.Location.registerClass("MyServices.Location");

至此，客戶端類MyServices.Location已經(jīng)成功創(chuàng)建。那么，如何使用它呢? 首先，我們需要在頁面加載時定義客戶端類的一個新的實(shí)例。為此，我們需要在pageLoad函數(shù)中編程：

以下是引用片段： 　var?location?=?null; 　　function?pageLoad(sender,?args)?{ 　　location?=?new?MyServices.Location("modal",?"modalBody"); 　　location.HidePopupInfo(); 　　}

上面的代碼簡單地創(chuàng)建MyServices.Location類的一個新的實(shí)例。然后調(diào)用客戶端類的成員函數(shù)之一來隱藏頁面中的彈出窗口。為什么我們在pageLoad函數(shù)中創(chuàng)建客戶端類的一個實(shí)例呢?原因在于，當(dāng)AJAX環(huán)境控制流程到達(dá)pageLoad函數(shù)時，所有的AJAX客戶端和用戶定義的JavaScript代碼都已經(jīng)被成功加載。因此，這一時刻我們可以安全地訪問任何用戶或系統(tǒng)定義的JavaScript代碼。 其它幾個工具函數(shù)比較簡單，在此不再贅述。 五、 總結(jié) 在本文中，我向你展示了如何通過創(chuàng)建一個AJAX服務(wù)和創(chuàng)建自己定制的客戶端類來擴(kuò)展HTML Map控件。在擴(kuò)展后的控件中，當(dāng)點(diǎn)擊圖像中的某個區(qū)域時，我們可以通過新型的AJAX方式來給出相關(guān)細(xì)節(jié)信息，而不必刷新整個Web頁面。盡管在大部分Web應(yīng)用中我們較少應(yīng)用到這種Map控件(也許因此VS2005工具欄中省略之)，但如果開發(fā)大量圖片、圖像及地圖操作相關(guān)的Web應(yīng)用時，基于本文AJAX改造后的Map控件一定會讓你的Web應(yīng)用更加絢爛多彩。 【附】本文源碼調(diào)試環(huán)境：Windows XP專業(yè)版+Visual Studio 2005+ASP.NET AJAX 1.0。下載源碼

總結(jié)

以上是生活随笔為你收集整理的用ASP.NET AJAX框架扩展HTML Map控件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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