Há ocasiões onde na aplicação precisamos exibir na tela uma listagem de registros que contenham uma coluna que é uma imagem. Anteriormente tínhamos que criar uma coluna do tipo TemplateColumn e colocar dentro desta um controle Image para ser possível apresentá-la.

Agora com o controle GridView, as coisas ficaram mais fáceis, pois foi acrescentado à este controle um tipo de coluna específico para imagens, chamada ImageField. É através desta que informamos a coluna/propriedade da fonte de dados que contém o path/nome da imagem à ser exibida ao usuário.

Esse tipo de coluna possui duas propriedades principais, que já vimos na seção Tipos de Colunas e que também estão listadas abaixo:

Para exibirmos as imagem no controle GridView basta incluirmos uma coluna do tipo ImageField no mesmo e configurar as propriedades acima. O código HTML na página ASPX abaixo ilustra essa coluna já configurada:

<asp:SqlDataSource 
    ID="SqlDataSource1" 
    runat="server" 
    ConnectionString="<%$ ConnectionStrings:ConnString %>"
    SelectCommand="SELECT [Nome], [Foto] FROM [Usuario]">
</asp:SqlDataSource>

<asp:GridView 
    ID="GridView1" 
    runat="server" 
    DataSourceID="SqlDataSource1" 
    AutoGenerateColumns="False" 
    DataKeyNames="UsuarioID">
    <Columns>
        <asp:ImageField 
            DataImageUrlField="Foto" 
            DataImageUrlFormatString="~/Images/{0}">
        </asp:ImageField>
    </Columns>
</asp:GridView>

Quando a página é renderizada, o ASP.NET automaticamente substitui o {0} pelo nome da imagem, que está definida na propriedade DataImageUrlField. A imagem abaixo exibe o controle GridView sendo exibido com as imagens de cada registro:

Há situações onde na base de dados não temos o nome/path da imagem, mas sim uma coluna do tipo binária que armazena a imagem em si. Neste caso o ideal é criarmos uma classe que implementa a interface IHttpHandler, que processa individualmente uma URL (extensão do arquivo solicitado) da aplicação. Como isso foge do escopo deste artigo, deixo aqui apenas uma referência à um artigo do Dino Esposito onde ele explica detalhadamente este processo.

Quando utilizamos este Handler para gerar a imagem, a configuração da propriedade DataImageUrlFormatString do controle GridView muda, ou seja, devemos ali definir o nome do arquivo que será responsável por processar e exibir o conteúdo binário da base de dados. Abaixo é apresentado o controle GridView configurado para utilizar este Handler:

<asp:SqlDataSource 
    ID="SqlDataSource1" 
    runat="server" 
    ConnectionString="<%$ ConnectionStrings:ConnString %>"
    SelectCommand="SELECT [Nome], [Foto] FROM [Usuario]">
</asp:SqlDataSource>

<asp:GridView 
    ID="GridView1" 
    runat="server" 
    AutoGenerateColumns="False" 
    DataSourceID="SqlDataSource1">
    <Columns>
        <asp:BoundField 
            DataField="Nome" 
            HeaderText="Nome" />
        <asp:ImageField 
            DataImageUrlField="ID" 
            DataImageUrlFormatString="ViewImage.ashx?Image={0}"
            HeaderText="Imagem">
        </asp:ImageField>
    </Columns>
</asp:GridView>

A extensão *.ashx é denominada como um WebHandler, que é também um novo recurso do ASP.NET 2.0. Este nada mais é que uma classe que implementa a Interface IHttpHandler para poder customizar uma requisição de acordo com a nossa necessidade, mas com uma grande vantagem: não há necessidade de mapear uma determinada extensão de arquivo para o aspnet_isapi.dll dentro do IIS como era feito antes, pois o WebHandler já está devidamente registrado. No exemplo acima é passado para o WebHandler o ID do registro à ser recuperado e, conseqüentemente, resgatamos a coluna binária da tabela e exibimos ao usuário.

GridView.zip (674.49 kb)