3

Populei O DataSource do ListView com uma coleção. A coleção contém um campo com ArrayBytes. Preciso converter para a imagem aparecer no controle. Mas a conversão tem que ser direto no controle?

<ItemTemplate>
    <h2><%#Eval("titulo")%></h2>                                                  
    <p><h5><%#Eval("texto")%></h5></p>                    
    <h6><%#Eval("data", "{0:d}")%></h6>
    **CONVERSÃO AQUI**  

1
  • Dê mais detalhes, mostre o que já fez, qual sua dificuldade.
    – Maniero
    12/10/2015 às 20:18

1 Resposta 1

1

Classe base que serve para os dois exemplos:

namespace Img.Db
{
    using System;
    using System.Collections.Generic;

    public partial class Imagens
    {
        public int Id { get; set; }
        public byte[] Imagem { get; set; }
        public string Tipo { get; set; }
    }
}

1) WebForms

Para fazer a conversão você deve codificar em um arquivo Generic Handler (.ashx, esse tipo de extensão é um página que só tem código) e colocar no seu item assim:

Na tag coloque um elemento Image (<asp:image) e passe um caminho igual está no exemplo:

<asp:ListView ID="ListView1" runat="server">
    <ItemTemplate>                
        <h2><%#Eval("titulo")%></h2>                                                  
        <p><h5><%#Eval("texto")%></h5></p>                    
        <h6><%#Eval("data", "{0:d}")%></h6>                                    
        <asp:Image ImageUrl='<%#String.Format("_handler.ashx?id={0}", Eval("id")) %>' runat="server" />
    </ItemTemplate>
</asp:ListView>

Vá em seu projeto e insira um item chamado Generic Handler

inserir a descrição da imagem aqui

e o codifique assim:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Img.Db;
namespace Img.WebForms
{
    /// <summary>
    /// Summary description for _handler
    /// </summary>
    public class _handler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            //Recupero a Id daquele registro
            Int32 Id = Int32.Parse(context.Request["id"].ToString());
            //Recupero com o Id a classe que contem o campo Imagem (Array de Bytes)
            Imagens img = new AppEntities().Imagens.Find(Id);
            //Passo aqui o tipo da imagem para o ContentType
            context.Response.ContentType = img.Tipo;
            //Passo aqui a imagem no formato array para ele fazer a conversão
            context.Response.OutputStream.Write(img.Imagem, 0, img.Imagem.Length);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Aonde está essa linha seria a parte de acesso ao banco:

Imagens img = new AppEntities().Imagens.Find(Id);

Eu pego essa classe que tem o campo Imagem do tipo Array de Bytes e passa para as linhas logo abaixo do código (Imagens img = new AppEntities().Imagens.Find(Id);) e ele vai me retornar um imagem para ser mostrada em um campo imagem.

Uma boa leitura seria nesse link: ASP .NET - Usando um manipulador (Handler) ASHX, tem um boa explicação do assunto.

2) WebMvc

Para WebMvc muda um pouco a codificação, mas, seria assim:

Crie um método em algum controller:

public FileContentResult Display(int Id)
{
    Imagens img = db.Imagens.Find(Id);
    if (img != null)
    {
        Byte[] _bytes = img.Imagem;
        return new FileContentResult(_bytes, img.Tipo);
    }
    return null;
}

Vai na View que tu vai renderizar a imagem:

@model IEnumerable<Img.Db.Imagens>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Fotos</h2>
<form action="/Fotos/Index" method="post" enctype="multipart/form-data">
    <input type="file" name="imagem" id="imagem" />
    <button type="submit">Enviar</button>
</form>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Tipo)
        </th>
        <th>Fotos</th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Tipo)
        </td>
        <td>
            <img src="@Url.Action("Display","Fotos", new {Id = item.Id})" width="100" />

        </td>
    </tr>
}
</table>
7
  • Não consegui fazer. obrigado pela ajuda. excelente conteúdo. Vou continuar tentando. Talvez eu não tenha conseguido explicar minha dificuldade.
    – dezoldan
    12/10/2015 às 20:43
  • Explique qual é a sua dificuldade @dezoldan ?
    – Cezar
    12/10/2015 às 20:45
  • sim, obrigado. vou tentar.
    – dezoldan
    12/10/2015 às 20:45
  • estou tentando converter um array de bytes numa imagem diretamente no controle. A dificuldade seria essa. desculpe pela falta de explicação mais técnica.
    – dezoldan
    12/10/2015 às 20:53
  • @dezoldan para mostrar a imagem é dessa forma, inclusive todos utilizam assim. No controller especifico não tem nada pronto.
    – Cezar
    12/10/2015 às 21:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .