Utilização de Múltiplos Controlos de Popup (VB)

por Christian Wenz

Descarregar PDF

O extensor PopupControl no AJAX Control Toolkit oferece uma forma fácil de ativar um pop-up quando qualquer outro controlo está ativado. Também é possível usar mais do que um controlo popup numa só página.

Descrição geral

O extensor PopupControl no AJAX Control Toolkit oferece uma forma fácil de ativar um pop-up quando qualquer outro controlo está ativado. Também é possível usar mais do que um controlo popup numa só página.

Passos

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

De seguida, adiciona um painel que serve como popup. No cenário atual, o painel contém um Calendar controlo. Para evitar as atualizações de página causadas pelos postbacks do Calendário, o painel é colocado dentro de um UpdatePanel controlo:

<asp:Panel ID="pnlCalendar" runat="server">
 <asp:UpdatePanel ID="up1" runat="server">
 <ContentTemplate>
 <asp:Calendar ID="c1" runat="server" />
 </ContentTemplate>
 </asp:UpdatePanel>
</asp:Panel>

A página contém também duas caixas de texto. Para cada caixa de texto, o pop-up do calendário aparecerá assim que a caixa de texto for ativada.

<div>
 Departure date: <asp:TextBox ID="tbDeparture" runat="server" />
 Return date: <asp:TextBox ID="tbReturn" runat="server" />
</div>

Agora estende cada uma das duas caixas de texto com um PopupControlExtender. O TargetControlID atributo fornece o ID do controlo associado ao extensor. O PopupControlID atributo contém o ID do painel popup. Neste caso, ambos os extensores mostram o mesmo painel, mas são possíveis painéis diferentes.

<ajaxToolkit:PopupControlExtender ID="pce1" runat="server"
 TargetControlID="tbDeparture" PopupControlID="pnlCalendar" Position="Bottom" />
<ajaxToolkit:PopupControlExtender ID="pce2" runat="server"
 TargetControlID="tbReturn" PopupControlID="pnlCalendar" Position="Bottom" />

Agora, sempre que clica num campo de texto, aparece um calendário abaixo do campo, permitindo-lhe selecionar uma data. (Colocar a data selecionada de volta nas caixas de texto será abordado num tutorial diferente.)

O Calendário aparece quando o utilizador clica na caixa de texto (Clique para ver a imagem em tamanho real)