O segredo de utilizar ModalPopupExtender

Olá, pessoal!

Neste artigo, gostaria de informar e mostrar como abrir uma tela modal usando o ModalPopupExtender, depois que executou alguma pesquisa ou regra dentro do código C#.NET. Funciona para as outras linguagens, mas o meu teste está sendo feito apenas com a linguagem C#.NET.

Referências:

• Ferramenta: Visual Studio 2010
• Linguagem: C#.NET
• Plataforma: ASP.NET - AjaxControlToolkit

O AjaxControlToolkit foi desenvolvido para ajudar os desenvolvedores na criação de web sites e aplicativos web. Você pode fazer download da dll ou código fonte aqui.

Em um artigo anterior, mostrei como usar o ModalDialogExtender, falei de css e do código para chamar a tela. O problema maior foi que a tela é mostrada sem que acesse diretamente o código para qualquer processamento antes de aparecer.

Veremos primeiro o processamento dentro da linguagem e no final, o resultado será mostrado dentro da tela modal. Dessa maneira, fica muito mais fácil usar essa grande funcionalidade, que evita abrir popup que muitas vezes são bloqueados pelos browsers.

Mostrando o código

O primeiro passo é colocar a dll referenciada em seu Toolbox. Criei uma nova aba e adicionei a dll que fiz download no site asp.net.

Para colocar todas as funcionalidades mostradas na Imagem 1, clique com o botão direito em cima do Toolbox e selecione a opção Add Tab.

Coloque o nome que quiser na nova aba criada. Clique dentro da aba com o botão direito e escolha a opção chamada Choose Items. Uma tela nova é aberta para a indicação da dll.

Depois de abrir a tela com as dlls, clique em Browser e indica a dll localizada em um lugar do seu computador.

Depois destes passos, vamos começar a desenvolver uma página de exemplo. Arraste o componente da Toolbox chamado ModalPopupExtender para a página .aspx. Automaticamente o componente coloca no início da página uma indicação.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
  TagPrefix="cc1"
  %>

Para que funcione perfeitamente a popupextender, é necessário criar um Panel  normal dentro da página e com os componentes dentro. Componentes como GridView, Formulário, Image e outros do .NET.

<asp:Panel id="pnlImagem" runat="server" CssClass="modalPopup" Style="display:none" Width="600px">

    <div align="center">

        <asp:Image ID="imgChequinhos" runat="server" Width="600px" />

        <asp:Button ID="cmdFechar" runat="server" Text="Fechar" />

    </div>

</asp:Panel>

Note que coloquei o nome do Painel de pnlImage, o CssClass coloquei o modalPopup criado no artigo anterior e um Style=”display:none” para não aparecer na tela, só quando eu chamar.

Depois de criar o Painel, criei um label normal chamada lblTeste.

<asp:Label ID="lblTeste"
  runat="server"></asp:Label>

Ainda falta colocar o modal indicando o painel e o label.

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"

    BackgroundCssClass="modalBackground"

    CancelControlID="cmdFechar" DropShadow="true"

    PopupControlID="pnlImagem" PopupDragHandleControlID="panel3" TargetControlID="lblTeste">

</cc1:ModalPopupExtender>

Note que foi adicionada uma propriedade chamada BackgroundCSSClass=”modalBackground” indicando a parte do css, foi adicionado também um botão para fechar a tela CancelControlID=”cmdFechar” localizado dentro do painel  (code 2), foi colocado também a propriedade PopupControlID=”pnlImagem”, que é o nome do painel criado, e a TargetControlID=”lblTeste” indicando a label.

Após o processamento de um clique qualquer, o código passa pelos métodos e depois mostra o popup. No exemplo, no clique da grid ele deve mostrar uma imagem de acordo com o registro.

Usei o RowCommand para fazer essa funcionalidade. Não vou detalhar muito porque não é o nosso foco falar dessa propriedade do grid. Mas depois de clicado e processado, que chamo o modal .Show();

protected void gridImagem_RowCommand(object sender, GridViewCommandEventArgs e)

{

     if (e.CommandName == "PesquisarImagem")

     {

         // processa os dados de acordo com a sua regra



         ModalPopupExtender1.Show();

     }

}

O nome do id modal chama ModaPopupExtender1, assim basta chamar o Show. O segredo está no componente label adicionado na página e indicado no TargetControlID. No artigo anterior, o que era indicado nessa propriedade era um botão e no clique dele aparecia o popup sem que passasse pelo código .cs. Agora o processamento é feito primeiro para depois aparecer o popup.

 

Fico por aqui e qualquer dúvida pode entrar em contato.

Compartilhar :

Tweet

✚

Relacionadas