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

如何理解ASP.NET中的HTML Map控件，很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

我將向你展示如何使用ASP.NET AJAX框架對添加可點(diǎn)擊的熱點(diǎn)的HTML Map控件進(jìn)行擴(kuò)展。經(jīng)擴(kuò)展后，當(dāng)我們的鼠標(biāo)移動(dòng)到這些熱點(diǎn)上后，即彈出關(guān)于這些熱點(diǎn)的詳細(xì)信息;但是，這些詳細(xì)信息都是通過AJAX異步方式從遠(yuǎn)程服務(wù)中取得的。

一、簡介

首先，我們注意到，ASP.NET 2.0中也提供了一個(gè)服務(wù)器控件ImageMap。此控件是一個(gè)讓你可以在圖片上定義熱點(diǎn)(HotSpot)區(qū)域的服務(wù)器控件。用戶可以通過點(diǎn)擊這些熱點(diǎn)區(qū)域進(jìn)行回發(fā)(PostBack)操作或者轉(zhuǎn)發(fā)到某個(gè)URL地址。典型情況下，該控件用于需要對某張圖片的局部范圍進(jìn)行互動(dòng)操作。然而，這個(gè)控件的不足之處在于，在點(diǎn)擊這些熱點(diǎn)區(qū)域進(jìn)行回發(fā)時(shí)將導(dǎo)致整個(gè)Web頁面的刷新。

在本文中，我們將基于ASP.NET AJAX技術(shù)對普通的HTML Map控件加以擴(kuò)展，以達(dá)到在點(diǎn)擊其上的熱點(diǎn)區(qū)域時(shí)，在顯示有關(guān)詳細(xì)信息時(shí)僅僅導(dǎo)致局部的頁面更新，從而使之適應(yīng)Web 2.0應(yīng)用程序開發(fā)潮流。

二、創(chuàng)建一個(gè)AJAX示例網(wǎng)站

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

然后，添加一個(gè)新的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> 

在上面代碼中，我們添加了一個(gè)HTML 元素和一個(gè)HTML 元素(注：VS2005工具欄中沒有提供現(xiàn)成的控件，只能手工添加)。其中定義了各個(gè)星球相應(yīng)的熱點(diǎn)形狀及坐標(biāo)信息。而且，每一個(gè)熱點(diǎn)都有一個(gè)相應(yīng)的 onmouseover和onmouseout JavaScript函數(shù)與之相關(guān)聯(lián)。當(dāng)鼠標(biāo)在這些熱點(diǎn)上移動(dòng)時(shí)，這兩個(gè)函數(shù)將被激活，相應(yīng)信息被顯示出來。有關(guān)這兩個(gè)函數(shù)，我們將在后面詳細(xì)討論。

三、創(chuàng)建一個(gè)AJAX服務(wù)

現(xiàn)在，我們需要?jiǎng)?chuàng)建一個(gè)新的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)在，你可以右擊工程，然后添加一個(gè)命名為LocationService.asmx的Web服務(wù)。

注意，在本例中我們僅想通過這個(gè)Web服務(wù)來模擬實(shí)戰(zhàn)環(huán)境中的一種簡單邏輯。因此，它僅包含一個(gè)Web方法;此方法負(fù)責(zé)模擬從服務(wù)器數(shù)據(jù)庫中取得客戶端需要的信息。

在此，為了使這個(gè)ASP.NET Web服務(wù)能夠被從客戶端以AJAX方式加以調(diào)用，必須把ScriptService屬性添加到類聲明的前面，如下所示：

[ScriptService()]  
public class LocationService : System.Web.Services.WebService  
{  
現(xiàn)在，編寫我們的Web方法：  
[WebMethod]  
[ScriptMethod(UseHttpGet = false, ResponseFormatResponseFormat = 
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ù)呐渲?，如下所示?/p>

<asp:ScriptManager ID="ScriptManager1" runat="server"> <services> <asp:servicereference path="~/LocationService.asmx" /> </services> </asp:ScriptManager>

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