用ASP.NET AJAX框架扩展HTML Map控件

所属类别：ASP.net
推荐指数：★★☆
文档人气：3
本周人气：1
发布日期：2008-8-2

在本文中，我将向你展示如何使用ASP.NET AJAX框架对添加可点击的热点的HTML Map控件进行扩展。经扩展后，当我们的鼠标移动到这些热点上后，即弹出关于这些热点的详细信息;但是，这些详细信息都是通过AJAX异步方式从远程服务中取得的。

一、简介

首先，我们注意到，ASP.NET 2.0中也提供了一个控件ImageMap。此控件是一个让你可以在图片上定义热点(HotSpot)区域的控件。用户可以通过点击这些热点区域进行回发(PostBack)操作或者转发到某个URL地址。典型情况下，该控件用于需要对某张图片的局部范围进行互动操作。然而，这个控件的不足之处在于，在点击这些热点区域进行回发时将导致整个Web页面的刷新。

在本文中，我们将基于ASP.NET AJAX技术对普通的HTML Map控件加以扩展，以达到在点击其上的热点区域时，在显示有关详细信息时仅仅导致局部的页面更新，从而使之适应Web 2.0应用程序开发潮流。

下面图1展示了本文示例程序运行时的一个快照。

图1.使用AJAX技术扩展后的Map控件热点点击仅引发局部更新。

从上图中看到，当鼠标悬浮于上图太阳系中的木星(木星)上时，有关该星球的细节信息将以一个弹出窗口形式友好地展示出来(注：此图取自MSDN，这里没有翻译相应单词)。

二、创建一个AJAX示例网站

启动Visual Studio 2005，选择“文件→新建网站…”，然后选择“ASP.NET AJAX-Enabled Web Site”模板，命名工程为“Ajax_ImageMap”，并选择作为内置支持语言，最后点击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 Script函数与之相关联。当鼠标在这些热点上移动时，这两个函数将被激活，相应信息被显示出来。有关这两个函数，我们将在后面详细讨论。

三、创建一个AJAX服务

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

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

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

[ScriptService()]
　　public class LocationService : System.Web.Services.WebService
　　{}
[WebMethod]
　　[ScriptMethod(UseHttpGet = false, ResponseFormat = 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>

在此，我们仅在节点下加入了一个服务参考，但其作用如何呢?

从生成的HTML源码分析，上面的配置将生成如下所示内容：

<script src="LocationService.asmx/jsdebug" type="text/javascript"></script>

这里的脚本标签引用了一个Script文件LocationService.asmx/jsdebug。其实这是一个Web服务代理类。正是通过此代理类，我们才得以从客户端以异步方式调用服务器端的Web服务。

更有意思的是，如果你简单地复制显示在上面的路径到浏览器中，你将看到一个在运行时刻由AJAX环境生成的JavaScript文件—此文件使脚本服务调用可用。有关代理类，我们不再深入讨论。

下面，我们来看如何创建一个定制的客户端类。

四、创建客户端定制类

我们知道ASP.NET AJAX框架的重大“发明”之一就是，它引入了面向对象的JavaScript编程模型。现在，借助于JavaScript设计模式，我们可以轻松地创建自己的模板或类，加入继承概念，创建接口与枚举等。

在本文中，我们将开发一个封装所有本示例中要求功能的客户端类。

现在，右击工程，并新添加一个名为ImageMap的JavaScript文件。在此文件中，我们将定义一个新的命名空间MyServices;这个命名空间将包含我们要开发的客户端类。如下所示：

Type.registerNamespace("MyServices");

接下来，我们定义要创建的客户端类的构造函数：

MyServices.Location = function (uiElement, uiBody) {
MyServices.Location.initializeBase(this);
this._uiElement = uiElement;
this._uiBody = uiBody;
this._xAxis = 0;
this._yAxis = 0;
}

一个模板或类的构造函数也只不过是一个普通的JavaScript函数。该构造器共有两个参数：uiElement和uiBody。

这两个参数都将用于描述在页面显示的弹出窗口。另外两个私有变量_xAxis和_yAxis用于描述弹出窗口的显示位置。典型情况下，我们最好在构造器中声明所有的私有成员。

接下来，我们将使用原型设计模式编写该类中的成员函数和属性：

MyServices.Location.prototype =
{
get_uiElement: function()
{
return this._uiElement;
},
set_uiElement: function(value)
{
this._uiElement = value;
},
get_uiBody: function()
{
return this._uiBody;
},
set_uiBody: function(value)
{
this._uiBody = value;
},

注意，这里的UI元素属性方法的定义方式非常类似于.NET中各种语言中的定义形式。

下面的成员函数是我们的重点，它负责调用远程的Web服务：

ShowPopupinfo: function(event, areaName)
{
MyServices.LocationService.GetAreaInfo(areaName,
Function.createDelegate(this, this.OnCompleted),
this.OnError,  //负责进行错误处理的回叫函数
  this.OnTimeOut); //负责进行超时处理的回叫函数
  this._xAxis = event.clientX;
this._yAxis = event.clientY;
}

上面的代码展示的是非常典型的从客户端调用Web服务的方法：

1)形式与调用一个普通的本地方法几乎一样方便;

2)Function.createDelegate函数是ASP.NET AJAX客户端开发中的极为重要的全局函数。创建此函数的原始目的之一是解决this关键字的问题。在一个由一个DOM元素引发的事件处理器中，this 关键字总是引用此DOM元素而不是类本身。但在此，我们使用这个函数的理由是，使得AJAX环境在与激发Web服务的相同的类实例中调用成功时的回叫函数。当你需要引用客户端类的属性和方法时，这是相当重要的。简言之，使用此函数将使得访问调用Web服务的客户端类的属性和方法而准确。否则，进行异步调用的客户端类实例将为null，因为Web服务的响应是在另一个不同的上下文中执行的—这个上下文不再等同于发出异步Web调用请求的那个上下文。

3)有意思的是，这里的GetAreaInfo方法并不是我们在前面创建的Web服务中的那个，而是属于在运行时刻创建的Web服务代理类—此代理类作为一个客户端代理访问服务器端的ASMX Web服务。

