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 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>
            &nbsp;
            <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;">
                                &nbsp;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;">
                                &nbsp;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.