ModalDialogExtender

Olá pessoal, gostaria de falar um pouco desse componente chamado ModalDialogExtender do pacote Ajax Toolkit. Pode ser pego gratuitamente no site www.asp.net. Basta baixar do site, instalar na máquina e referenciar a dll junto a ferramenta Visual Studio.NET.

Dependendo da versão da sua ferramenta, aparece ou não. No site, o componente está direcionado para a versão 2008 e não 2005. Existe um link mais escondido para a versão 2005. Se procurar mais um pouco, consegue baixar para a versão anterior, a chamada 1.0.

Referência:

Framework 3.5

Ferramenta utilizada, Visual Studio .NET 2008

Site com o componente www.asp.net

Ajax Toolkit

O que vou mostrar no artigo é como utilizar esse componente de uma melhor maneira e mostrar que, o principal atributo Visible=True não pode ser usado com este componente ModalDialogExtender dentro do Panel.

Resultado do Artigo

Ter primeiramente um link ou botão que, ao clicar ou ao ser acionado; aparecerá uma tela modal em cima da página principal. (Imagem modal 1)

Imagem modal1

Acionando o controle, apareceu uma tela com alguns botões e outros controles próprios a serem executados, caso necessário. (Imagem modal 2)

Imagem modal 2

Note que existe uma página acima de outra desabilitada. Mesmo se clicar fora da página, não some a página da frente. Existem alguns sites que mostram uma página na frente da outra só que, se clicar em qualquer parte da página a tela da frente some.

O que mostro aqui é como utilizar corretamente esse tipo de componente, passo a passo.

Na prática

Considerando que você, desenvolvedor, está utilizando a ferramenta indicada na referência e instalou o ajax toolkit corretamente, o próximo passo é a criação do projeto.

Abri o Visual Studio .NET 2008, cliquei em File / New Web Site... (Imagem modal 3).

Imagem modal 3

No passo seguinte, escolhi a linguagem e a versão do framework. (Imagem modal 4)

Imagem modal 4

Escolhi a linguagem Visual C#, o templates ASP.NET Web Site e a versão do framework .NET Framework 3.5. No clique do botão Ok, foi criado um projeto e com a página Default.aspx. (Imagem modal 5)

Imagem modal 5

Gerando o Style

O próximo passo que mexi foi, gerar uma folha de StyleSheet, assim facilita com as imagens de fundo e tudo mais. (Imagem modal 6)

Imagem modal 6

A folha de estilo me ajuda a modelar como irá aparecer a minha tela.

Dentro da página, usei drag in drop com os componentes do toolbox. É importante seguir o passo a passo para não haver erro.

Na página Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register

Assembly="AjaxControlToolkit"

Namespace="AjaxControlToolkit"

TagPrefix="ajaxToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>Untitled Page</title>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:LinkButton ID="linkQualquer" runat="server" Text="View" Font-Names="Calibri"></asp:LinkButton>

<asp:Button ID="cmdEnviar" Text="Enviar" runat="server" />

</p>

</form>

</body>

Code 1.1

A página está normal, apenas com um linkButton e um botão. Coloquei o ScriptManager depois do form. Para utilizar o AjaxToolkit:ModalPopupExtender, preciso usar o Panel, componente do framework. Tudo que tiver dentro do panel aparece na página sobreposta a outra. (Code 1.2)

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none" Width="668px">

<div>

<tr>

1</td>

ASP.NET</td>

Mumbai</td>

1</td>

 160000 P.A.</td>

</tr>

<tr>

2</td>

JAVA</td>

Kolkata</td>

0</td>

 140000 P.A.</td>

</tr>

</table>

<asp:Button ID="OkButton" runat="server" Text="OK" />

<asp:Button ID="CancelButton" runat="server" Text="Cancel" />

</p>

</div>

</asp:Panel>

Code 1.2

Dentro do Panel, coloquei dois botões. Um chamado OkButton e outro CancelButton, responsáveis para sair do componente. Referencio mais a frente estes botões dentro do modalpopupextender. Note que não coloquei o Visible no panel; coloquei apenas o Style=”display:none”.

Antes do panel, ou dois, (vai da sua preferência), coloquei a tag do modal. (Code 1.3)

<ajaxtoolkit:modalpopupextender id="ModalPopupExtender" runat="server"

backgroundcssclass="modalBackground"

cancelcontrolid="CancelButton" dropshadow="true" okcontrolid="OkButton"

popupcontrolid="Panel1" popupdraghandlecontrolid="Panel3" targetcontrolid="linkQualquer"></ajaxtoolkit:modalpopupextender>

Code 1.3

No atributo targetcontrolid referenciei o meu linkButton criado no início da página. Coloquei também a tag popupcontrolid referenciando o panel1, ou seja, no momento do clicar o painel vai aparecer.

Coloquei também os dois botões do painel nas tags okcontrolid e cancelcontrolid.

Cliquei F5 e estava lá... Tudo funcionando e sem qualquer linha de código em C#.NET, só HTML e estilo. (Imagem modal 7)

Imagem modal 7

O legal desse componente que, se clicar em qualquer outra parte da tela, fica como se estivesse bloqueada. É bem legal porque a parte da frente não sai enquanto eu não clicar nos botões.

Outros componentes por ai, caso clique em uma outra parte da tela da frente some.

Bom, eu fico por aqui. Caso tiver alguma dúvida pode entrar em contato. Deixo um desafio bem simples para você leitor(a); tente fazer com o botão Enviar esta funcionalidade.

Desenvolvimento - ASP. NET

ModalDialogExtender
Esse artigo trata brevemente do componente chamado ModalDialogExtender do pacote Ajax Toolkit.
por Mauricio Junior

Leia também

Desenvolvimento - ASP. NET

ModalDialogExtenderEsse artigo trata brevemente do componente chamado ModalDialogExtender do pacote Ajax Toolkit.por Mauricio Junior

Leia também

ModalDialogExtender
Esse artigo trata brevemente do componente chamado ModalDialogExtender do pacote Ajax Toolkit.
por Mauricio Junior