使用ASP.NET AJAX框架擴充HTML Map控件

作者：Eve Cole 更新時間：2009-07-01 16:44:00

【摘要】在本文中，我將向你展示如何使用ASP.NET AJAX框架對新增可點選的熱點的HTML Map控制項進行擴充。經過擴展後，當我們的滑鼠移動到這些熱點上後，即彈出關於這些熱點的詳細資訊;但是，這些詳細資訊都是透過AJAX非同步方式從遠端服務中取得的。

一、簡介

首先，我們注意到，ASP.NET 2.0中也提供了一個伺服器控制項ImageMap。此控制項是讓你可以在圖片上定義熱點(HotSpot)區域的伺服器控制項。使用者可以點選這些熱點區域進行回發(PostBack)操作或轉送到某個URL位址。典型情況下，此控制項用於需要對某張圖片的局部範圍進行互動操作。然而，這個控制項的缺點在於，在點擊這些熱點區域進行回發時將導致整個Web頁面的刷新。

在本文中，我們將基於ASP.NET AJAX技術對普通的HTML Map控制項加以擴展，以達到在點擊其上的熱點區域時，在顯示有關詳細資訊時僅導致局部的頁面更新，從而使之適應Web 2.0應用程式開發潮流。

下面圖1展示了本文範例程式運行時的一個快照。

圖1.使用AJAX技術擴充後的Map控制熱點點擊僅引發局部更新。

從上圖中看到，當滑鼠懸浮於上圖太陽系中的木星(木星)上時，有關該星球的細節資訊將以一個彈出視窗形式友好地展示出來(註：此圖取自MSDN，這裡沒有翻譯相應單字)。

二、建立一個AJAX範例網站

啟動Visual Studio 2005，選擇“檔案→新建網站…”，然後選擇“ASP.NET AJAX-Enabled Web Site”模板，命名工程為“Ajax_ImageMap”，並選擇C#作為內建支援語言，最後點擊OK。

然後，新增一個新的ASPX頁面ImageMap.aspx，並且如下所示修改其中的HTML程式碼部分：

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

在上面程式碼中，我們加入了一個HTML 元素和一個HTML元素(註：VS2005工具列中沒有提供現成的控制項，只能手動新增)。其中定義了各個星球對應的熱點形狀及座標資訊。而且，每個熱點都有一個對應的onmouseover和onmouseout JavaScript函數與之相關聯。當滑鼠在這些熱點上移動時，這兩個函數將被激活，相應資訊被顯示出來。有關這兩個函數，我們將在後面詳細討論。

三、創建一個AJAX服務

現在，我們需要創建一個新的Web服務，由它負責與熱點點擊相關的資料檢索任務。其實，這裡所謂的“AJAX服務”，其功能與通常的Web服務是一致的。有關它們之間的細節區別在此不再贅述。現在，你可以右鍵點選工程，然後新增一個命名為LocationService.asmx的Web服務。

請注意，在本例中我們僅想透過這個Web服務來模擬實戰環境中的一個簡單邏輯。因此，它僅包含一個Web方法;此方法負責模擬從伺服器資料庫中取得客戶端所需的資訊。

在此，為了讓這個ASP.NET Web服務能夠被從客戶端以AJAX方式加以調用，必須把ScriptService屬性加入到類別聲明的前面，如下所示：

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

現在，編寫我們的Web方法：

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

根據權威人士建議，為了安全起見，我們一般要使用HttpPost(或HttpGet= false)方式存取Web方法。然後，我們把回傳的資料格式配置為JSON格式(預設方式即為JSON方式)。

為了簡化起見，這裡的GetAreaInfo方法只是傳回輸入參數的相同值;但在實際開發中，我們應該在此替換以從資料庫中檢索資料。

到目前為止，我們已經成功建立從客戶端以AJAX方式加以呼叫的Web服務。

但是，我們也要對頁面中的伺服器控制項ScriptManager進行一些適當的配置，如下所示：

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

在此，我們僅在節點下加入了一個服務參考，但其作用如何呢?

從生成的HTML源碼分析，上面的配置將生成如下所示內容：

以下是引用片段：

這裡的腳本標籤引用了一個JavaScript檔案LocationService.asmx/jsdebug。其實這是一個Web服務代理類別。正是透過此代理類，我們才得以從客戶端以非同步方式呼叫伺服器端的Web服務。

更有趣的是，如果你簡單地複製顯示在上面的路徑到瀏覽器中，你將看到一個在運行時刻由AJAX環境產生的JavaScript檔案—此檔案使腳本服務呼叫可用。有關代理類，我們不再深入討論。

下面，我們來看看如何建立一個客製化的客戶端類別。

四、建立客戶端客製化類別

