I will propose an example using an example model, because in its current model there are some fields referring to ContentType and physical file size to display the image correctly coming from the database, minimum example:
Model and Table used with Entity Framework (nothing prevents being done by any ORM or Micro or even purely with Framework . NET has):
after that page containing a component GridView:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:ImageField
DataImageUrlField="Id"
DataImageUrlFormatString="Load.ashx?Id={0}">
</asp:ImageField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
in this page example ASPX has Gridview and a column ImageField with two important parameters:
this setting specifies the identification of the image in the database, commonly called the primary key.
DataImageUrlFormatString="Load.ashx?Id={0}"
and this setting is to call another file with the extension ashx (Generic Handler) which has the function of executing only code or bald page as it is called by some developers.
On this page you have the code responsible to generate your image:
using System.Web;
using WebApplication15.Models;
namespace WebApplication15
{
public class Load : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
if (int.TryParse(context.Request.QueryString["Id"].ToString(), out var id))
{
using (BaseDadosEntities db = new BaseDadosEntities())
{
Imagens img = db.Imagens.Find(id);
if (img != null)
{
context.Response.ContentType = img.ContentType;
context.Response.OutputStream.Write(img.Picture, 0, (int)img.Size);
}
}
}
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
as its current model does not have ContentType and Size which is the size of the image it is difficult to know the type and generate the image with the correct size are items that need to exist in your table.
Code observation:
To save the image with byte array to your database you don’t need that code, the component itself FileUpload provides the data needed to record the image, example:
if (FileUpload1.HasFile)
{
using (BaseDadosEntities db = new BaseDadosEntities())
{
Imagens img = new Imagens();
img.ContentType = FileUpload1.PostedFile.ContentType;
img.Extension = Path.GetExtension(FileUpload1.PostedFile.FileName);
img.Size = FileUpload1.PostedFile.ContentLength;
img.Picture = FileUpload1.FileBytes;
db.Imagens.Add(img);
db.SaveChanges();
Call_Grid(db);
}
}
ideal code and without using other means that in my view are totally unnecessary for the specific case.
Another way would be with Event Rowdatabound with a Templatefield as follows, in GridView put a layout thus:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="Id" />
<asp:TemplateField>
<ItemTemplate>
<asp:Image ID="Image1" runat="server" Width="100" Height="100" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
and in the method GridView1_RowDataBound(object sender, GridViewRowEventArgs e) writes the code:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
if (int.TryParse(e.Row.Cells[0].Text, out var id))
{
Imagens im = db.Imagens.Find(id);
if (im != null)
{
Image img = (Image)e.Row.Cells[1].FindControl("Image1");
img.ImageUrl =
$"data:{im.ContentType};base64,{Convert.ToBase64String(im.Picture)}";
}
}
}
}
Complete code:
public partial class WebForm3 : System.Web.UI.Page
{
protected BaseDadosEntities db;
protected void Call_Grid()
{
GridView1.DataSource = db.Imagens.ToList();
GridView1.DataBind();
db.Dispose();
}
protected void Page_Load(object sender, EventArgs e)
{
if (db == null) db = new BaseDadosEntities();
if (Page.IsPostBack == false)
{
Call_Grid();
}
}
protected void Page_Unload(object sender, EventArgs e)
{
if (db != null) db.Dispose();
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
if (int.TryParse(e.Row.Cells[0].Text, out var id))
{
Imagens im = db.Imagens.Find(id);
if (im != null)
{
Image img = (Image)e.Row.Cells[1].FindControl("Image1");
img.ImageUrl =
$"data:{im.ContentType};base64,{Convert.ToBase64String(im.Picture)}";
}
}
}
}
}
References:
But I can’t unserialize where? how do you want to do this.
– novic
Well, as I said above, I have the image saved in the BD in Blob, in the event Rowdatabound was to deserializar the image, I would like to use techniques of the Entity that the view was in the grid
– Antonio_Sistema_de_Informacao
There are some ways to do this, one of them is with a page that only runs code maybe is the best solution.
– novic
Is there any example of code? or website because I am debugging and never enters my if. if (e.Row.Rowtype == Datacontrolrowtype.Datarow) //Even if it jumps out already, even with blob saved in BD
– Antonio_Sistema_de_Informacao
Let me find out what’s best for you
– novic
Okay, I’ll be waiting
– Antonio_Sistema_de_Informacao
Let’s go continue this discussion in chat.
– Antonio_Sistema_de_Informacao