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.
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!
