O segredo de utilizar ModalPopupExtender

Mauricio Junior
em .NET

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.

Mauricio Junior

Formado pela Faculdade Anhanguera, Especialista pela FGV (Fundação Getúlio Vargas), Pós-Graduação em Docência Superior e Mestre em Engenharia Elétrica pela Universidade de Brasília. Com 30 anos, possui sete livros publicados pela editora Ciência Moderna. É certificado Microsoft MCP, MCAD e MVP. Trabalha como Analista Sênior na empresa ATP S.A. http://www.mauriciojunior.org

12 comentários Comente também

  1. Aqui na empresa utilizamos muito este componente, então segue algumas dicas:
    Tome cuidado se usar UpdatePanel junto com estes modais, pois as vezes só será possível manter a visibilidade do modal via CodeBehind.
    Utilizamos alguns recursos do jQuery depois de exibir o modal e após fechar também, para conseguir esta integração, o modal oferece alguns eventos js que podemos extendê-los para atender as necessidades.

  2. Concordo com o comentário do “jquery”. A utilização de plugins JQuery torna essa funcionalidade mais simples, e o código mais limpo (na minha opinião), mas o post é muito válido…principalmente para quem necessita criar alguma app rápida e não conhece jquery.

    1. Esse artigo é para quem está começando a aprender, e ensina o que deve ser ensinado, a partir daí você melhora de acordo com sua necessidade,,,,quer tudo mastigado!!!!

  3. Mauricio,

    Sei que já faz tempo que postou esta matéria, no entanto, quando tentei reproduzir o que vc fez, ocorreu um erro e desconheço o motivo.

    Eis o erro: “ModalPopupExtender Não é possível obter o valor da propriedade UI objeto é nulo ou não definido”

    O depurador mostra que o erro ocorre no seguinte trecho:
    Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.ModalPopupBehavior, {“BackgroundCssClass”:”modalBackground”,”CancelControlID”:”cmdFechar”,”DropShadow”:true,”PopupControlID”:”pnlImagem”,”PopupDragHandleControlID”:”panel3″,”dynamicServicePath”:”/Testes/frmbusca.aspx”,”id”:”ModalPopupExtender1″}, null, null, $get(“lblTeste”));
    });

    Grata,
    Rebeca

Dê Sua Opinião

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Este projeto é mantido e patrocinado pelas empresas: