使用帶有重複控制項（VB）的HoverMenu

作者 ：克里斯蒂安·溫茲

下載 PDF

AJAX 控制工具包中的 HoverMenu 控制項提供簡單的彈出效果：當滑鼠指標懸停在元素上時，會在指定位置彈出視窗。 此控制也可在中繼器中使用。

概觀

HoverMenu AJAX 控制工具包中的控制項提供簡單的彈出效果：當滑鼠指標懸停在元素上時，彈出視窗會在指定位置出現。 此控制也可在中繼器中使用。

Steps

首先，需要一個資料來源。 此範例使用 AdventureWorks 資料庫及 Microsoft SQL Server 2005 Express Edition。 該資料庫是 Visual Studio 安裝（包括 Express 版）的選用部分，也可以在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 並駐留於與網頁伺服器同一台機器上;這也是預設設定。 如果你的設定不同，你必須調整資料庫的連線資訊。

為了啟用 ASP.NET AJAX 及控制工具包的功能， ScriptManager 控制項必須放置在頁面上任意位置（但不在元素 <form> 內）：

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

然後，在頁面上加入一個資料來源。 為了使用有限的資料量，我們只在 AdventureWorks 資料庫的供應商表中選取前五個項目。 如果你使用 Visual Studio 助理建立資料來源，請注意目前版本的錯誤不會在資料表名稱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>

現在資料來源中的每個項目會在延遲 50 毫秒（PopDelay 屬性）後，右側彈出一個彈出視窗（PopupPosition 屬性）。

滑鼠選單會出現在重複器中每個項目旁（點擊可查看全尺寸圖片）