Clique aqui para ler esse artigo em PDF.
Clique aqui para ler todos os artigos desta edição
DHTML com ASP.NET
|
Este artigo discute |
Este artigo usa as seguintes tecnologias |
|
·O que é DHTML; ·Criação de controles ASP .NET; ·Trabalhando com postbacks ·Interação entre código JavaScript e controles ASP .NET. |
Visual Basic .NET, ASP.NET 2.0, JavaScript, DHTML e CSS
|
A manipulação do HTML de forma dinâmica no cliente, afim de prover maior interatividade entre o usuário e a aplicação e criar animações, é uma prática muito utilizada há alguns anos. São muitos os sites, portais e aplicações web em que podemos movimentar, esconder, trocar fontes e cores de elementos diversos. Com a popularização do AJAX essa prática tem crescido ainda mais. O foco deste artigo é trazer o DHTML às aplicações ASP.NET e entender como fazer a comunicação entre os dados gerados dinamicamente no cliente e o servidor.
O que é DHTML
DHTML é a sigla de Dynamic HTML e não é uma tecnologia por si só, mas a utilização de um grupo de tecnologias, como HTML, linguagem de script (como JavaScript ou VBScript), CSS (Cascading Style Sheets) e o modelo de objetos do HTML (DOM - Document Object Model). Com DHTML pode-se modificar a visualização e o comportamento de uma página após ela ter sido carregada no navegador cliente, dando a impressão de interatividade e dinamismo. Todo o código manipulado fica no cliente e não é enviado ao servidor até que exista um postback.
A questão toda reside em como informar o servidor das mudanças feitas no cliente e como persistir esses dados. Suponha que em determinada aplicação o usuário possa trocar dinamicamente a cor de fundo de algum elemento, com uso de DHTML. No primeiro postback essa informação é perdida, já que o servidor não tem conhecimento da troca de cor que ocorreu apenas no cliente. Como resolver esse problema? Obviamente precisamos criar um canal de comunicação entre os elementos para os quais queremos persistir as mudanças, e o servidor que precisa ser informado de tal mudança.
O cenário do projeto
Para fazer a prova de conceito que integrará DHTML com comunicação das mudanças dinâmicas no cliente ao servidor, criaremos um controle web que terá três comportamentos dinâmicos disponíveis: será possível ser arrastado com drag and drop, poderá ter sua cor de fundo alterada através da mudança dos dados de um DropDownList e permitirá a adição dinâmica de itens ao DropDownList.
A solução será composta de dois projetos, um do tipo Web Site e outro do tipo Class Library. O projeto que fará a prova de conceito é o projeto do tipo Class Library que conterá uma classe que herdará de WebControl chamada DHTMLPanel. A criação desse projeto é baseada no Template Web Control Library para facilitar a criação de referências e arquivos de exemplo. O projeto Web Site contém simplesmente uma página web (default.aspx) que hospedará o controle, onde seu objetivo é simplesmente testar o controle.
Criando o projeto de controle
Inicie o Visual Studio 2005 e na página inicial clique em Create Project.
Note que o Visual Studio adiciona um arquivo com controle customizado de exemplo, com o nome WebCustomControl1. Não utilizaremos esse arquivo, portanto podemos excluí-lo do projeto. Adicionaremos agora o arquivo que conterá nosso controle customizado. Vá ao menu Project>Add New Item e escolha WebCustomControl. Nomeie-o para “DHTMLPanel.vb” e clique em Add.
Exclua a propriedade Text e o método RenderContents do arquivo, já que não usaremos nenhum dos dois. O controle deverá também implementar duas interfaces importantes: IPostBackDataHandler e InamingContainer. Ao implementar as interfaces, os métodos serão criados automaticamente. Será também necessário adicionar uma declaração de Imports ao início do arquivo para o namespace System.Drawing. O código da classe gerado deve estar semelhante ao da Listagem 1.
Listagem 1. Código Inicial do controle
Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Text
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Drawing
DefaultEvent("PosicaoAlterada"), _
DefaultProperty("Posicao"), _
ToolboxData("<:DHTMLPanel runat=""server"">")> _
Public Class DHTMLPanel
Inherits WebControl
Implements IPostBackDataHandler, INamingContainer
#Region " Implementação de IPostBackDataHandler "
Protected Function LoadPostData( _
ByVal postDataKey As String, _
ByVal postCollection As System.Collections. _
Specialized.NameValueCollection) As Boolean _
Implements System.Web.UI.IPostBackDataHandler. _
LoadPostData
End Function
Protected Sub RaisePostDataChangedEvent() _
Implements System.Web.UI.IPostBackDataHandler. _
RaisePostDataChangedEvent
End Sub
#End Region
End Class
Nesse momento, o editor do Visual Studio estará indicando que o evento PosicaoAlterada não existe. Vamos resolver esse problema e criar o código desse evento. O controle lançará dois eventos, o já mencionado PosicaoAlterada e também " [...] continue lendo...
