we are developers

iMaster Developers

iMaster DevelopersPowered by:

.NET

25 nov, 2011

ASP .NET 4.0 – Usando os recursos do Ajax (ModalPopup)

José Carlos Macoratti

Tem 594 artigos publicados com 35356165 visualizações desde 2011

José Carlos Macoratti
Publicidade

Em uma aplicação ASP .NET tudo começa quando o navegador faz uma solicitação para uma página usando GET ou POST.

O servidor por sua vez processa a página e envia de volta o resultado como HTML. Em seguida o navegador analisa o HTML e processa a página para o usuário que iniciou a requisição. Quando o usuário interage com a página (clicando em um botão), a página é enviada de volta para o servidor, e depois a página inteira é carregada no navegador novamente.

A figura abaixo mostra uma representação visual deste processo:

Embora este modelo venha sendo usado há anos para servir páginas web, ele tem alguns inconvenientes. Em primeiro lugar, porque toda a página é carregada depois de um postback, o HTML enviado ao navegador é muito maior do que ele precisa ser.

Com a utilização do Ajax isso mudou: em vez de enviar a página inteira como uma resposta, o servidor envia uma resposta parcial (contendo pouco mais do que a mensagem de texto enviada), que é então utilizado pelo navegador para atualizar apenas a parte da página que mudou, deixando o resto da página como era.

Outro inconveniente no modelo tradicional que usa a recarga completa da página tem a ver com a maneira como o navegador renderiza a página.

A página inteira é substituída, o navegador redesenha novamente a página completa e isso faz com que a página ‘pisque’, resultando em uma experiência não muito atraente para o usuário final.

A utilização do Ajax é justamente para superar esses problemas, como veremos neste artigo.

Os conceitos por trás do Ajax são usados há muitos anos. Os navegadores, desde o Internet Explorer 5, são fornecidos com o objeto XMLHttpRequest, que permite fazer chamadas para o servidor de JavaScript para enviar e receber dados.

Outras técnicas também são usadas para emular o comportamento do que agora é chamado Ajax, incluindo Macromedia Flash, elementos iframe, ou frames escondidos.

Quando o termo Ajax foi introduzido as coisas realmente decolaram. Em uma tentativa de permanecer à frente, a Microsoft começou a construir o ASP.NET AJAX, e hoje o framework Ajax está totalmente integrado ao ASP.NET e ao Visual Web Developer 2010.

O ASP .NET AJAX é um framework grátis que pode ser usado para construir uma nova geração de aplicações web com mais interatividade e recursos.

Usando os recursos do AJAX – ModalPopup Extender

Neste artigo eu vou mostrar como usar o controle ModalPopup Extender em uma aplicação ASP .NET usando Ajax.

O controle ModalPopup simula uma janela popup que é usada em aplicações desktop. Para poder usá-lo você tem que ter instalado o AjaxToolKit.

Após baixar o pacote, descompacte-o em uma pasta de sua escolha. No meu caso eu usei a pasta: C:\Program Files (x86)\AjaxToolKit092011

Abra o Visual Web Developer 2010 Express Edition e crie um novo projeto escolhendo o menu File, opção New Web Site, e o template ASP .NET Web Empty Web Site, com o nome Ajax_ModalPoup. Depois, clique em OK.

A seguir, no menu Project, clique em Add New Item e selecione o template Web Form, aceitando o nome padrão Default.aspx.

Para instalar o AjaxToolKit clique com o botão direito sobre a ToolBox e selecione a opção Add tab, informando o nome AjaxToolKit2011:

A seguir, clique com o botão direito do mouse sobre a Tab criada e a seguir clique em Choose Items:

Na janela que será aberta clique no botão Browse e localize a pasta onde você descompactou o AjaxToolKit; selecione o arquivo AjaxControlToolkit.dll.

A aba será preenchida com os controles disponíveis do AjaxControlToolKit e teremos acesso ao controle ModalPopup Extender.

Abaixo temos a sintaxe exibindo as propriedades deste controle:

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
    TargetControlID="LinkButton1"
    PopupControlID="Panel1"
    BackgroundCssClass="modalBackground"
    DropShadow="true"
    OkControlID="OkButton"
    OnOkScript="onOk()"
    CancelControlID="CancelButton"
    PopupDragHandleControlID="Panel3" >
        <Animations>
            <OnShowing> ..  </OnShowing>
            <OnShown>   ..  </OnShown>   
            <OnHiding>  ..  </OnHiding>           
            <OnHidden>  ..  </OnHidden>           
        </Animations>
    </ajaxToolkit:ModalPopupExtender>

A seguir um resumo do significado das propriedades:

  • TargetControlID – A identificação do elemento que ativa o popup modal
  • PopupControlID – A identificação do elemento para mostrar como um popup modal
  • BackgroundCssClass – A classe CSS para aplicar ao segundo plano quando o popup modal é exibido
  • DropShadow – O valor True adiciona automaticamente uma sombra ao popup modal
  • OkControlID – O ID do elemento que descarta o popup modal
  • OnOkScript – Script para ser executado quando o popup modal é descartado com o OkControlID
  • CancelControlID – O ID do elemento que cancela o popup modal
  • OnCancelScript – Script para ser executado quando o popup modal é descartado com o CancelControlID
  • PopupDragHandleControlID – A identificação do elemento incorporado que contém o cabeçalho popup/título que será usado como um identificador de drag
  • X – A coordenada X do canto superior esquerdo do popup modal (o pop-up será centralizado horizontalmente se não especificado)
  • Y – A coordenada Y do canto superior esquerdo do popup modal (o pop-up será centrado na vertical, se não especificado)
  • RepositionMode – A configuração que determina se as necessidades popup para ser reposicionados quando a janela é redimensionada ou rolada.

