[Resolvido] O segredo de utilizar ModalPopupExtender

[RSS iMasters 5]

Olá,pessoal!

 

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

 

Referências:

 

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

OAjaxControlToolkit foi desenvolvido para ajudar os desenvolvedores na criação deweb 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. Oproblema maior foi que a tela é mostrada sem que acesse diretamente o códigopara qualquer processamento antes de aparecer.

 

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

 

 

Mostrando o código

Oprimeiro passo é colocar a dll referenciada em seu Toolbox. Criei uma nova aba e adicionei a dll que fiz download nosite asp.net.

 

 

Paracolocar todas as funcionalidades mostradas na Imagem 1, clique com o botãodireito em cima do Toolbox eselecione a opção Add Tab.

 

 

Coloqueo nome que quiser na nova aba criada. Clique dentro da aba com o botão direito eescolha a opção chamada Choose Items. Umatela nova é aberta para a indicação da dll.

 

 

Depoisde abrir a tela com as dlls, clique em Browsere indica a dll localizada em um lugar do seu computador.

 

 

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

 

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>Paraque 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>Noteque coloquei o nome do Painel de pnlImage, o CssClass coloquei o modalPopup criado no artigo anterior eum Style=?display:none? para nãoaparecer na tela, só quando eu chamar.

 

Depoisde criar o Painel, criei um labelnormal chamada lblTeste.

 

<asp:Label ID="lblTeste" runat="server"></asp:Label>Aindafalta 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>Noteque foi adicionada uma propriedade chamada BackgroundCSSClass=?modalBackground?indicando a parte do css, foi adicionado também um botão para fechar a telaCancelControlID=?cmdFechar? localizado dentro do painel  (code 2), foi colocado também a propriedadePopupControlID=?pnlImagem?, que é o nome do painel criado, e aTargetControlID=?lblTeste? indicando a label.

 

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

 

 

Usei oRowCommand para fazer essa funcionalidade. Não vou detalhar muito porque não éo nosso foco falar dessa propriedade do grid. Mas depois de clicado eprocessado, 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 nomedo id modal chama ModaPopupExtender1,assim basta chamar o Show. O segredo está no componente label adicionado napágina e indicado no TargetControlID. No artigo anterior, o que era indicadonessa propriedade era um botão e no clique dele aparecia o popup sem quepassasse pelo código .cs. Agora o processamento é feito primeiro para depoisaparecer o popup.

 

 

 

Ficopor aqui e qualquer dúvida pode entrar em contato.

 

 

 

http://imasters.com.br/artigo/21250/dotnet/o-segredo-de-utilizar-modalpopupextender