GridView : Imagens no Lugar de Valores - Aplicação ASP.NET - Parte 1

Neste artigo mostro como exibir imagens no GridView no lugar de valores, em uma aplicação ASP.NET.


Olá pessoal, neste artigo irei mostrar como exibir imagens em uma coluna do GridView no lugar de valores. Acompanhem:

Neste exemplo, iremos exibir um GridView com dados vindos de uma tabela (fictícia) de Vendas e, na última coluna, que será do tipo de pagamento, teremos três valores: Cartão de Crédito, Cheque ou Dinheiro. Nesta coluna, ao invés de mostrarmos o ID referente ao tipo de pagamento, iremos exibir uma imagem referente ao tipo de pagamento, ou seja, teremos três imagens, uma para cada tipo de pagamento.

Antes de criarmos a aplicação precisamos criar a tabela de Vendas. Então abra o SQL Server e crie uma tabela simples (via query), com as seguintes colunas:


Agora insira seis registros para usarmos como teste:


Pronto, banco criado. Irei disponibilizar o script comentado deste exemplo ao final do artigo, junto com a aplicação.

Perceba que criei a coluna Tipo, do tipo inteiro, sendo que quando o valor desta coluna for 1, o tipo de pagamento será Cartão de Crédito, quando for 2 será Cheque e quando for 3, será Dinheiro.

Agora abra o Visual Studio, vá em File > New Project (CTRL + SHIFT + N), escolha a categoria Web, o template ASP.NET Web Application, dê o nome de ExemploImagemGridView e clique em OK.

Vá no Google e procure por três imagens, pequenas de preferência, que representarão os tipos de pagamento. Baixe-as e as arraste para a Solution Explorer, para que as mesmas façam parte de nosso projeto:


Vá no modo Design da Default.aspx e arraste para ela um GridView. Na SmartTag do GridView, clique em AutoFormat, altere a formatação como desejar e clique em OK. Agora vamos fazer a conexão do GridView com nosso banco criado anteriormente. Para isso, volte a SmartTag e clique em Choose Data Source e em New Data Source.

Na janela que surge perguntando aonde que a aplicação irá recuperar os dados, escolha a 2ª opção, Database, deixe com o nome SqlDataSource1 mesmo e clique em OK.

A próxima janela é pra você indicar a string de conexão que a aplicação irá utilizar para se conectar ao banco criado. Clique em New Connection e, na janela que surge, escolha o nome do servidor, o nome do database, teste a conexão e clique em OK, como a imagem abaixo nos sugere:


Você voltará à tela com a string de conexão, deixe selecionado a opção para salvar a connectionstring e clique em Next.

Na próxima tela, aparecem as opções para você selecionar os dados da tabela Vendas, clique no * para selecionar todos os dados de todas as colunas e clique em Next, como a imagem a seguir mostra:


Se quiser, clique em Test Query para testarmos nossa consulta e clique em Finish. Você verá que o GridView estará populado com os dados da tabela Vendas.

Na próxima parte de nosso artigo iremos definitivamente ao código! Criaremos o método que retornará a imagem referente ao tipo de pagamento e concluiremos nosso exemplo.

Aguardem!


Artigos relacionados