Seções iMasters
.NET + Ajax + C#

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.

Comente também

12 Comentários

Rafael

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.

jquery

Vixi, foge disso, jQuery na veia. Toolkit já era

Allan Weber

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.

Trak Trak Trugui

E funcionará perfeito em todos os browser (ex.: IE, FF, Opera, Chrome, Safari), alguém já testou?

    Mauricio Junior

    Vai funcionar perfeito em todos os browser. O jQuery pode não funcionar em um browser ou outro com o IE6 ou Safari.

João Fernandes

Cada um é cada um, eu utilizo os dois e me dou bem, depende do gosto.

    Mauricio Junior

    Também utilizo os dois de acordo com a minha funcionalidade.

vetron

deveria ter vergonha de postar um artigo desse….

    Soad

    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!!!!

Rogério Almeida

Muito bom kara!! Depois de 4 dias tentando vários código consegui o que eu queria com esse poste aí!! Valeu!!

paulo leandro

Muito bacana, um bom material, meus parabéns

Rebeca boiani

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

Qual a sua opinião?