使用ASP.NET AJAX框架扩展HTML Map控件(3)_.Net教程
推荐:ASP.NET调用oracle存储过程实现快速分页《使用 ADO.NET 访问 Oracle 9i 存储过程》见下面的介绍(如果对这个不怎么懂的,还是先看看下面文章) http://www.microsoft.com/china/MSDN/library/data/dataAccess/DMSDNorsps.mspx 包
这两个参数都将用于描述在页面显示的弹出窗口。另外两个私有变量_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函数中编程:
|
其它几个工具函数比较简单,在此不再赘述。
五、总结
在本文中,我向你展示了如何通过创建一个AJAX服务和创建自己定制的客户端类来扩展HTML Map控件。在扩展后的控件中,当点击图像中的某个区域时,我们可以通过新型的AJAX方式来给出相关细节信息,而不必刷新整个Web页面。尽管在大部分Web应用中我们较少应用到这种Map控件(也许因此VS2005工具栏中省略之),但如果开发大量图片、图像及地图操作相关的Web应用时,基于本文AJAX改造后的Map控件一定会让你的Web应用更加绚烂多彩。
【附】本文源码调试环境:Windows XP专业版 Visual Studio 2005 ASP.NET AJAX 1.0。
本文收集整理自互联网,若您是原文作者,请来信更改作者及出处Post#vip.qq.com(把#改为@)
分享:复杂ASP.NET服务器控件调整小技巧在创建或修改布局复杂ASP.NET服务器端控件时,大量的时间都是在编译,等待JIT,修改,编译,JIT... 这样一个循环中,而且两个编译常常还很耗费时间。特别地,当控件已集成在页面之中后,在出现
- asp.net如何得到GRIDVIEW中某行某列值的方法
- .net SMTP发送Email实例(可带附件)
- js实现广告漂浮效果的小例子
- asp.net Repeater 数据绑定的具体实现
- Asp.Net 无刷新文件上传并显示进度条的实现方法及思路
- Asp.net获取客户端IP常见代码存在的伪造IP问题探讨
- VS2010 水晶报表的使用方法
- ASP.NET中操作SQL数据库(连接字符串的配置及获取)
- asp.net页面传值测试实例代码
- DataGridView - DataGridViewCheckBoxCell的使用介绍
- asp.net中javascript的引用(直接引入和间接引入)
- 三层+存储过程实现分页示例代码
- 相关链接:
- 教程说明:
.Net教程-使用ASP.NET AJAX框架扩展HTML Map控件(3)。