本文介绍了如何使用ASP.NET AJAX为GridView数据行添加动态提示框，通过JavaScript实现鼠标悬停时显示详细信息，无需依赖AJAX Control Toolkit的HoverMenu。通过创建Web Service获取数据，结合客户端脚本事件处理，展示了实现动态提示框的完整步骤。
介绍
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。代码如下：
[WebMethod]
public
string GetToolTipText(
int menuid)
{ 
string strConn = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString; SqlConnection cnn = new SqlConnection(strConn); cnn.Open(); SqlCommand cmd = new SqlCommand(); cmd.Connection = cnn; cmd.CommandText = "select tooltiptext from menus where menuid=@id"; SqlParameter p = new SqlParameter("@id", menuid); cmd.Parameters.Add(p); 
最低0.47元/天 解锁文章
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