No exemplo deste artigo irei mostrar um a janela popup solicitando a realização do login onde o usuário pode cancelar o popup ou efetivar a operação.

Selecione a página Default.aspx e no modo Source vamos incluir a partir da Toolbox o seguintes controles:

01. Primeiro vamos incluir o controle ScriptManager a partir da tab AJAX Extensions:

<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>

02. A seguir vamos incluir um controle LinkButton a partir da tab Standard:

<asp:LinkButton ID="lnkLoginbtn" runat="server" >Clique aqui para realizar o Login</asp:LinkButton>

03. Agora vamos incluir um controle Panel a partir da tab Standard e definir no seu interior o seguinte código:

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: table" >
<table style="width: 270px">
<tr>
<td align="right">
    <asp:Label ID="lblUsuario" runat="server" Height="30px" Text="Usuário :"></asp:Label>
</td>
<td style="width: 179px" >
   <asp:TextBox ID="txtUsuario" runat="server" Width="100px"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 30% " align="right">
   <asp:Label ID="lblSenha" runat="server" Height="30px" Text="Senha :"></asp:Label>
</td>
<td style="width: 179px">
   <asp:TextBox ID="txtSenha" runat="server" Width="100px"></asp:TextBox></td>
</tr>
<tr>
<td >
</td>
<td> &nbsp; &nbsp; &nbsp;
   <asp:Button ID="btnCancela" runat="server" Text="Cancela" />
   <asp:Button ID="btnLogin" runat="server" Text="LogIn" OnClick="btnLogin_Click" /></td>
</tr>
</table>
</asp:Panel>

04. Agora vamos incluir um controle ModalPopupExtender a partir da tab AjaxToolKit2011 :

<asp:ModalPopupExtender ID="ModalPopupExtenderLogin" runat="server"
TargetControlID="lnkLoginbtn"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="btnLogin"
OnOkScript="ok()"
CancelControlID="btnCancela" />

Vejamos as propriedades que definimos para o controle ModalPopupExtender:

  • O controle que irá ativar a janela Popup será o controle lnkLoginbtn definido pela propriedade TargetControlID;
  • O controle que cancela a janela será o controle btnCancela definido na propriedade CancelControlID;
  • A janela Popup tem o arquivo de estilo definido com o nome de modalBackground na propriedade BackgroundCssClass;

Temos então que definir dois estilos: o do controle Panel e o da janela Popup.

<title>ModalPoup</title>
<style type="text/css">
.modalBackground
{
   background-color: Aqua;
   top: 0px !important;
   left: 0px !important;
   position: absolute !important;
   z-index: 1 !important;
}
.modalPopup
{
   background-color: #fffddd;
   padding: 3px;
   z-index: 10001;
}
</style>

O código completo da página Default.aspx pode ser visto a seguir:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ModalPoup</title>
 <style type="text/css">
  .modalBackground
  {
    background-color: Aqua;
    top: 0px !important;
    left: 0px !important;
    position: absolute !important;
    z-index: 1 !important;
  }
  .modalPopup
  {
    background-color: #fffddd;
    padding: 3px;
    z-index: 10001;
  }
 </style>
</head>
<body>
<form id="form1" runat="server">
  <asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<div>
  <asp:LinkButton ID="lnkLoginbtn" runat="server" >Clique aqui para realizar o Login</asp:LinkButton>
</div>
<div>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: table" >
<table style="width: 270px">
<tr>
<td align="right">
<asp:Label ID="lblUsuario" runat="server" Height="30px" Text="Usuário :"></asp:Label>
</td>
<td style="width: 179px" >
<asp:TextBox ID="txtUsuario" runat="server" Width="100px"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 30% " align="right">
<asp:Label ID="lblSenha" runat="server" Height="30px" Text="Senha :"></asp:Label>
</td>
<td style="width: 179px">
<asp:TextBox ID="txtSenha" runat="server" Width="100px"></asp:TextBox></td>
</tr>
<tr>
<td >
</td>
<td>
&nbsp; &nbsp; &nbsp;
<asp:Button ID="btnCancela" runat="server" Text="Cancela" />
<asp:Button ID="btnLogin" runat="server" Text="LogIn" OnClick="btnLogin_Click" /></td>
</tr>
</table>
</asp:Panel>
</div>
<div>
<asp:ModalPopupExtender ID="ModalPopupExtenderLogin" runat="server"
     TargetControlID="lnkLoginbtn"
     PopupControlID="Panel1"
     BackgroundCssClass="modalBackground"
     DropShadow="true"
     OkControlID="btnLogin"
     OnOkScript="ok()"
     CancelControlID="btnCancela" />
</div>
</form>
</body>
</html>

Para evitar o erro na compilação do web site, defina no arquivo Default.aspx.vb o código do evento Click do botão Login: 

Protected Sub btnLogin_Click(sender As Object, e As System.EventArgs) Handles btnLogin.Click

End Sub

Executando o web site teremos a exibição do link para login na página. Ao clicar no linkbutton a janela popup com o formulário de login será exibido:

O botão cancela permite cancelar a operação e retornar a página inicial do link.

Dessa forma vimos como é simples usar os recursos do AJAX em páginas ASP .NET.

Pegue o projeto completo aqui: Ajax_ModalPopup.zip (sem o AjaxControlToolkit.dll)

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

José Carlos Macoratti
Saiba mais

José Carlos Macoratti

edit594 Artigo(s)

é referência em Visual Basic no Brasil e autor dos livros "Aprenda Rápido: ASP" e "ASP, ADO e Banco de Dados na Internet". Mantenedor do site macoratti.net.