概述ASP.NET中的HTML Map控件
在本文中，我將向你展示如何使用ASP.NET AJAX框架對(duì)添加可點(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ì)信息都是通過(guò)AJAX異步方式從遠(yuǎn)程服務(wù)中取得的。
一、簡(jiǎn)介
首先，我們注意到，ASP.NET 2.0中也提供了一個(gè)服務(wù)器控件ImageMap。此控件是一個(gè)讓你可以在圖片上定義熱點(diǎn)(HotSpot)區(qū)域的服務(wù)器控件。用戶可以通過(guò)點(diǎn)擊這些熱點(diǎn)區(qū)域進(jìn)行回發(fā)(PostBack)操作或者轉(zhuǎn)發(fā)到某個(gè)URL地址。典型情況下，該控件用于需要對(duì)某張圖片的局部范圍進(jìn)行互動(dòng)操作。然而，這個(gè)控件的不足之處在于，在點(diǎn)擊這些熱點(diǎn)區(qū)域進(jìn)行回發(fā)時(shí)將導(dǎo)致整個(gè)Web頁(yè)面的刷新。
在本文中，我們將基于ASP.NET AJAX技術(shù)對(duì)普通的HTML Map控件加以擴(kuò)展，以達(dá)到在點(diǎn)擊其上的熱點(diǎn)區(qū)域時(shí)，在顯示有關(guān)詳細(xì)信息時(shí)僅僅導(dǎo)致局部的頁(yè)面更新，從而使之適應(yīng)Web 2.0應(yīng)用程序開(kāi)發(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)置支持語(yǔ)言，***點(diǎn)擊OK。
然后，添加一個(gè)新的ASPX頁(yè)面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工具欄中沒(méi)有提供現(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)信息被顯示出來(lái)。有關(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è)命名為L(zhǎng)ocationService.asmx的Web服務(wù)。
注意，在本例中我們僅想通過(guò)這個(gè)Web服務(wù)來(lái)模擬實(shí)戰(zhàn)環(huán)境中的一種簡(jiǎn)單邏輯。因此，它僅包含一個(gè)Web方法;此方法負(fù)責(zé)模擬從服務(wù)器數(shù)據(jù)庫(kù)中取得客戶端需要的信息。
在此，為了使這個(gè)ASP.NET Web服務(wù)能夠被從客戶端以AJAX方式加以調(diào)用，必須把ScriptService屬性添加到類聲明的前面，如下所示：
- [ScriptService()]
- public class LocationService : System.Web.Services.WebService
- {
- 現(xiàn)在，編寫(xiě)我們的Web方法：
- [WebMethod]
- [ScriptMethod(UseHttpGet = false, ResponseFormatResponseFormat =
ResponseFormat.Json)]- public string GetAreaInfo(string area)
- {
- return area;
- }
根據(jù)權(quán)威人士建議，為了安全起見(jiàn)，我們一般要使用HttpPost(或者HttpGet= false)方式訪問(wèn)Web方法。然后，我們把返回的數(shù)據(jù)格式配置為JSON格式(默認(rèn)方式即為JSON方式)。
為了簡(jiǎn)化起見(jiàn)，這里的GetAreaInfo方法僅僅返回輸入?yún)?shù)的相同值;但在實(shí)際開(kāi)發(fā)中，我們應(yīng)該在此替換以從數(shù)據(jù)庫(kù)中檢索數(shù)據(jù)。
到目前為止，我們已經(jīng)成功創(chuàng)建從客戶端以AJAX方式加以調(diào)用的Web服務(wù)。
但是，我們還要對(duì)頁(yè)面中的服務(wù)器控件ScriptManager進(jìn)行一些適當(dāng)?shù)呐渲茫缦滤荆?/P>
- <asp:ScriptManager ID="ScriptManager1" runat="server">
- <services>
- <asp:servicereference path="~/LocationService.asmx" />
- </services>
- </asp:ScriptManager>
本文介紹ASP.NET中的HTML Map控件
【編輯推薦】
