How to show binary image in Asp.net grid view ?

Lets start by designing the GridView first.In the below Grid view the binary Image will be displayed in the ItemTemplate Column.

<asp:DataGrid ID="DataGrid1" runat="server" AutoGenerateColumns="false" BackColor="#DFDFDF"

        ForeColor="#000000" BorderColor="#FF0000" BorderStyle="Dotted" BorderWidth="2"

        CellPadding="10" CellSpacing="5" OnItemDataBound="DataGrid1_ItemDataBound"

        Width="500px">

        <HeaderStyle BackColor="#000000" ForeColor="#FFFFFF" />

        <AlternatingItemStyle BackColor="#c0c0c0" />

        <Columns>

            <asp:BoundColumn DataField="Id" ReadOnly="true" HeaderText="Id"></asp:BoundColumn>

            <asp:BoundColumn DataField="Title" ReadOnly="true" HeaderText="Title"></asp:BoundColumn>

            <asp:BoundColumn DataField="Director" ReadOnly="true" HeaderText="Director"></asp:BoundColumn>

            <asp:TemplateColumn>

                <ItemTemplate>

                    <asp:Image ID="imgPhoto" runat="server" Width="40px" Height="40px" />

                </ItemTemplate>

            </asp:TemplateColumn>

        </Columns>

</asp:DataGrid>

After assigning the datasource , Lets look at the ItemDataBound event.

protected void DataGrid1_ItemDataBound(object sender, DataGridItemEventArgs e)

{

   if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)

   {

       int id = Convert.ToInt32(e.Item.Cells[0].Text);

       //Find the Image control in the Grid.

       System.Web.UI.WebControls.Image photoImage = (System.Web.UI.WebControls.Image)e.Item.FindControl("imgPhoto");

       //Call the HTTP handler to show the image.

        photoImage.ImageUrl = "ImageHandler.ashx?PhotoID=" + id.ToString();

   }

}

In the above ItemDataBound event we are assigning Httphandler to ImageUrl. The Httphandler will be responsible to load the image from the database. Below is the sample code of HttpHandler class (.ashx).

<%@ WebHandler Language="C#" Class="ImageHandler" %>

using System;

using System.Web;

using System.IO;

using System.Data.Linq;

using System.Linq;

using System.Drawing;

public class ImageHandler : IHttpHandler {

    public void ProcessRequest (HttpContext context)

    {

        //Set the content type

        context.Response.ContentType = "image/jpeg";

        int photoId = -1;

        if (context.Request.QueryString["PhotoId"] != null && context.Request.QueryString["PhotoId"] != "")

        {

            photoId = Convert.ToInt32(context.Request.QueryString["PhotoID"]);

        }

        if (photoId != -1)

        {

            MovieDataContext db = new MovieDataContext();

            //Get the movie record based on the 'photoId' using Linq and Lamba  expression.

            MovieTable movie = db.MovieTables.First(m => m.ID == photoId);

            //Get the binary data.

            System.Data.Linq.Binary fileBinary = movie.Photo;

            byte[] fileByte = fileBinary.ToArray();

            //This will load the photo.

            context.Response.BinaryWrite(fileByte);

        }

    }

}

Once the Grid View is loaded the output will be like below image.