Uso di HoverMenu con un controllo Repeater (C#)

di Christian Wenz

Scarica il PDF

Il controllo HoverMenu in AJAX Control Toolkit fornisce un semplice effetto popup: quando il puntatore del mouse passa il puntatore del mouse su un elemento, viene visualizzato un popup in una posizione specificata. È anche possibile usare questo controllo all'interno di un ripetitore.

Panoramica

Il HoverMenu controllo in AJAX Control Toolkit fornisce un semplice effetto popup: quando il puntatore del mouse passa il puntatore del mouse su un elemento, viene visualizzato un popup in una posizione specificata. È anche possibile usare questo controllo all'interno di un ripetitore.

Passaggi

Prima di tutto, è necessaria un'origine dati. Questo esempio usa il database AdventureWorks e microsoft SQL Server 2005 Express Edition. Il database è una parte facoltativa di un'installazione di Visual Studio (inclusa l'edizione express) ed è disponibile anche come download separato in https://go.microsoft.com/fwlink/?LinkId=64064. Il database AdventureWorks fa parte dell'SQL Server 2005 Samples and Sample Database (download in https://www.microsoft.com/download/details.aspx?id=10679). Il modo più semplice per impostare il database è usare microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) e collegare il file di AdventureWorks.mdf database.

Per questo esempio si presuppone che l'istanza del SQL Server 2005 Express Edition venga chiamata SQLEXPRESS e si trovi nello stesso computer del server Web. Questa è anche la configurazione predefinita. Se la configurazione è diversa, è necessario adattare le informazioni di connessione per il database.

Per attivare la funzionalità di ASP.NET AJAX e Control Toolkit, il ScriptManager controllo deve essere inserito ovunque nella pagina (ma all'interno dell'elemento <form> ):

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

Aggiungere quindi un'origine dati alla pagina. Per usare una quantità limitata di dati, vengono selezionate solo le prime cinque voci nella tabella Vendor del database AdventureWorks. Se si usa il assistente di Visual Studio per creare l'origine dati, tenere presente che un bug nella versione corrente non prefisso il nome della tabella (Vendor) con Purchasing. Il markup seguente mostra la sintassi corretta:

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

Aggiungere quindi un pannello che funge da popup modale:

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

Ora, entra HoverMenuExtender in gioco. In modo che ogni elemento dell'origine dati ottenga il proprio popup, l'estensione deve essere inserita nella sezione del <ItemTemplate> ripetitore. Questo è il 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>

Ora ogni elemento nell'origine dati visualizza un popup a destra (PopupPosition attributo) dopo un ritardo di 50 millisecondi (PopDelay attributo).

Il menu del puntatore del mouse viene visualizzato accanto a ogni elemento del ripetitore (fare clic per visualizzare l'immagine full-size)

Avanti