使用ASP.NET AJAX架構擴充HTML Map控制項

【摘要】在本文中，我將向你展示如何使用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=http://chinaz.com/Program/.NET/"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"                 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 　　{

共3頁: 上一頁 1 [2] [3] 下一頁