Dentre as inúmeras possibilidades que o controle GridView nos dispõe para apresentação dos dados, tem uma delas que julgo muito interessante, além de extremamente útil em contexto de um fórum/blog. Estamos falando da exibição de imagens no GridView usando o objeto ImageField vinculado a uma fonte de dados. A idéia é apresentar uma listagem com os nomes dos usuários e suas respectivas fotos na grade.
Crie um novo projeto no Visual Studio (utilizou-se a versão 2008 no escopo do artigo) do tipo Web Site.
Selecione a linguagem C# e nomeie o projeto como p. ex,ImagemGridView.
Vamos adicionar uma pasta do projeto que será o repositório das imagens do projeto. Clique com o botão direito sobre o nome do projeto (na janela "Solution Explorer"), clique na opção "New Folder" e nomeie a pasta para “imagem”.
Utilizaremos algumas imagens com extensão .JPG e .PNG para representar a foto dos nossos usuários fictícios. Perceba na figura abaixo que as imagens estão nomeadas de acordo com o usuário.
Adicione as imagens no projeto, clicando com o botão direito sobre a pasta “imagem”, e em seguida clique na opção “Add Existing Item...”.Selecione todas as imagens de uma única vez e clique no botão “Add”.
Vamos adicionar duas classes ao projeto, uma de modelo e outra de persistência. Para facilitar a continuação deste artigo, os dados não serão oriundos de uma base de dados, mas sim alocados na própria classe em questão. Clique com o botão direito do mouse sobre o projeto, clique na opção "Add New Item..." e escolha o template Class na janela aberta. Nomeie a primeira classe como "Usuario" e a segunda como "UsuarioDao". Após as inclusões, a "Solution Explorer" do projeto deve ser semelhante a da figura a seguir.
A implementação da classe "Usuario" está representada naimagem a seguir. Perceba que temos nada mais que 3 propriedades e 1 método construtor com entrada de argumentos.
Seguindo a mesma linha de raciocínio, segue a codificação da classe "UsuarioDao".
Com as classes devidamente prontas, só nos resta customizar o GridView para receber os dados da collection e renderizar as imagens dos usuários. Dê um duplo clique sobre a página "Default.aspx", para que a mesma esteja disponível para manipulação na IDE do VS. Selecione a aba “Source”, e altere o conteúdo das TAGs<BODY> e </BODY> conforme a listagem abaixo.
Alternando para a aba “Design”,teremos uma aparência conforme a imagem abaixo.
Para vincular o controle GridView a nossa collection, vamos adicionar algumas linhas de código no code-behind da página "Default.aspx". Pressione a tecla F7 (ou clique no menu "View > Code") e altere o evento “Page_Load” conforme a figura.
Execute a aplicação, e confira o resultado.
Concluindo, creio que seja uma possibilidade de exibição de imagens com resultado satisfatório e com uma implementação simplificada.