我們知道ASP.NET AJAX框架的重大「發明」之一就是，它引入了物件導向的JavaScript程式設計模型。現在，借助JavaScript設計模式，我們可以輕鬆地建立自己的範本或類別，加入繼承概念，建立介面與枚舉等。

在本文中，我們將開發一個封裝所有本範例中要求功能的客戶端類別。

現在，右鍵點選工程，並新新增一個名為ImageMap的JavaScript檔案。在此文件中，我們將定義一個新的命名空間MyServices;這個命名空間將包含我們要開發的客戶端類別。如下圖所示：

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

接下來，我們定義要建立的客戶端類別的建構子：

以下是引用片段：

MyServices.Location = function (uiElement, uiBody) {
MyServices.Location.initializeBase(this);
this._uiElement = uiElement;
this._uiBody = uiBody;
this._xAxis = 0;
this._yAxis = 0;
}

一個模板或類別的建構函式也只不過是個普通的JavaScript函數。此構造器共有兩個參數：uiElement和uiBody。

這兩個參數都將用於描述在頁面顯示的彈出視窗。另外兩個私有變數_xAxis和_yAxis用來描述彈出視窗的顯示位置。典型情況下，我們最好在構造器中宣告所有的私有成員。

接下來，我們將使用原型設計模式來編寫該類別中的成員函數和屬性：

以下是引用片段：

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中各種語言中的定義形式。

下面的成員函數是我們的重點，它負責呼叫遠端的Web服務：

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

上面的程式碼展示的是非常典型的從客戶端呼叫Web服務的方法：

1)形式與呼叫一個普通的本地方法幾乎一樣方便;

2)Function.createDelegate函數是ASP.NET AJAX客戶端開發中的極為重要的全域函數。創建此函數的原始目的之一是解決this關鍵字的問題。在一個由一個DOM元素引發的事件處理器中，this關鍵字總是引用此DOM元素而不是類別本身。但在此，我們使用這個函數的理由是，使得AJAX環境在與激發Web服務的相同的類別實例中呼叫成功時的回叫函數。當你需要引用客戶端類別的屬性和方法時，這是相當重要的。簡言之，使用此函數將使得存取呼叫Web服務的客戶端類別的屬性和方法安全且準確。否則，進行非同步呼叫的客戶端類別實例將為null，因為Web服務的回應是在另一個不同的上下文中執行的—這個上下文不再等同於發出非同步Web呼叫請求的那個上下文。

3)有趣的是，這裡的GetAreaInfo方法並不是我們在前面創建的Web服務中的那個，而是屬於在運行時刻創建的Web服務代理類別—此代理類別作為一個客戶端代理訪問伺服器端的ASMX Web服務。

上面ShowPopupInfo函數中的最後兩行程式碼中，使用事件的輸入參數設定兩個私有變數xAxis和yAxis的值。我們在此的目的是，在與用戶點擊位置盡可能近的地方顯示彈出視窗。

下面是呼叫成功時對應的回叫函數的實作程式碼：

以下是引用片段：

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";
}
}
},

內容相當簡單—把從伺服器端傳回的資料設定為彈出視窗的顯示內容並根據情況確保顯示此視窗。

在創建客戶端類別的最後，我們還必須告訴AJAX框架在客戶端註冊之，以便可以從客戶端存取它：

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

至此，客戶端類別MyServices.Location已成功建立。那麼，如何使用它呢?

首先，我們需要在頁面載入時定義客戶端類別的一個新的實例。為此，我們需要在pageLoad函數中編程：

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

上面的程式碼簡單地建立MyServices.Location類別的一個新的實例。然後呼叫客戶端類別的成員函數之一來隱藏頁面中的彈出視窗。為什麼我們在pageLoad函數中建立客戶端類別的一個實例呢?原因在於，當AJAX環境控制流程到達pageLoad函數時，所有的AJAX客戶端和使用者定義的JavaScript程式碼都已經成功載入。因此，這一刻我們可以安全地存取任何使用者或系統定義的JavaScript程式碼。

其它幾個工具函數比較簡單，在此不再贅述。

五、總結

在本文中，我向你展示如何透過建立一個AJAX服務和建立自己自訂的客戶端類別來擴充HTML Map控制項。在擴展後的控制項中，當點擊圖像中的某個區域時，我們可以透過新型的AJAX方式來給出相關細節信息，而不必刷新整個Web頁面。雖然在大部分Web應用中我們較少應用到這種Map控制(也許因此VS2005工具列中省略之)，但如果開發大量圖片、圖像及地圖操作相關的Web應用時，基於本文AJAX改造後的Map控制一定會讓你的網路應用程式更加絢爛多彩。

【附】本文原始碼偵錯環境：Windows XP專業版+Visual Studio 2005+ASP.NET AJAX 1.0。