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!
