Aplicação ASP.NET com Imagens no GridView no lugar de valores

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.

Agora vamos aos códigos. Aperte F7 para ir a Default.aspx.cs e crie o método que irá nos retornar a imagem referente ao tipo de pagamento:

protected string RetornaImagem(int Tipo)

{

//Declaro a variável de retorno, do tipo string

string retorno = string.Empty;

//Faço um Switch com Case para verificar o tipo do valor, que receberá a respectiva imagem

switch (Tipo)

{

case 1:

retorno = @"~\cartao.gif";

break;

case 2:

retorno = @"~\cheque.gif";

break;

case 3:

retorno = @"~\dinheiro.gif";

break;

}

//retorno ao fim do método a variável retorno preenchida

return retorno;

}

Criei um método do tipo string, com um parâmetro do tipo int, referente ao tipo que foi gravado na tabela Vendas. Dentro do método fiz um switch com case, para avaliar qual valor foi gravado no banco, em cada coluna, se for do tipo 1, retorna a imagem referente ao Cartão de Crédito, se for do tipo 2, ao Cheque e se for do tipo 3, a Dinheiro.

Agora volte ao modo Design, pois teremos que fazer algumas alterações para que nossa coluna Tipo aceite a respectiva imagem.

Clique na SmartTag do GridView e clique na opção Edit Columns…. Selecione as colunas Tipo, à esquerda, e clique no botão Convert this field into a TemplateField, para converter nossa coluna em um Template Field (farei um artigo sobre ele daqui um tempo) e clique em OK, como mostra a imagem a seguir:

Abra a SmartTag novamente e clique no botão Edit Templates, para acessarmos a coluna Tipo. Nela, exclua o Label e arraste um controle do tipo Image:

Abra a SmartTag desse Image e clique na opção Edit DataBindings. Nela, veja que temos a opção de Field Binding, onde podemos indicar um campo que será a URL de nossa imagem e temos também a opção Custom Binding, em que podemos passar um Code Expression, ou seja, um código que representará a forma que nossa imagem aparecerá. Vamos usar esta última opção que terá como Code Expression nosso método criado anteriormente.

Clique nessa opção e acrescente no textbox o código que podemos ver na imagem a seguir:

O que fizemos acima foi passar nosso método, fazendo a conversão, já que o Code Expression retorna um objeto e o parâmetro de nosso método contém um inteiro, passando dentro de Eval, o valor Tipo.

Agora clique na SmartTag do GridView e clique em End Template Editing, para voltarmos ao nosso GridView com todas as colunas.

Antes de compilar, clique na aba Source, da Default.aspx e perceba que este código que adicionamos pelo DataBindings do Image, pode ser adicionado diretamente no aspx:

Salve o projeto e aperte F5 para compilarmos, irá aparecer uma mensagem para que seja alterado as configurações do Web.Config e a compilação possa ocorrer. Clique em OK e aguarde. Seu GridView deverá estar parecido com o da imagem abaixo:

Veja que foi alterada a imagem de acordo com o tipo de pagamento, como criado em nosso método.

Podemos usar este exemplo, esta idéia, em N tipos de cenários e é muito útil quando o uso de imagens no GridView se torna mais eficiente do que simples textos.

Assim finalizo o artigo.

Para quem se interessar, disponibilizo o código fonte desse projeto e o script da criação e inserção de registros da tabela Vendas aqui.

Créditos à Luciano Pimenta, que fez a videoaula e ao Portal Linha de Código, por onde pude baixá-la (mediante assinatura), estudá-la e posteriormente fazer este artigo.

Quaisquer dúvidas mandem emails para wellingtonbalbo@gmail.com ou deixem nos comentários deste artigo que responderei o mais breve possível.

Até o próximo artigo