Artigo da .net Magazine 40 - Janelas popup com Ajax

P>

Clique aqui para ler todos os artigos desta edição

AJAX

Janelas popup com Ajax

Se você leu a edição 37 da .net Magazine, deve ter visto o artigo sobre como usar janelas popup para pesquisas do tipo lookup no ASP.NET. Como sabemos o Ajax está em sua versão RTM e traz um grande número de recursos que permitem criar aplicações Web com interfaces parecidas com as aplicações Windows.

Que tal explorarmos um pouco mais as funcionalidades do Ajax e criarmos nossas pesquisas lookup sem a necessidade de usarmos janelas popup no browser? É exatamente isso que veremos neste artigo.

Atualize a última versão do Ajax

É muito importante que você tenha a última versão do Ajax instalada. A versão final do Ajax, conhecida como v1.0, você encontra para download no seguinte link: ajax.asp.net/downloads/default.aspx?tabid=47. Nesse mesmo link você também encontra o download do Features January CTP. Faça o download deste CTP e instale-o também.

Antes de começar a instalação dos downloads, vá em Adicionar e Remover Programas no Painel de Controle e remova qualquer instalação do Ajax que tenha em seu computador. Em seguida instale primeiramente o Ajax v1.0 e depois instale o CTP. As duas instalações são bem simples e não precisam de nenhuma configuração adicional.

Criando um projeto com Ajax

Já podemos começar o desenvolvimento do nosso exemplo. Para isso abra o Visual Studio 2005 e vá até a opção File>New>WebSite. Como mostra a Figura 1, devemos escolher o item ASP.NET AJAX CTP-Enabled Web Site.

Figura 1. Criando um Web Site usando AJAX

Com esse template poderemos utilizar as features do CTP em nosso projeto. Em seguida escolha C# em Language, informe o nome de “JanelasLookup” em Location e clique em OK.

Northwind

Vamos simular neste exemplo a mesma tela de inclusão de pedidos que fizemos no artigo anterior. Para isso utilizaremos o banco Northwind em um SQL Server 2005.

Crie uma conexão com o Northwind no Server Explorer e veja como mostra a Figura 2, que temos a tabela Customers, que será utilizada na pesquisa lookup que faremos.

Figura 2. Tabelas do banco Northwind

Formulário para inclusão do pedido

Na Default.aspx desenhe uma interface como demonstrado na Figura 3. Veja que temos um formulário simples para a inclusão de Pedidos, dentro de um UpdatePanel. Observe que temos dois Buttons no formulário, um para o campo Customer e outro para o Order Date. Eles serão utilizados para chamarmos as janelas de pesquisa do exemplo.

Uma observação importante antes de continuarmos é que, como o foco do artigo é a pesquisa lookup, não vamos nos preocupar com validações e rotinas de inclusão.

Figura 3. Layout da página Default.aspx

Calendário

Vamos começar desenvolvendo a pesquisa lookup para o campo OrderDate. Nesse caso o ideal é exibirmos um calendário para que o usuário possa selecionar a data. Uma preocupação que devemos ter quando vamos desenvolver janelas de pesquisa é a possibilidade de reutilizarmos a mesma em outras partes do sistema. Dessa forma podemos criar uma pesquisa de datas que poderá ser reutilizada em outras janelas do site.

A melhor forma de criarmos uma pesquisa reutilizável é usando os Web User Controls. Sendo assim, clique com o botão direito sobre o projeto no Solution Explorer e escolha a opção Add New Item. Como mostra a Figura 4, escolha o item Web User Control, informe “CalendarControl.ascx” em Name e clique em Add.

Figura 4. Criando o WebUserControl CalendarControl.ascx

Em seguida você deve desenhar o layout do controle como mostra a Figura 5. Veja que nesse layout temos um UpdatePanel com um Panel chamado pnlCalendar dentro. Esse Panel é muito importante e não pode ser omitido nessa interface.

Veja que todo o desenho do controle foi feito dentro do Panel para a tabela, Label, Calendar e dois Buttons. Configure as propriedades desses controles como mostra as legendas.

Figura 5. Layout do CalendarControl.ascx

Veja que abaixo do Panel temos um controle chamado DragOverlayExtender. Esse controle pertence às features CTPs do Ajax, e por isso ele não aparece na ToolBox. Porém você pode incluí-lo diretamente no source code.

Esse código deve ser incluído logo abaixo da tag , que é a tag que encerra o controle Panel, com o seguinte código:

<asp:dragoverlayextender

    id="DragExtender1" runat="server"

    enabled="true"

    targetcontrolid="pnlCalendar">

asp:dragoverlayextender>

Com o layout do controle desenhado, podemos codificá-lo. Vá ao código do controle CalendarControl.ascx e inclua o código da Listagem 1.

Listagem 1. Classe CalendarControl

public partial class CalendarControl :

...