介绍
ASP.NET AJAX可以使你的web应用程序具有更丰富的功能和更多的用户响应。 本文中,我将演示如何通过ASP.NET AJAX的帮助,给像GridView这样的数据绑定控件的数据行增加popup提示框。
初看这个需求后,你可能会想到使用AJAX Control Toolkit来实现这个功能。 因为AJAX Control ToolKit里包含一个悬浮菜单控件(HoverMenu)。 但是,如果菜单是动态读取的话,你就不能使用这个控件了。 一个HoverMenu Extender仅能被附加到一个目标控件。 我们可以想象一下,如果你有一个GridView,它里面有一个HyperLinkField类型的列。 当用户的鼠标经过这个HyperLink的时候,你希望弹出一个Popup提示框来显示该数据行的详细信息。 此时,使用AJAX Control Toolkit就不能达到我们的要求了。 本文中,我将图文结合的演示如何完成这样的功能。
提示框的图例
在开讲之前让我们先来看一看这个提示框是如何显现的。 请看下图:
上图演示了一个内含GridView控件的Web窗体。 这个GridView控件由一个HyperLinkField类型的列构成。 当你的鼠标浮动到任何超链上的时候,就会弹出一个提示框,用来显示改数据行的更详细的信息。 这段通过提示框显示的描述文本是从数据库中动态读取的,也就是说它不是静态文本。
现在就让我们开始开发这个提示框吧!
首先新建一个名为AJAXTooltip的ASP.NET AJAX-Enabled Web Site。
创建数据库
为了实现本示例的功能,你需要创建一个数据库,该数据库内有一个名为Menus的表。 右键单击App_Data文件夹,选择“添加新项…”。 然后添加一个名为Database.mdf的SQL数据库。
在服务器资源浏览器中创建一个名为Menus的表。 其表结构如下:
MenuID列是关键字,它是每一条菜单的唯一ID。 Text列保存着用来在浏览器中显示的菜单项的文本。 NavigateUrl列为单击该菜单项后应当链接到的URL。 最后的TooltipText列保存的是当鼠标经过菜单项后所显示的详细文本。
建完表后,再在表中插入一些数据,这样就会给之后测试你的web程序时提供方便。
创建Web Service
ASP.NET AJAX允许你通过客户端脚本调用web services。 在我们的这个例子中就使用了这项技术。 首先在你的web程序中新建一个web service(WebService.asmx),并在其内添加一个web method。代码如下:
![](http://writeblog.csdn.net/sysimage/codeimages/None.gif)
![](http://writeblog.csdn.net/sysimage/codeimages/None.gif)
![](http://writeblog.csdn.net/sysimage/codeimages/ExpandedBlockStart.gif)
![](http://writeblog.csdn.net/sysimage/codeimages/InBlock.gif)
![](http://writeblog.csdn.net/sysimage/codeimages/InBlock.gif)
![](http://writeblog.csdn.net/sysimage/codeimages/InBlock.gif)
![](http://writeblog.csdn.net/sysimage/codeimages/InBlock.gif)
![](http://writeblog.csdn.net/sysimage/codeimages/InBlock.gif)
![](http://writeblog.csdn.net/sysimage/codeimages/InBlock.gif)
![](http://writeblog.csdn.net/sysimage/codeimages/InBlock.gif)
![](http://writeblog.csdn.net/sysimage/codeimages/InBlock.gif)
![](http://writeblog.csdn.net/sysimage/codeimages/InBlock.gif)
![](http://writeblog.csdn.net/sysimage/codeimages/InBlock.gif)
![](http://writeblog.csdn.net/sysimage/codeimages/InBlock.gif)
![](http://writeblog.csdn.net/sysimage/codeimages/InBlock.gif)