通过 Repeater 控件使用 HoverMenu (VB)

作者 ：Christian Wenz

下载 PDF

AJAX 控件工具包中的 HoverMenu 控件提供简单的弹出效果：当鼠标指针悬停在元素上时，将在指定位置显示一个弹出窗口。 还可以在中继器内使用此控件。

概述

HoverMenu AJAX 控件工具包中的控件提供简单的弹出效果：当鼠标指针悬停在元素上时，弹出窗口将出现在指定位置。 还可以在中继器内使用此控件。

步骤

首先，需要数据源。 此示例使用 AdventureWorks 数据库和 Microsoft SQL Server 2005 Express Edition。 数据库是 Visual Studio 安装 (包括 express edition) 的可选部分，也可在 下 https://go.microsoft.com/fwlink/?LinkId=64064单独下载。 AdventureWorks 数据库是 SQL Server 2005 示例和示例数据库的一部分， () https://www.microsoft.com/download/details.aspx?id=10679 下载。 设置数据库的最简单方法是使用 Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) 并附加AdventureWorks.mdf数据库文件。

对于此示例，我们假定SQL Server 2005 Express Edition的实例被调用SQLEXPRESS并驻留在 Web 服务器所在的计算机上;这也是默认设置。 如果设置不同，则必须调整数据库的连接信息。

若要激活 ASP.NET AJAX 和 Control Toolkit 的功能， ScriptManager 必须将控件放置在页面上的任意位置 (但 <form> 位于 元素) ：

<asp:ScriptManager ID="asm" runat="server" />

然后，将数据源添加到页面。 为了使用有限的数据量，我们只选择 AdventureWorks 数据库的供应商表中的前五个条目。 如果使用 Visual Studio 助手创建数据源，请注意，当前版本中的 bug 不会将表名称 (Vendor) 前缀Purchasing。 以下标记显示了正确的语法：

<asp:SqlDataSource ID="sds1" runat="server" ConnectionString="
 Data Source=(local)\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=True"
 ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 5
 [VendorID], [Name] FROM [Purchasing].[Vendor]" />

接下来，添加一个用作模式弹出窗口的面板：

<asp:Panel ID="HoverPanel" runat="server">
 More info ...
</asp:Panel>

现在，开始 HoverMenuExtender 发挥作用了。 若要使数据源中的每个元素都获得其自己的弹出窗口，必须将扩展器放在中继器 <ItemTemplate> 部分内。 此处为标记：

<asp:Repeater ID="rep1" DataSourceID="sds1" runat="server">
 <ItemTemplate>
 <br />
 <asp:Panel ID="myPanel" runat="server" Width="400px" BackColor="Lime" BorderWidth="1px">
 <div>
 Vendor
 <%#DataBinder.Eval(Container.DataItem, "Name")%>
 </div>
 </asp:Panel>
 <br />
 <ajaxToolkit:HoverMenuExtender ID="hme" runat="server" TargetControlID="myPanel"
 PopupControlID="HoverPanel" PopupPosition="Right" PopDelay="50" />
 </ItemTemplate>
</asp:Repeater>

现在，数据源中的每个项在 (PopupPosition 属性) 延迟 50 毫秒后，向右显示一个弹出窗口 (PopDelay 属性) 。

悬停菜单显示在中继器中的每个项旁边， (单击以查看全尺寸图像)

上一篇