概述ASP.NET中的HTML Map控件
创始人
2024-04-21 01:21:10
0

在本文中,我将向你展示如何使用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代码部分:

  1.  SRC="images\solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0 
  2. ALT="Solar System" USEMAP="#SystemMap"> 
  3.  NAME="SystemMap"> 
  4.  SHAPE="rect" COORDS="0,0,82,126" 
  5. onmouseover="javascript:GetAreaInfo(event, 'sun');"  
    onmouseout="javascript:HidePopup();"> 
  6.  SHAPE="circle" COORDS="90,58,3" 
  7. onmouseover="javascript:GetAreaInfo(event, 'merglobe');"  
    onmouseout="javascript:HidePopup();" 
  8. > 
  9.  SHAPE  
  10.  

在上面代码中,我们添加了一个HTML 元素和一个HTML 元素(注:VS2005工具栏中没有提供现成的控件,只能手工添加)。其中定义了各个星球相应的热点形状及坐标信息。而且,每一个热点都有一个相应的 onmouseover和onmouseout JavaScript函数与之相关联。当鼠标在这些热点上移动时,这两个函数将被激活,相应信息被显示出来。有关这两个函数,我们将在后面详细讨论。

三、创建一个AJAX服务

现在,我们需要创建一个新的Web服务,由它负责与热点点击相关的数据检索任务。其实,这里所谓的“AJAX服务”,其功能与通常的Web服务是一致的。有关它们之间的细节区别在此不再赘述。现在,你可以右击工程,然后添加一个命名为LocationService.asmx的Web服务。

注意,在本例中我们仅想通过这个Web服务来模拟实战环境中的一种简单逻辑。因此,它仅包含一个Web方法;此方法负责模拟从服务器数据库中取得客户端需要的信息。

在此,为了使这个ASP.NET Web服务能够被从客户端以AJAX方式加以调用,必须把ScriptService属性添加到类声明的前面,如下所示:

  1. [ScriptService()]  
  2. public class LocationService : System.Web.Services.WebService  
  3. {  
  4. 现在,编写我们的Web方法:  
  5. [WebMethod]  
  6. [ScriptMethod(UseHttpGet = falseResponseFormatResponseFormat = 
    ResponseFormat.Json)]  
  7. public string GetAreaInfo(string area)  
  8. {  
  9. return area;  

根据权威人士建议,为了安全起见,我们一般要使用HttpPost(或者HttpGet= false)方式访问Web方法。然后,我们把返回的数据格式配置为JSON格式(默认方式即为JSON方式)。

为了简化起见,这里的GetAreaInfo方法仅仅返回输入参数的相同值;但在实际开发中,我们应该在此替换以从数据库中检索数据。

到目前为止,我们已经成功创建从客户端以AJAX方式加以调用的Web服务。

但是,我们还要对页面中的服务器控件ScriptManager进行一些适当的配置,如下所示:

  1.  ID="ScriptManager1" runat="server"> 
  2.  
  3.  path="~/LocationService.asmx" /> 
  4.  
  5.  

本文介绍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

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...