Verwenden von HoverMenu mit einem Repeater-Steuerelement (C#)

von Christian Wenz

PDF herunterladen

Das HoverMenu-Steuerelement im AJAX Control Toolkit bietet einen einfachen Popupeffekt: Wenn der Mauszeiger auf ein Element zeigt, wird an einer angegebenen Position ein Popup angezeigt. Es ist auch möglich, dieses Steuerelement in einem Repeater zu verwenden.

Übersicht

Das HoverMenu Steuerelement im AJAX Control Toolkit bietet einen einfachen Popupeffekt: Wenn der Mauszeiger auf ein Element zeigt, wird an einer angegebenen Position ein Popup angezeigt. Es ist auch möglich, dieses Steuerelement in einem Repeater zu verwenden.

Schritte

Zunächst ist eine Datenquelle erforderlich. In diesem Beispiel werden die AdventureWorks-Datenbank und die Microsoft SQL Server 2005 Express Edition verwendet. Die Datenbank ist ein optionaler Bestandteil einer Visual Studio-Installation (einschließlich express edition) und kann auch separat heruntergeladen werden unter https://go.microsoft.com/fwlink/?LinkId=64064. Die AdventureWorks-Datenbank ist Teil der SQL Server 2005-Beispiele und Beispieldatenbanken (herunterladen unter https://www.microsoft.com/download/details.aspx?id=10679). Die einfachste Möglichkeit zum Einrichten der Datenbank besteht darin, das Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) zu verwenden und die AdventureWorks.mdf Datenbankdatei anzufügen.

Für dieses Beispiel wird davon ausgegangen, dass die Instanz der SQL Server 2005 Express Edition aufgerufen SQLEXPRESS wird und sich auf demselben Computer wie der Webserver befindet. Dies ist auch das Standardsetup. Wenn sich Das Setup unterscheidet, müssen Sie die Verbindungsinformationen für die Datenbank anpassen.

Um die Funktionalität von ASP.NET AJAX und dem Steuerelement-Toolkit zu aktivieren, muss das ScriptManager Steuerelement an einer beliebigen Stelle auf der Seite (aber innerhalb des <form> Elements) platziert werden:

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

Fügen Sie dann der Seite eine Datenquelle hinzu. Um eine begrenzte Datenmenge zu verwenden, wählen wir nur die ersten fünf Einträge in der Tabelle "Vendor" der AdventureWorks-Datenbank aus. Wenn Sie den Visual Studio-Assistenten zum Erstellen der Datenquelle verwenden, beachten Sie, dass in der aktuellen Version aufgrund eines Fehlers der Tabellennamen Vendor nicht mit Purchasing vorangestellt wird. Das folgende Markup zeigt die richtige Syntax:

<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]" />

Fügen Sie als Nächstes ein Panel hinzu, das als modales Popup dient:

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

Jetzt kommt das HoverMenuExtender ins Spiel. Damit jedes Element in der Datenquelle ein eigenes Popup erhält, muss der Extender im Abschnitt des <ItemTemplate> Repeaters platziert werden. Hier ist das Markup:

<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>

Nun zeigt jedes Element in der Datenquelle ein Popup nach rechts (PopupPosition Attribut) an, nachdem eine Verzögerung von 50 Millisekunden (PopDelay Attribut) vergangen ist.

Das Hovermenü wird neben jedem Element im Repeater angezeigt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)