Trabalhando com DataList em ASP.NET

Ol� developers!

Certa vez tive a necessidade de exibir dados com um layout n�o convencional, fora dos padr�es de um GridView por exemplo, onde a exibiç�o se d� linearmente. Pesquisei nos controles nativos do asp.net e me deparei com o DataList. Ca� em campo para verificar se o mesmo atendia a todas as minhas necessidades. Foi batata!

De cara, observei que o mesmo trabalhava com templates (modelos), comportamento o qual o habilita a adicionar a mais variada gama de componentes. Exatamente o que eu estava procurando.

Vamos a um pequeno exemplo para ver do que estou falando.

Primeiramente, crie um novo Web Site de nome DataListWebSite em File > New > Web Site, como mostra a figura 1.

Figura 1: Criando um novo web site

Neste exemplo estou utilizando o .NET Framefork 3.5, mas acredito que num outro framework funcionar� da mesma forma ou similar.

Para direcionar o framework no qual sua aplicaç�o trabalhar�, basta no mesmo momento da criaç�o do Web Site ou projeto, informar o mesmo. Conforme � mostrado na figura 2.

Figura 2: Selecionando o framework da aplicaç�o

Um breve par�ntese

Lembrando que o framework da aplicaç�o tamb�m pode ser modificado posteriormente, por�m, eu desaconselho essa pr�tica, pois o framework � o coraç�o da aplicaç�o e tudo que for desenvolvido em cima dele, seja em qual linguagem for, estar� focado neste framework previamente escolhido, sendo assim, um dos problemas que poder� ocorrer ao modific�-lo posteriormente � que determinada funcionalidade n�o possa mais ser utilizada pelo fato de ela ainda n�o existir no framework escolhido, caso seja selecionado um framework anterior, ou da mesma forma, tamb�m n�o funcionar, caso tenha-se escolhido um framework posterior onde a funcionalidade possa ter sido descontinuada.

Para simplificar e atingir nosso objetivo, vamos direto ao ponto e descartemos layouts aprimorados, regados a CSS (Cascade Style Sheet) e afins.

Com o projeto j� criado e com o form �Default.aspx� (gerado automaticamente pelo Visual Studio) selecionado e setado no modo Design (figura 3), v� em sua Toolbox, localize a aba �Data�, selecione e arraste para o seu form Default.aspx o componente �DataList�. Seu projeto dever� ter aspecto parecido ao da figura 4.

Figura 3: Modo design

Figura 4: Datalist adicionado ao form

Bom, o datalist j� foi adicionado ao projeto, por�m, nada � feito com ele ainda. Vamos dar algum movimento � nossa aplicaç�o.

Para dar prosseguimento � nossa aplicaç�o, ser� necess�rio obter o banco de dados de exemplo �AdventureWorks�, o qual at� a data de publicaç�o deste artigo podia ser baixado do atrav�s do link: http://msftdbprodsamples.codeplex.com/downloads/get/106391.

Ap�s baixar e instalar o banco de dados, criei uma classe chamada produto que est� contida na mesma camada da aplicaç�o, onde a qual possui um �nico m�todo, obter_produtos, este que n�o possui par�metros e seu tipo de retorno � um DataTable (objeto contido no namespace � System.Data). O m�todo se conecta a um banco de dados local e traz apenas os cinco primeiros registros contidos na tabela �product�, a criaç�o desta classe ser� ilustrada mais adiante.

Agora precisamos adicionar ao template do datalist um componente capaz de receber dados do tipo string, que � o tipo da coluna descritiva do produto, a qual ainda vamos consultar. Observe exemplo nas figuras 5 e 6.

Figura 5: Abrindo o template do nosso datalist para ediç�o via smart tag

Figura 6: Componente label adicionado ao template do datalist

Implementaç�o da classe produto

Em mat�ria de componentes, j� temos o que precisamos, agora � a hora de partirmos para a parte l�gica da aplicaç�o, onde criaremos uma pequena classe, com apenas um m�todo.

Para isso, acesse a janela do Solution Explorer (Ctrl+w+s) e clique com o bot�o direito do mouse em cima do seu projeto, que se foi seguido � risca dever� estar com o nome DataListWebSite e selecione a opç�o Add New Item no menu suspenso que se abrir. Veja como na figura 7.

Figura 7: Adicionando novo item ao projeto

Em seguida, outra janela se abrir�, trata-se de uma facilidade da IDE que lista os templates padr�o para que seja escolhido um desejado, que no nosso caso trata-se de uma classe, portanto, localize o template Class, selecione-o e o renomeie para produto.cs, conforme mostra a figura 8.

Figura 8: Selecionando template Class e renomeando o arquivo

Caso n�o esteja selecionada a linguagem Visual C# no campo Language, selecione-a.

