Usar o Menu Hover com um Controlo de Repetidor (C#)

por Christian Wenz

Descarregar PDF

O controlo HoverMenu no AJAX Control Toolkit fornece um efeito popup simples: quando o ponteiro do rato paira sobre um elemento, aparece um popup numa posição especificada. Também é possível usar este controlo dentro de um repetidor.

Descrição geral

O HoverMenu controlo no AJAX Control Toolkit fornece um efeito popup simples: quando o ponteiro do rato paira sobre um elemento, aparece um popup numa posição especificada. Também é possível usar este controlo dentro de um repetidor.

Passos

Antes de mais, é necessária uma fonte de dados. Este exemplo utiliza a base de dados AdventureWorks e a Microsoft SQL Server 2005 Express Edition. A base de dados é uma parte opcional de uma instalação do Visual Studio (incluindo a edição express) e também está disponível como download separado em https://go.microsoft.com/fwlink/?LinkId=64064. A base de dados AdventureWorks faz parte dos SQL Server 2005 Samples e Sample Databases (download em https://www.microsoft.com/download/details.aspx?id=10679). A forma mais fácil de configurar a base de dados é usar o Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) e anexar o AdventureWorks.mdf ficheiro da base de dados.

Para este exemplo, assumimos que a instância do SQL Server 2005 Express Edition é chamada SQLEXPRESS e reside na mesma máquina que o servidor web; esta é também a configuração padrão. Se a tua configuração for diferente, tens de adaptar a informação de ligação para a base de dados.

Para ativar a funcionalidade do ASP.NET AJAX e do Control Toolkit, o ScriptManager controlo deve ser colocado em qualquer lugar da página (mas dentro do <form> elemento):

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

Depois, adiciona uma fonte de dados à página. Para usar uma quantidade limitada de dados, selecionamos apenas as primeiras cinco entradas na tabela Vendor da base de dados AdventureWorks. Se estiver a usar o assistente Visual Studio para criar a fonte de dados, tenha em atenção que um erro na versão atual não prefixa o nome da tabela (Vendor) com Purchasing. A marcação seguinte mostra a sintaxe correta:

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

De seguida, adiciona um painel que serve como popup modal:

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

Agora, o HoverMenuExtender entra em jogo. Para que cada elemento da fonte de dados obtenha o seu próprio popup, o extensor deve ser colocado dentro da secção do <ItemTemplate> repetidor. Aqui está a margem:

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

Agora, cada item na fonte de dados apresenta um pop-up à direita (PopupPosition atributo) após um atraso de 50 milissegundos (PopDelay atributo).

O menu de hover aparece ao lado de cada item no repetidor (Clique para ver a imagem em tamanho real)