如何理解ASP.NET中的HTML Map控件

如何理解ASP.NET中的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應用程序開發潮流。

二、創建一個AJAX示例網站

啟動Visual Studio 2005，選擇“文件→新建網站…”，然后選擇“ASP.NET AJAX-Enabled Web Site”模板，命名工程為“Ajax_ImageMap”，并選擇C#作為內置支持語言，***點擊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" 
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, ResponseFormatResponseFormat = 
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>

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。