ASP .NET - Exibindo imagens de um banco de dados

Neste artigo vou mostrar como podemos imagens de um banco de dados sem usar um Generic Handler.

Os Generic Handlers possuem a extensão ASHX, e funcionam como páginas ASPX. A diferença é que um Generic Handler não é uma página, e é  usado quando precisamos de uma URL para realizar alguma tarefa, mas não precisamos de nenhuma interface de usuário.

Eu já tratei deste assunto no artigo - ASP .NET - Usando um manipulador ASHX - Macoratti.net.

Neste artigo vou mostrar como exibir imagens armazenadas em um banco de dados usando um controle ASP .NET. Imagens armazenadas como dados binários em banco de dados são tratadas como um array de bytes e são convertidas para string BASE64 e então atribuídas a um controle ASP .NET image.

Neste artigo eu vou usar a tabela Imagens do banco de dados Cadatro.mdf que eu crie e que já contém imagens armazenadas e vou exibi-las em um projeto ASP .NET Web Forms.

A estrutura da tabela e o script SQL para criá-la usando o SQL Server Management Studio segue abaixo:

CREATE TABLE [dbo].[Imagens](
	[imagemId] [int] IDENTITY(1,1) NOT NULL,
	[imagemNome] [nvarchar](150) NOT NULL,
	[Imagem] [varbinary](max) NOT NULL,
PRIMARY KEY CLUSTERED 
(
	[imagemId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

O tipo de dado da coluna Imagem é varbinary(MAX). Os tipos image, ntext e text serão removidos em futuras versões do SQL Server logo o mais indicado é usar varbinary(MAX) para dados binários.

Abaixo temos alguns dados armazenados na tabela. Note que na coluna Imagem temos os dados armazenados no no formato binário :

Definimos a string e conexão para acessar o banco de dados no arquivo Web.Config:

   ....
   <connectionStrings>
     <add name="conexaoImagens" connectionString="Data Source=.\sqlexpress;database=Cadastro; Integrated Security=true"/>
  </connectionStrings >
   ....

Recursos usados:

Nota: Baixe e use a versão Community 2015 do VS ela é grátis e é equivalente a versão Professional.

Criando o projeto ASP .NET Web Forms

Abra o VS Community 2015 e clique em New Project;

Selecione a linguagem Visual Basic -> ASP .NET Web Aplication, Informe o nome ASPNET_ImagemDB e clique no botão OK;

A seguir selecione o template Empty e marque Web Forms, sem autenticação nem hospedagem na nuvem e clique em OK;

Vamos incluir uma página web no projeto.

No menu Project clique em Add New Item;

Selecione o template Web e a seguir Web Form e informe o nome Default.aspx e clique em Add;

Definindo a interface com o usuário na página Default.aspx

Na página Default.aspx vamos incluir os seguintes controles a partir da ToolBox:

Disponha os controles conforme o leiaute da figura abaixo:

O código gerado no pode ser visto abaixo:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="ASPNET_ImagemDB._Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <h1>Macoratti .net - Imagens </h1>
     <hr />
    <asp:DropDownList ID="ddlImagens" runat="server" AppendDataBoundItems="true" AutoPostBack = "true" 
OnSelectedIndexChanged = "ObtemImagem" Height="16px" Width="200px">
    <asp:ListItem Text="Selecione uma imagem" Value="0" />
    </asp:DropDownList>
    <hr />
    <asp:Image ID="imagemDB" runat="server" Visible = "false"/>
    </div>
    </form>
</body>
</html>

Para gerar a imagem em tempo de execução no projeto ASP .NET vamos fazer o seguinte:

1- Primeiro vamos acessar o banco de dados Cadastro e a tabela Imagens e carregar no dropdownlist com o nome das imagens;
2- A seguir vamos definir o código do método ObtemImagem associado ao evento OnSelectedIndexChanged. Esse método será acionado cada vez que o usuário selecionar uma imagem no dropdownlist;
3- No método ObtemImagem vamos selecionar a imagem pelo seu ID e converter de byte para base64 e depois para string atribuindo à propriedade ImageUrl do controle Image para exibir a imagem;

Então vamos implementar...

Abra o arquivo Default.aspx.vb e inclua no início os namespaces usados:

Imports System.Data.SqlClient
No evento Load da página inclua o código abaixo:

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            ddlImagens.DataSource = GetDados("SELECT imagemId, imagemNome FROM Imagens")
            ddlImagens.DataTextField = "imagemNome"
            ddlImagens.DataValueField = "imagemId"
            ddlImagens.DataBind()
        End If
    End Sub

No código acima acessamos a tabela Imagens e carregamos os nomes das imagens no controle dropdownlist usando o método GetDados.

O código do método GetDados() é dado a seguir:

 Private Function GetDados(query As String) As DataTable
        Dim dt As New DataTable()
        Dim constr As String = ConfigurationManager.ConnectionStrings("conexaoImagens").ConnectionString
        Using con As New SqlConnection(constr)
            Using cmd As New SqlCommand(query)
                Using sda As New SqlDataAdapter()
                    cmd.CommandType = CommandType.Text
                    cmd.Connection = con
                    sda.SelectCommand = cmd
                    sda.Fill(dt)
                End Using
            End Using
            Return dt
        End Using
    End Function

Este código retorna um objeto DataTable com os dados da tabela Imagens.

Agora vamos definir o código do método ObtemImagem associado ao evento OnSelectedIndexChanged do controle dropdownlist : ddlImagens.

Protected Sub ObtemImagem(sender As Object, e As EventArgs)
        Dim id As String = ddlImagens.SelectedItem.Value
        imagemDB.Visible = id <> "0"
        If id <> "0" Then
            Dim bytes As Byte() = DirectCast(GetDados(Convert.ToString("SELECT Imagem FROM Imagens WHERE imagemId =") & id).Rows(0)("Imagem"), Byte())
            Dim base64String As String = Convert.ToBase64String(bytes, 0, bytes.Length)
            imagemDB.ImageUrl = Convert.ToString("data:image/jpeg;base64,") & base64String
        End If
 End Sub

No código acima obtemos o id da imagem selecionada e obtemos a imagem da tabela Imagens convertendo-a para um array de byte.

A seguir usamos o método Convert.ToBase64String, que converte uma matriz de inteiros de 8 bits sem sinal em sua representação de cadeia de caracteres equivalente é codificada com dígitos de base 64.

Ao final convertemos para string e atribuímos o resultado à propriedade ImageUrl do controle Image.

Executando o projeto iremos obter:

1-  Na página Default.aspx o usuário seleciona uma imagem no controle Dropdownlist que é exibida no controle Imagem:

Pegue o projeto completo aqui :  ASPNET_ImagemDB.zip (sem referências)

Deus nunca foi visto por alguém. O Filho unigênito (Jesus), que está no seio do Pai, esse o revelou.
João 1:18

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ?

 

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

 

Referências:

José Carlos Macoratti