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 modela 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<br /><br /><br /><br /><br />
<p align="center">
<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>
<p style="text-align: center">
<table width="100%">
<tr>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
1</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
ASP.NET</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
Mumbai</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
1</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
160000 P.A.</td>
</tr>
<tr>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
2</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
JAVA</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
Kolkata</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
0</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
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 Stilo. (Imagem modal 7)
Imagem modal 7
É 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.
