Uma prática muito comum, quando se fala de gravação de imagens em sistemas, sejam eles web ou desktop, é armazenar apenas o caminho do arquivo da figura na base de dados. Isso, porém, às vezes gera confusão entre programadores menos experientes que acabam não sabendo como exibir tais imagens posteriormente.
O objetivo deste artigo é explicar como utilizar o tipo de campo ImageField do GridView do ASP.NET para exibir imagens, cujo endereço do arquivo está armazenado numa fonte de dados, no próprio grid.
Os passos aqui descritos podem ser utilizados para adicionar tal funcionalidade diretamente a um sistema já em andamento, porém aconselho ao leitor segui-los como são apresentados, para facilitar a compreensão.
Então, para iniciar, crie um novo web site ASP.NET no Visual Studio, utilizando o menu File > New > Web Site... > ASP.NET Web Site ou ASP.NET Empty Web Site.
Arraste um controle GridView para a página principal e formate-o visualmente segundo sua preferência. No meu caso, selecionei apenas o estilo Classic na opção Auto Format da smart tag, e defini sua largura (Width) como 100%. A aparência inicial, apenas para registro, é exibida na Figura 1.
Figura 1: Aparência inicial da página
Como o objetivo deste artigo não é apresentar rotinas de conexão com bancos de dados, ou modelagens de tabelas, utilizaremos apenas uma classe e, posteriormente, uma lista de objetos como fonte de dados.
Crie então uma nova classe clicando com a direita sobre o site no Solution Explorer e, em seguida, na opção “Add New Item...”. Selecione o item Class e dê o nome de Automovel.cs. Clique em OK pra concluir a adição da classe.
Criaremos apenas três propriedades nessa classe: Modelo, Marca e Foto.
Altere o código da sua classe para que fique como mostra a Listagem 1.
Listagem 1: Classe Automovel
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
/// Summary description for Automovel
/// </summary>
public class Automovel
{
public string Modelo { get; set; }
public string Marca { get; set; }
public string Foto { get; set; }
public Automovel()
{
}
}O próximo passo é criar uma pasta no projeto onde serão armazenadas as imagens. Isso pode ser feito clicando novamente com a direita sobre o site no Solution Explorer e depois na opção “New Folder”. Dê à nova pasta o nome de “Fotos”.
Em seguida, clique com a direita sobre a pasta criada e depois na opção “Add Existing Item...”. Na caixa de diálogo que se abrirá, na opção de filtro de tipos de arquivos, selecione “Image Files”, conforme mostra a Figura 2.
Figura 2: Filtrando apenas imagens
Procure e adicione algumas imagens. No meu caso, adicionei três arquivos: edge.jpg, evoque.jpg e sorento.jpg (fotos de carros). A Figura 3 mostra como ficou a Solution Explorer após a adição das figuras.
Figura 3: Solution Explorer com imagens adicionadas
Vamos agora criar a lista de registros que será exibida no grid. Visualize o arquivo Default.aspx.cs (arquivo de código C# da página principal) adicione o seguinte trecho de código no evento Load da página.
Lisagem 2: Listando os registros
List<Automovel> carros = new List<Automovel>();
carros.Add(new Automovel()
{
Modelo = "Sorento",
Marca = "KIA",
Foto = "sorento.jpg"
});
carros.Add(new Automovel()
{
Modelo = "Edge",
Marca = "Ford",
Foto = "edge.jpg"
});
carros.Add(new Automovel()
{
Modelo = "Evoque",
Marca = "Range Rover",
Foto = "evoque.jpg"
});
GridView1.DataSource = carros;
GridView1.DataBind();Com isso criamos uma lista de objetos do tipo Automovel e a definimos como Data Source do GridView1. Logo após, invocamos o método DataBind() do grid para que os registros sejam exibidos.
Compilando e executando o projeto, teremos o seguinte resultado:
Figura 4: Resultado inicial
Como se pode ver, a coluna mais à direita está exibindo o caminho da imagem e não a figura em si. Entramos então na parte principal deste artigo.
De volta ao IDE, clique na smart tag do GridView1 (pequena seta no canto superior direito) e em seguida na opção “Edit Columns...”. Na janela que se abrirá, adicione dois campos do tipo BoundField e um do tipo ImageField.
Altere a propriedade DataField dos dois BoundFields para “Modelo” e “Marca”, respectivamente, como mostra a Figura 5.
Figura 5: Alterando a propriedade DataField dos BoundFields
No ImageField, defina a propriedade DataImageUrlField como “Foto” e a propriedade DataImageUrlFormatString como “~/Fotos/{0}”. No mesmo campo, expanda a propriedade ControlStyle e defina a propriedade Width como “100px”. Aplique o mesmo valor na subpropriedade Width da propriedade ItemStyle.
Por questão de organização, altere a propriedade HeaderText de todas as colunas com seu respectivo nome (“Modelo”, “Marca” e “Foto”, respectivamente). Por último, desmarque a opção “Auto-generate fields”, no cano inferior esquerdo da janela de edição das colunas. A configuração deve ficar como na Figura 6.
Figura 6: Configuração final das colunas
Compile novamente o projeto e execute-o. O resultado agora deve estar como na Figura 7, a seguir.
Figura 7: Resultado final
Agora sim obtivemos o resultado esperado. As imagens sendo exibidas na coluna do grid, como qualquer outro campo. Como vimos, é uma configuração bastante simples de se fazer para alcançar um resultado tão importante para sistemas que realizam registro de imagens.
Espero que o conteúdo aqui apresentado tenha sido útil.
Até a próxima publicação.
