Olá pessoal, neste artigo irei mostrar como customizar, de forma simples, um controle do tipo DataList. Acompanhem:

Para quem não sabe, o DataList é basicamente uma lista que contém os dados vindos de um banco que você configura e que é muito útil em diversos tipos de aplicações. Ele é altamente configurável, com diversas propriedades.

PS: Para mais informações sobre o DataList, recomendo a leitura deste link.

Para este artigo, usei o banco de exemplo da Microsoft, Northwind. Para quem quiser baixá-lo, é só seguir as instruções neste link ou neste artigo.

Neste exemplo iremos popular o DataList com os dados da tabela de Categorias de nosso banco Northwind e exibirmos, em cada registro de nosso DataList, um HyperLink para o usuário acessar os Produtos referentes a respectiva categoria. Assim em cada link que o usuário clicar será aberto uma página com os dados daquela linha que ele clicou.

Para conseguirmos isso, temos que usar a parametrização em nossas consultas ao banco e trabalharmos com QueryString. Veja como é simples:

Abra o Visual Studio, vá em File > New Project (CTRL + SHIFT + N), escolha o template ASP.NET Web Application, dê o nome CustomizandoDataList e clique em OK.

Na Solution Explorer (CTRL + W + S) adicione uma nova página, que será a que receberá os dados e que será redirecionada quando clicarmos no HyperLink do DataList. Dê o nome a ela de DadosDataList.aspx.


Nesta página arraste um GridView, ele será populado com todos os Produtos referentes a uma determinada Categoria. Dito isto, passaremos como parâmetro o ID da Categoria em nosso GridView.

Então clique na SmartTag, altere a formatação do Grid e clique em Choose Data Source: e em New data source..., para fazermos a conexão com o banco de dados NorthWind.

OBS: Não entrarei em detalhes sobre a conexão com o banco, pois esse não é o intuito do artigo, já que em outro artigo abordo este assunto com mais detalhes.

Na janela que pede para você configurar a instrução de Select, escolha a tabela Products e as colunas ProductID, ProductName, CategoryID e UnitPrice, como a imagem abaixo nos mostra:


Temos que fazer a vinculação do Produto com a Categoria. Para isso, nesta mesma janela de cima, clique no botão WHERE... e altere os campos para o da imagem a seguir:


Desta forma fizemos um filtro onde o ID da categoria for igual à QueryString CategoryID, que será o ID da Categoria que for clicada.

Definindo este filtro em nosso Where, fazemos uma consulta parametrizada.

Clique em Add, OK e Next. Se quiser clique em Test Query, passe um ID de 1 a 8 (já que o valor dos ID’s das tabelas de Categorias são somente estes oito) no campo Value e clique em OK.

 

Clique em Finish, nossa página está pronta.

Agora vá a página principal, a Default.aspx, e adicione o DataList nela.

Configure o DataSource desse DataList para receber as colunas CategoryID, CategoryName e Description da tabela Categories, como você pode ver na imagem a seguir:


Essa consulta não terá filtro, pois queremos retornar todas as categorias. Clique em Next e Finish.

Altere a propriedade RepeatColumns para 3, para repetirmos as colunas do DataList três vezes. Altere também a propriedade RepeatDirection para Horizontal. Como você pode perceber existem diversas outras propriedades, altere as que acharem mais conveniente em sua aplicação.

Na próxima parte de nosso artigo veremos a conclusão de nosso exemplo com DataList.

Aguardem!