ASP.NET - Exibindo imagens em um controle DataGrid.

Exibindo imagens em um controle DataGrid

ASP.NET é uma ferramenta sensacional para o desenvolvimento Web. Além de oferecer uma interface muito amigável traz muitos controles que facilitam a vida de qualquer desenvolvedor. Um destes controles é o DataGrid . Posso dizer sem medo de errar que é um dos componentes mais fáceis de usar e configurar para o desenvolvimento Web.

Neste artigo vou mostrar como podemos exibir imagens diretamente em um controle DataGrid.

Suponha que você tenha um banco de dados de produtos com os dados de seus produtos ,e , que um destes dados seja o nome da imagem do produto. Vou então criar um banco de dados chamado - Produtos.mdb - padrão Access com uma tabela chamada produtos que possui a seguinte estrutura e dados:

Você já percebeu que não estamos armazenando a imagem no banco de dados , apenas uma referência a ela - o nome da imagem.

Pois bem vamos então ter que acessar o banco de dados e exibir os dados e a imagem em um controle DataGrid.

O código completo eu já estou dando abaixo :

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDB" %>

<script language="VB" runat="server">

Sub Page_Load(Source as Object, E as EventArgs)
'Dim strConn as string = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & server.mappath("\data\produtos.mdb")
Dim strConn as string = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=c:\teste\produtos.mdb"

Dim SQL as string = "Select * from Produtos"
Dim Conn as New OleDBConnection(strConn)

Dim objDR as OleDBDataReader
Dim Cmd as New OLEDBCommand(SQL, Conn)

MyConn.Open()

objDR=Cmd.ExecuteReader(system.data.CommandBehavior.CloseConnection)

dg.DataSource = objDR
dg.DataBind()

End Sub

</script>

<html>
<head>
<meta name="GENERATOR" Content="ASP Express 3.0b1">
<title>Exibindo imagens em um DataGrid</title>
</head>
<body>

<form id="form1" runat="server">
<div align="center">

<asp:Datagrid runat="server"
      Id="dg"
      GridLines="Both"
      cellpadding="0"
      cellspacing="3"
      Headerstyle-BackColor="#8200C5"
      Headerstyle-Forecolor="white"
      Headerstyle-Font-Name="Verdana"
      Headerstyle-Font-Bold="True"
      Headerstyle-Font-Size="14"
      BackColor="#C6C000"
      Font-Name="Verdana"
      Font-Size="10"
      BorderColor="blue"
      AutoGenerateColumns="False">

   <asp:BoundColumn HeaderStyle-HorizontalAlign="Center" DataField="Nome" HeaderText="Nome"></asp:BoundColumn>
       <asp:TemplateColumn HeaderStyle-HorizontalAlign="Center">
            <HeaderTemplate>Imagens</HeaderTemplate>
            <ItemTemplate>
                 <div align="center"><IMG SRC='<%# Container.DataItem("Imagem") %>' Border="0"><br> </div>
            </ItemTemplate>
       </asp:TemplateColumn>
<asp:BoundColumn DataField="Comentario" HeaderText="Comentário"></asp:BoundColumn>

</columns>
</asp:DataGrid></div>

</form>

</body>

código fonte do arquivo mostraImagens.aspx

Podemos dividir o código em duas partes :

1 - O script ASP.NET onde um estou definindo uma string de conexão e um provedor que faz o acesso a banco de dados usando um objeto DataReader e um objeto Command onde eu estou selecionando todos os registros da tabela produtos via instrução SQL e a seguir vinculando os dados retornados ao controle DataGrid via propriedade DataSource.

Dim strConn as string = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=c:\teste\produtos.mdb"

Dim SQL as string = "Select * from Produtos"
Dim Conn as New OleDBConnection(strConn)

Dim objDR as OleDBDataReader
Dim Cmd as New OLEDBCommand(SQL, Conn)

MyConn.Open()

objDR=Cmd.ExecuteReader(system.data.CommandBehavior.CloseConnection)

dg.DataSource = objDR

2- O código que define um controle DataGrid ( id="dg") , configura o cabeçalho e o texto e define quais colunas exibir. Para exibir a imagem eu uso comando : <IMG SRC='<%# Container.DataItem("Imagem") %>

   <asp:BoundColumn HeaderStyle-HorizontalAlign="Center" DataField="Nome"HeaderText="Nome"></asp:BoundColumn>
       <asp:TemplateColumn HeaderStyle-HorizontalAlign="Center">
            <HeaderTemplate>Imagens </HeaderTemplate>
            <ItemTemplate>
                 <div align="center"><IMG SRC='<%# Container.DataItem("Imagem") %>' Border="0"><br> </div>
            </ItemTemplate>
       </asp:TemplateColumn>
<asp:BoundColumn DataField="Comentario" HeaderText="Comentário"></asp:BoundColumn>

</columns>
</asp:DataGrid></div>

</form>

Perceba que os campos Nome e Comentário estão sendo vinculados e definidos via DataField .

Executando o projeto no seu Navegador teremos:

É claro que você pode mostrar imagens mais ajustadas ao Grid . Ficamos por aqui...

Até o próximo artigo ASP.NET

José Carlos Macoratti