Ser� emitida uma mensagem de alerta, informando que um arquivo especial do tipo (classe) est� sendo criado em um projeto Website e que em geral estes arquivos s�o colocados na pasta App_Code. Pode confirmar dizendo que sim. Em geral, a confirmaç�o ou negaç�o desta aç�o n�o influi no funcionamento padr�o da aplicaç�o. Observe a figura 9.

Figura 9: Confirmando a criaç�o da pasta App_Code

Codificaç�o da classe produto

Ap�s a confirmaç�o da criaç�o da classe, a pr�pria IDE posiciona o desenvolvedor dentro do arquivo e gera os namespaces padr�o, a declaraç�o da classe e j� contendo um m�todo construtor p�blico com o pr�prio nome da classe. Agora criaremos nosso m�todo de nome obter_produtos, o qual dever� conter as seguintes linhas de c�digo. Verifique a Listagem 1.

Listagem 1: Codificando a classe produto

public DataTable obter_produtos()
{
	DataTable tbl = new DataTable();
	SqlConnection con = new SqlConnection("server=cronos;database=AdventureWorksLT2008;Trusted_Connection=true;");
	SqlCommand cmd = new SqlCommand("select top 5 from SalesLT.Product", con);
	SqlDataAdapter da = new SqlDataAdapter(cmd);
	da.Fill(tbl);
	return tbl;
}

Selecionando arquivo para consumir a classe produto

Da mesma forma como anteriormente, ser� necess�rio acessar um arquivo listado no Solution Explorer, para que possamos codific�-lo. Pressione simultaneamente as teclas (Ctrl+w+s) e clique duas vezes sobre o arquivo Default.aspx.cs.

Figura 10: Selecionando o arquivo Default.aspx.cs atrav�s do Solution Explorer

Ap�s selecionar o arquivo que conter� nosso source code, todo seu conte�do � mostrado, perceba que o mesmo cont�m apenas as diretivas das bibliotecas padr�o do asp.net, a definiç�o da partial class e o m�todo Page_Load, que � invocado sempre que ocorre um post na p�gina. Este ser� justamente o m�todo utilizado para aplicar o nosso exemplo.

Figura 11: Exibiç�o do arquivo Default.aspx.cs e seu source code padr�o

Agora � o momento de consumir a classe rec�m-criada.

Dentro do evento Page_Load insira os c�digos da mesma forma como listado na Listagem 2.

Listagem 2: Consumindo o m�todo obter_produtos da classe produto

public partial class _Default : System.Web.UI.Page
{
	protected void Page_Load(object sender, EventARgs e)
	{
		if(!IsPostBack)
		{
			produto objProd = new produto();
			DataList1.DataSource = objProd.obter_produtos();
			DataList1.DataBind();
		}
	}
}

Explicando a codificaç�o no evento Page_load

A linha if (!IsPostBack) verifica se a p�gina est� executando o primeiro post, ou seja, se � o primeiro retorno de requisiç�o feita ao servidor, pois o ato de carregar uma p�gina, significa dizer que a aplicaç�o fez determinada solicitaç�o ao servidor e retornou com o resultado, fazendo com que a p�gina seja carregada. Um postback, � um novo post, ou seja, n�o se trata mais do primeiro post. Automaticamente fazendo com que o DataList somente seja carregado uma �nica vez. Isso � muito para n�o sobrecarregar o servidor com requisiç�es desnecess�rias.

A linha produto objProd = new produto(); instancia em mem�ria a classe produto, a qual cont�m o m�todo que queremos consumir.

A linha DataList1.DataSource = objProd.obter_produtos(); invoca o m�todo obter_produtos contido na inst�ncia da classe produtos do objeto objProd. e seta o DataList1 a esta fonte de dados, que no caso espec�fico trata-se de um DataTable.

E por fim a linha DataList1.DataBind(); faz com que os dados sejam populados no DataList.

Execuç�o da aplicaç�o

Ao executar a aplicaç�o o resultado dever� ser parecido com o da figura 14.

Figura 12: Execuç�o da aplicaç�o

Conclus�o

Esse � o resultado final da execuç�o da aplicaç�o, que � primeira vista pode parecer comum, por�m � extremamente poderoso, pois pode-se adicionar outros componentes concomitantemente, como LinkButtons, DropDownLists, HyperLinks, Images, e etc. Lembrando tamb�m que � poss�vel criar o layout que desejar, pois os objetos adicionados podem estar dentro de uma Table ou Div, por exemplo, a criatividade � o limite. Vale ressaltar que para atribuir uma imagem oriunda de um banco de dados a um objeto Image, � necess�rio utilizar manipuladores (arquivos .ASHX), mas isso � assunto para outro artigo.