在本文中，我将向你展现怎么运用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代码部分：

<IMGSRC="images\solarsys.gif"WIDTH=504HEIGHT=126BORDER=0
ALT="SolarSystem"USEMAP="#SystemMap">
<MAPNAME="SystemMap">
<AREASHAPE="rect"COORDS="0,0,82,126"
onmouseover="javascript:GetAreaInfo(event,'sun');"
onmouseout="javascript:HidePopup();">
<AREASHAPE="circle"COORDS="90,58,3"
onmouseover="javascript:GetAreaInfo(event,'merglobe');"
onmouseout="javascript:HidePopup();"
>
<AREASHAPE 
</MAP>

在上面代码中，咱们增加了一个HTML 元素和一个HTML 元素(注：VS2005工具栏中没有供给现成的控件，只能手艺增加)。其间界说了各个星球相应的热门形状及坐标信息。并且，每一个热门都有一个相应的 onmouseover和onmouseout JavaScript函数与之相关联。当鼠标在这些热门上移动时，这两个函数将被激活，相应信息被显现出来。有关这两个函数，咱们将在后边具体评论。

三、创立一个AJAX服务

现在，咱们需求创立一个新的Web服务，由它担任与热门点击相关的数据检索使命。其实，这儿所谓的“AJAX服务”，其功能与一般的Web服务是共同的。有关它们之间的细节差异在此不再赘述。现在，你可以右击工程，然后增加一个命名为LocationService.asmx的Web服务。

留意，在本例中咱们仅想经过这个Web服务来模仿实战环境中的一种简略逻辑。因而，它仅包括一个Web办法;此办法担任模仿从服务器数据库中获得客户端需求的信息。

在此，为了使这个ASP.NET Web服务可以被从客户端以AJAX办法加以调用，有必要把ScriptService特点增加到类声明的前面，如下所示：

[ScriptService()] 
publicclassLocationService:System.Web.Services.WebService 
{ 
现在，编写咱们的Web办法： 
[WebMethod] 
[ScriptMethod(UseHttpGet=false,ResponseFormatResponseFormat=
ResponseFormat.Json)] 
publicstringGetAreaInfo(stringarea) 
{ 
returnarea; 
}

依据权威人士主张，为了安全起见，咱们一般要运用HttpPost(或许HttpGet= false)办法拜访Web办法。然后，咱们把回来的数据格局装备为JSON格局(默许办法即为JSON办法)。

为了简化起见，这儿的GetAreaInfo办法只是回来输入参数的相同值;但在实践开发中，咱们应该在此替换以从数据库中检索数据。

到目前为止，咱们现已成功创立从客户端以AJAX办法加以调用的Web服务。

可是，咱们还要对页面中的服务器控件ScriptManager进行一些恰当的装备，如下所示：

<asp:ScriptManagerID="ScriptManager1"runat="server">
<services>
<asp:servicereferencepath="~/LocationService.asmx"/>
</services>
</asp:ScriptManager>

本文介绍ASP.NET中的HTML Map控件

【修改引荐】

1. ASP.NET的TypeConverter
2. 浅析ASP.NET的TypeResolver
3. ASP.NET中界说JavaScriptConverter
4. 在ASP.NET中替换Sys.Services的办法
5. 运用ASP.NET AJAX的Profile Service