上面ShowPopupInfo函数中的最后两行代码中，使用事件的输入参数设置两个私有变量xAxis和yAxis的值。我们在此的目的是，在与用户点击位置尽可能近的地方显示弹出窗口。

下面是调用成功时对应的回叫函数的实现代码：

OnCompleted: function(result, userContext, methodName)
{
var uiElement = $get(this.get_uiElement());
var uiBody = $get(this.get_uiBody());
if (uiBody != null)
{
var textNode = uiBody.firstChild;
if (!textNode)
{
textNode = document.createTextNode(result);
uiBody.appendChild(textNode);
}
else
{
textNode.nodeValue = result;
}
if (uiElement != null)
{
uiElement.style.visibility = "visible";
uiElement.style.display = "inline";
uiElement.style.left = this._xAxis + "px";
uiElement.style.top = this._yAxis + "px";
}
}
},

内容相当简单—把从服务器端返回的数据设置为弹出窗口的显示内容并根据情况确保显示此窗口。

在创建客户端类的最后，我们还必须告诉AJAX框架在客户端注册之，以便可以从客户端访问它：

MyServices.Location.registerClass("MyServices.Location");

至此，客户端类MyServices.Location已经成功创建。那么，如何使用它呢?

首先，我们需要在页面加载时定义客户端类的一个新的实例。为此，我们需要在pageLoad函数中编程：

　var location = null;
　　function pageLoad(sender, args) {
　　location = new MyServices.Location("modal", "modalBody");
　　location.HidePopupInfo();
　　}

上面的代码简单地创建MyServices.Location类的一个新的实例。然后调用客户端类的成员函数之一来隐藏页面中的弹出窗口。为什么我们在pageLoad函数中创建客户端类的一个实例呢?原因在于，当AJAX环境控制流程到达pageLoad函数时，所有的AJAX客户端和用户定义的JavaScript代码都已经被成功加载。因此，这一时刻我们可以安全地访问任何用户或系统定义的 JavaScript代码。

其它几个工具函数比较简单，在此不再赘述。

五、总结

在本文中，我向你展示了如何通过创建一个AJAX服务和创建自己定制的客户端类来扩展HTML Map控件。在扩展后的控件中，当点击图像中的某个区域时，我们可以通过新型的AJAX方式来给出相关细节信息，而不必刷新整个Web页面。尽管在大部分 Web应用中我们较少应用到这种Map控件(也许因此VS2005工具栏中省略之)，但如果开发大量图片、图像及地图操作相关的Web应用时，基于本文 AJAX改造后的Map控件一定会让你的Web应用更加绚烂多彩。