Uso de HoverMenu com um controle repetidor (C#)

por Christian Wenz

Baixar código ou baixar PDF

O controle HoverMenu no AJAX Control Toolkit fornece um efeito simples de popup: quando o ponteiro do mouse passa sobre um elemento, um pop-up aparece em uma posição especificada. Também é possível usar esse controle dentro de um repetidor.

Visão geral

O controle de HoverMenu no AJAX Control Toolkit fornece um efeito simples de popup: quando o ponteiro do mouse passa sobre um elemento, um pop-up aparece em uma posição especificada. Também é possível usar esse controle dentro de um repetidor.

Etapas

Em primeiro lugar, uma fonte de dados é necessária. Este exemplo usa o banco de dados AdventureWorks e o Microsoft SQL Server 2005 Express Edition. O banco de dados é uma parte opcional de uma instalação do Visual Studio (incluindo a edição Express) e também está disponível como um download separado em https://go.microsoft.com/fwlink/?LinkId=64064. O banco de dados AdventureWorks faz parte dos exemplos SQL Server 2005 e bancos de dados de exemplo (download em https://www.microsoft.com/downloads/details.aspx?FamilyID=e719ecf7-9f46-4312-af89-6ad8702e4e6e&D isplaylang = en). A maneira mais fácil de definir o banco de dados é usar o Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796&D isplaylang = en) e anexar o arquivo de banco de dados AdventureWorks.mdf.

Para este exemplo, presumimos que a instância do SQL Server 2005 Express Edition é chamada SQLEXPRESS e reside no mesmo computador que o servidor Web; Essa também é a configuração padrão. Se a configuração for diferente, você precisará adaptar as informações de conexão do banco de dados.

Para ativar a funcionalidade do ASP.NET AJAX e do kit de ferramentas de controle, o controle de ScriptManager deve ser colocado em qualquer lugar na página (mas dentro do elemento <form>):

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

Em seguida, adicione uma fonte de dados à página. Para usar uma quantidade limitada de dados, selecionamos apenas as cinco primeiras entradas na tabela de fornecedores do banco de dados AdventureWorks. Se você estiver usando o assistente do Visual Studio para criar a fonte de dados, lembre-se de que um bug na versão atual não prefixará o nome da tabela (Vendor) com Purchasing. A marcação a seguir 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]" />

Em seguida, adicione um painel que serve como o popup modal:

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

Agora, a HoverMenuExtender entra em cena. Para que cada elemento na fonte de dados Obtenha seu próprio Popup, o extensor deve ser colocado dentro da seção de <ItemTemplate> do repetidor. Aqui está a marcação:

<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, todos os itens da fonte de dados exibem um pop-up à direita (PopupPosition atributo) após um atraso de 50 milissegundos (atributoPopDelay).

o menu em foco é exibido ao lado de cada item no repetidor

O menu em foco é exibido ao lado de cada item no repetidor (clique para exibir a imagem em tamanho normal)