Usando HoverMenu con un Control

Repeater (C#)
Tutoriales

Por Christian Wenz|02 De junio de 2008
DESCARGAR activos: Cdigo o PDF
El control HoverMenu en el AJAX Control Toolkit proporciona un efecto de popup simple:
cuando el puntero del mouse se desplaza sobre un elemento, una ventana emergente aparece
en una posicin especificada.Tambin es posible utilizar este control dentro de un repetidor.
Resumen
El control HoverMenu en el AJAX Control Toolkit proporciona un efecto de popup simple:
cuando el puntero del mouse se desplaza sobre un elemento, una ventana emergente aparece
en una posicin especificada. Tambin es posible utilizar este control dentro de un repetidor.
Pasos
En primer lugar, un origen de datos es necesario. Este ejemplo utiliza la base de datos
AdventureWorks y Microsoft SQL Server 2005 Express Edition. La base de datos es una parte
opcional de una instalacin de Visual Studio (incluyendo express edition) y tambin est
disponible como una descarga independiente
bajohttp://go.microsoft.com/fwlink/?LinkId=64064. La base de datos AdventureWorks es parte
de las muestras de SQL Server 2005 y bases de datos de muestra (descargar
en http://www.microsoft.com/downloads/details.aspx?FamilyID=e719ecf7-9f46-4312-af89-
6ad8702e4e6e&DisplayLang=en). La forma ms fcil de configurar la base de datos es utilizar el
Microsoft SQL Server Management Studio Express
(http://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-
5a0f62bf7796&DisplayLang=en) y adjuntar el archivo de base de datos AdventureWorks.mdf .
Para este ejemplo, asumimos que la instancia de SQL Server 2005 Express Edition es
llamada SQLEXPRESS y reside en la misma mquina que el servidor web; Esto tambin es la
configuracin predeterminada. Si su configuracin es diferente, tienes que adaptar la
informacin de conexin de la base de datos.
Para activar la funcionalidad de AJAX de ASP.NET y el Control Toolkit, el
control ScriptManager debe colocarse en cualquier lugar de la pgina (pero dentro del
elemento <form> ):

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

Luego, agregar un origen de datos a la pgina. Para poder usar una cantidad limitada de datos,
slo seleccionamos las primeras cinco entradas en la tabla de proveedor de la base de datos
AdventureWorks. Si utiliza al asistente de Visual Studio para crear el origen de datos, importa
que un error en la versin actual no prefijo el nombre de tabla (Vendor) con la 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 continuacin, agregue un panel que sirve como el popup modal:

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

Ahora, el HoverMenuExtender entra en juego. Para que todos los elementos del origen de
datos obtiene su propio popup, el extensor se debe poner dentro la seccin
de <ItemTemplate> del repetidor. Aqu est 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 de la fuente de datos muestra un popup a la derecha
(atributoPopupPosition ) despus de un retraso de 50 milisegundos (atributo dePopDelay ).

El men hover aparece junto a cada elemento en el repetidor (haga clic para ver imagen tamao
completo)