Usar HoverMenu con un control Repeater (VB)

de Christian Wenz

Descargar PDF

El control HoverMenu del Kit de herramientas de control de AJAX proporciona un efecto emergente sencillo: Cuando el puntero del mouse mantiene el puntero sobre un elemento, aparece un elemento emergente en una posición especificada. También es posible usar este control dentro de un repetidor.

Visión general

El HoverMenu control del Kit de herramientas de control de AJAX proporciona un efecto emergente sencillo: cuando el puntero del ratón se desplaza sobre un elemento, aparece un elemento emergente en una posición especificada. También es posible usar este control dentro de un repetidor.

Pasos

En primer lugar, se requiere un origen de datos. En este ejemplo se usa la base de datos AdventureWorks y Microsoft SQL Server 2005 Express Edition. La base de datos es una parte opcional de una instalación de Visual Studio (incluida la edición express) y también está disponible como una descarga independiente en https://go.microsoft.com/fwlink/?LinkId=64064. La base de datos AdventureWorks forma parte de las muestras y bases de datos de ejemplo de SQL Server 2005 (descarga en https://www.microsoft.com/download/details.aspx?id=10679). La manera más fácil de configurar la base de datos es usar Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) y adjuntar el AdventureWorks.mdf archivo de base de datos.

En este ejemplo, se supone que se llama SQLEXPRESS a la instancia de SQL Server 2005 Express Edition y reside en la misma máquina que el servidor web; también es la configuración predeterminada. Si la configuración es diferente, debe adaptar la información de conexión de la base de datos.

Para activar la funcionalidad de ASP.NET AJAX y control Toolkit, el ScriptManager control debe colocarse en cualquier parte de la página (pero dentro del <form> elemento):

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

A continuación, agregue un origen de datos a la página. Para usar una cantidad limitada de datos, solo se seleccionan las cinco primeras entradas de la tabla Vendor de la base de datos AdventureWorks. Si usa el asistente de Visual Studio para crear el origen de datos, tenga en cuenta que un error en la versión actual no prefijo el nombre de la tabla (Vendor) con Purchasing. El marcado siguiente muestra la sintaxis correcta:

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

A continuación, agregue un panel que actúa como elemento emergente modal:

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

Ahora, entra HoverMenuExtender en juego. Para que cada elemento del origen de datos tenga su propia ventana emergente, la extensión debe colocarse dentro de la sección del <ItemTemplate> repetidor. Este es el marcado:

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

Ahora todos los elementos del origen de datos muestran un elemento emergente a la derecha (PopupPosition atributo) después de un retraso de 50 milisegundos (PopDelay atributo).

El menú flotante aparece junto a cada elemento del repetidor (haga clic para ver la imagen en tamaño completo).