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.