we are developers

iMaster Developers

iMaster DevelopersPowered by:

.NET

27 set, 2012

ASP .NET – Inserindo e obtendo imagens do SQL Server (C#)

José Carlos Macoratti

Tem 594 artigos publicados com 35356165 visualizações desde 2011

José Carlos Macoratti
Publicidade

Neste artigo, veremos como inserir e obter imagens de um banco de dados SQL Server e como exibir as imagens em um controle GridView.

Acompanhe a versão para desktop deste artigo no link: Trabalhando com imagens no SQL Server – Macoratti.net

Vamos iniciar abrindo o Visual Web Developer 2010 Express Edition e criando um novo projeto via opção File -> New Project.

Selecione a linguagem Visual C# e a opção Web.

A seguir, selecione o template ASP .NET Web Application e informe o nome Tratando_Imagens_SQLServer.

 

Criando o banco de dados no SQL Server

Eu poderia criar o banco de dados usando o SQL Server Management Studio (SSMS), mas vou usar o próprio ambiente do Visual Web Developer Express Edition.

Abra a janela DataBase Explorer e clique com o botão direito em Data Connections, clicando a seguir em Add Connection.

 

Na janela Add Connection, clique no botão Change e altere o Data Source para: Microsoft SQL Server Database File.

Obs: Esta janela poderá exibir outras opções de Data Source, mas eu escolhi trabalhar com um banco de dados anexado ao meu SQL Server Local.

 

Informe o nome do banco de dados; no exemplo, o nome usado foi Cadastro.mdf, e clique no botão OK.

Uma caixa de diálogo irá surgir informando que o banco de dados não existe e se você deseja criá-lo. Confirme e clique no botão Sim para criar o banco de dados.

Você verá na janela DataBase Explorer o banco de dados Cadastro.

Clique com o botão direito no item Tables e a seguir clique em Add New Table;

 

 

Crie a tabela Imagens definindo os campos:

  • id – int – chave primária e do tipo identity;
  • descrição – nvarchar(150)
  • imagem – image

 

 

Assim, temos o banco de dados Cadastro.mdf e a tabela Imagens criadas e prontas para serem usadas.

Definindo as páginas do projeto

Vamos definir a página Default.aspx como a página principal do projeto clicando com o botão direito do mouse sobre essa página e selecionando a opção Set As Start Page.

Agora vamos alterar o código da página Site.Master para exibir uma opção para acessar a página onde vamos tratar as imagens conforme o código a seguir:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Tratando_Imagens_SQLServer.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <div>
        <div>
            <div>
                <h1>
                   Macoratti .net
                </h1>
            </div>
            <div>
            </div>
            <div>
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                        <asp:MenuItem NavigateUrl="~/Imagens.aspx" Text="Imagens"/>
                    </Items>
                </asp:Menu>
            </div>
        </div>
        <div>
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div>
        </div>
    </div>
    <div>

    </div>
    </form>
</body>
</html>

A seguir, vamos incluir um novo Web Form chamado Imagens.aspx em nosso projeto.

No menu Project, clique em Add New Item.

Selecione o template Web Form using Master Page, informe o nome Imagens.aspx e clique no botão Add.

 

Na próxima janela, selecione a master page Site.Master e clique em Ok.

Vamos incluir na página Imagens.aspx a partir da toolbox os seguintes controles:

  • TextBox – ID=txtDescricao TextMode=Multiline
  • FileUpload – ID=arquivoUploadImagem
  • GridView – ID=gdvImagens
  • Button – ID=btnUpload – Text=Enviar Arquivo

Conforme o leiaute da figura abaixo:

No controle GridView, vamos definir dois campos: Descrição e Imagem.

A seguir, vamos converter o campo Imagem em um TemplateField e definir nesse template um controle Image.

Defina a seguir as propriedades DataBindings conforme a figura abaixo para esse controle:

O código do arquivo Imagens.aspx deverá ficar da seguinte forma:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
CodeBehind="Imagens.aspx.cs" Inherits="Tratando_Imagens_SQLServer.Imagens" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    Inserindo e Recuperando imagens no SQL Server com ASP .NET
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <head> 
    <style type="text/css">
        .Gridview
        {
            font-family:Verdana;
            font-size:10pt;
            font-weight:normal;
            color:black;
            }
    </style>
    </head>
    <table>
    <tr><td> Descricao:</td>
    <td> <asp:TextBox ID="txtDescricao" runat="server" BackColor="#FFFFCC" Height="97px" 
            TextMode="MultiLine" Width="260px"></asp:TextBox>
    </td>
    </tr><tr><td>Imagem:</td>
    <td> <asp:FileUpload ID="arquivoUploadImagem" runat="server" Width="350px" /> </td>
    </tr><tr><td>
    </td>
    <td><asp:Button ID="btnUpload" runat="server" Text="Enviar Arquivo" 
            onclick="btnUpload_Click" />
    </td>
    </tr>
    </table>
    </div>
    <asp:GridView ID="gdvImagens" CssClass="Gridview" runat="server" AutoGenerateColumns="False"
    HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="white" Height="766px" 
        Width="521px">
    <Columns>
    <asp:BoundField HeaderText = "Descrição" DataField="imagename" />
    <asp:TemplateField HeaderText="Imagem">
    <ItemTemplate>
    <asp:Image ID="Image1" runat="server" 
            ImageUrl='<%# "ImageHandler.ashx?ImgID="+ Eval("id") %>' Height="150px" 
            Width="150px"/>
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    <HeaderStyle BackColor="#7779AF" ForeColor="White"></HeaderStyle>
    </asp:GridView>
</asp:Content>

Observe que no botão Enviar Arquivo estamos tratando o evento Click.

Definindo a string de conexão no arquivo Web.Config

Abra o arquivo Web.Config e inclua o código abaixo na seção <configuration> para definir a string de conexão com o banco de dados Cadastro.mdf:

<?xml version="1.0"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>

  <connectionStrings>
    <add name="ConexaoSQLServer"
        connectionString="Data Source =.\SQLEXPRESS;Initial Catalog=Cadastro;Integrated Security=SSPI;"
        providerName="System.Data.SqlClient" />
  </connectionStrings>
   .........
   ........

Definindo o código para tratamento das imagens

Vamos abrir o arquivo code-behind Imagens.aspx.cs e definir o seguinte código:

No início do arquivo, defina a utilização dos seguintes namespaces:

using System; using System.Web; using System.Web.UI; using System.Data; using System.Data.SqlClient; using System.Configuration;

Após a declaração do formulário, obtenha a string de conexão do arquivo web.config:

string strcon = ConfigurationManager.ConnectionStrings[“ConexaoSQLServer”].ConnectionString;

No evento Load da página, inclua o código abaixo:

 protected void Page_Load(object sender, EventArgs e)
   {
            if (!IsPostBack)
            {
                VincularDados();
            }
  }

No evento Click do botão Enviar inclua o código a seguir:

protected void btnUpload_Click(object sender, EventArgs e)
        {
            //Verifica se enviou imagem ou não
            if (arquivoUploadImagem.HasFile)
            {
                //obtem o tamanho da imagem enviada
                int tamanho = arquivoUploadImagem.PostedFile.ContentLength;
                //cria um array de bytes para armazenar os dados binários da imagem
                byte[] imgbyte = new byte[tamanho];
                //armazena a imagem selecinada na memória
                HttpPostedFile img = arquivoUploadImagem.PostedFile;
                //define os dados binários
                img.InputStream.Read(imgbyte, 0, tamanho);
                string descricaoImagem = txtDescricao.Text;
                //abre uma conexão 
                SqlConnection connection = new SqlConnection(strcon);
                connection.Open();
                SqlCommand cmd = new SqlCommand("INSERT INTO Imagens (descricao,imagem) VALUES (@descricao,@imagem)", connection);
                cmd.Parameters.Add("@descricao", SqlDbType.VarChar, 50).Value = descricaoImagem;
                cmd.Parameters.Add("@imagem", SqlDbType.Image).Value = imgbyte;
                int contador = cmd.ExecuteNonQuery();
                connection.Close();
                if (contador == 1)
                {
                    VincularDados();
                    txtDescricao.Text = string.Empty;
                    ScriptManager.RegisterStartupScript(this, this.GetType(), "alertmessage", "javascript:alert('" + descricaoImagem + " imagem incluida com sucesso')", true);
                }
            }
        }

O código acima inclui uma imagem na tabela Imagens e exibe uma mensagem via JavaScript de alerta ao usuário avisando que a imagem foi incluída.

O código da rotina VincularDados() é o seguinte:

private void VincularDados()
        {
            SqlConnection connection = new SqlConnection(strcon);
            SqlCommand command = new SqlCommand("SELECT descricao,id from Imagens", connection);
            SqlDataAdapter daimages = new SqlDataAdapter(command);
            DataTable dt = new DataTable();
            daimages.Fill(dt);
            gdvImagens.DataSource = dt;
            gdvImagens.DataBind();
            gdvImagens.Attributes.Add("bordercolor", "black");
        }

Nesse código, estamos recuperando as imagens da tabela Imagens e vinculando no controle GridView.

Após a conclusão do código acima, precisamos adicionar um arquivo HttpHandler ao nosso projeto para recuperar imagens do banco de dados, pois nós salvamos as imagens em formato binário, e obter as imagens no formato binário é fácil, mas a exibição não é tão simples assim, e por isso vamos usar um HttpHandler para resolver esse problema.

Aqui o HttpHandler é uma classe simples que lhe permite processar um pedido e retornar uma resposta para o navegador. De forma simples, o manipulador é responsável por atender solicitações do navegador. Ela só pode lidar com uma solicitação por vez o que lhe dá um bom desempenho.

No menu Project, clique em Add new Item e a seguir selecione o template Visual C# -> Web e Generic Handler, informando o nome ImagemHandler.ashx e clique no botão Add.

A seguir inclua o código abaixo no arquivo ImagemHandler.ashx:

Neste código, incluímos a linha para obter a string de conexão do arquivo web.config e definimos o código do evento ProcessRequest() para obter e exibir a imagem:

using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;

namespace Tratando_Imagens_SQLServer
{
    public class ImagemHandler : IHttpHandler
    {
        string strcon = ConfigurationManager.ConnectionStrings["ConexaoSQLServer"].ConnectionString;

        public void ProcessRequest(HttpContext context)
        {
            string imagemID = context.Request.QueryString["ImgID"];
            SqlConnection connection = new SqlConnection(strcon);
            connection.Open();
            SqlCommand command = new SqlCommand("select imagem from Imagens where id=" + imagemID, connection);
            SqlDataReader dr = command.ExecuteReader();
            dr.Read();
            context.Response.BinaryWrite((Byte[])dr[0]);
            connection.Close();
            context.Response.End();
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Agora podemos executar o projeto e, ao acionar o link Imagens do menu da página, poderemos incluir e exibir as imagens no controle Gridview, conforme mostra a figura abaixo:

 

Após selecionar uma imagem e clicar no botão Enviar Arquivo, veremos uma mensagem indicando que imagem foi incluída com sucesso.

Pegue o projeto completo aqui: Tratando_Imagens_SQLServer.zip

 

 

 

 

 

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

José Carlos Macoratti
Saiba mais

José Carlos Macoratti

edit594 Artigo(s)

é referência em Visual Basic no Brasil e autor dos livros "Aprenda Rápido: ASP" e "ASP, ADO e Banco de Dados na Internet". Mantenedor do site macoratti.net.