Asp.net: Display Binary format image in Gridview Control using C#, VB

In this article today I am going to explain How to display the binary formatted image in Gridview control using asp.net (C#, VB)

Description:

In the previous article I have explained Save image in Binary format in Sql ServerDatabase using C#, VB.net and add, edit, delete and update record in Gridviewcontrol.

In database, I have a table Movie in which poster of movie stored in Binary format. In this tutorial I am going to display the binary formatted in Gridview using ImageHandler.

Implementation:

Add two webform to project/website. One webform will be used to display the image in Gridview and second one used as ImageHandler.

Add the namespace to ImageHandler webform

C#:

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

VB:

Imports System.Data

Imports System.Data.SqlClient

Imports System.Configuration

Write the code to bind the Gridview on Page load event of page.

C#:

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());

    protected void Page_Load(object sender, EventArgs e)

    {

        if (Request.QueryString["image"] != null)

        {

            SqlDataAdapter adp = new SqlDataAdapter("select * from Movie where id=@id", con);

            adp.SelectCommand.Parameters.AddWithValue("@id", Convert.ToInt32(Request.QueryString["image"]));

            DataTable dt = new DataTable();

            adp.Fill(dt);

            if (dt != null)

            {

                Byte[] bytes = (Byte[])dt.Rows[0]["Poster"];

                Response.Buffer = true;

                Response.Charset = "";

                Response.Cache.SetCacheability(HttpCacheability.NoCache);

                Response.BinaryWrite(bytes);

                Response.Flush();

                Response.End();

            }

        }

    }

VB: 

Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

        If Request.QueryString("image") IsNot Nothing Then

            Dim adp As New SqlDataAdapter("select * from Movie where id=@id", con)

            adp.SelectCommand.Parameters.AddWithValue("@id", Convert.ToInt32(Request.QueryString("image")))

            Dim dt As New DataTable()

            adp.Fill(dt)

            If dt IsNot Nothing Then

                Dim bytes As [Byte]() = DirectCast(dt.Rows(0)("Poster"), [Byte]())

                Response.Buffer = True

                Response.Charset = ""

                Response.Cache.SetCacheability(HttpCacheability.NoCache)

                Response.BinaryWrite(bytes)

                Response.Flush()

                Response.[End]()

            End If

        End If

    End Sub

Now drag and drop the Gridview control from toolbox to webform.

HTML Markup of Gridview:

  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns = "False" CellPadding="4" ForeColor="#333333" GridLines="None">

            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />

<Columns>

    <asp:BoundField DataField ="Name" HeaderText ="Name" >

    <ItemStyle HorizontalAlign="Center" />

    </asp:BoundField>

    <asp:BoundField DataField ="Genre" HeaderText ="Genre" >

    <ItemStyle HorizontalAlign="Center" />

    </asp:BoundField>

    <asp:BoundField DataField="Cost" HeaderText="Budget (in Crore)" >

    <ItemStyle HorizontalAlign="Center" />

    </asp:BoundField>

    <asp:ImageField DataImageUrlField = "ID"

        DataImageUrlFormatString = "ShowImage.aspx?image={0}" ControlStyle-Width = "150" ControlStyle-Height = "150"

     HeaderText = "Poster">

        <ItemStyle HorizontalAlign="Center" />

    </asp:ImageField>

</Columns>

            <EditRowStyle BackColor="#999999" />

            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />

            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />

            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />

            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />

            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />

            <SortedAscendingCellStyle BackColor="#E9E7E2" />

            <SortedAscendingHeaderStyle BackColor="#506C8C" />

            <SortedDescendingCellStyle BackColor="#FFFDF8" />

            <SortedDescendingHeaderStyle BackColor="#6F8DAE" />

</asp:GridView>

Add the namespace to code file:

C#:

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

VB:

Imports System.Data

Imports System.Data.SqlClient

Imports System.Configuration

Write the following code to bind the Gridview

C#:

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());

    protected void Page_Load(object sender, EventArgs e)

    {

        if(!IsPostBack)

        {

            bindgridview();

        }

    }

  public void bindgridview()

    {

        try

        {

            SqlDataAdapter adp = new SqlDataAdapter("Select * from Movie", con);

            DataTable dt = new DataTable();

            adp.Fill(dt);

            if (dt.Rows.Count > 0)

            {

                GridView1.DataSource = dt;

                GridView1.DataBind();

            }

        }

        catch(Exception ex)

        { }

    }

VB:

Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

        If Not IsPostBack Then

            bindgridview()

        End If

    End Sub

Public Sub bindgridview()

        Try

            Dim adp As New SqlDataAdapter("Select * from Movie", con)

            Dim dt As New DataTable()

            adp.Fill(dt)

            If dt.Rows.Count > 0 Then

                GridView1.DataSource = dt

                GridView1.DataBind()

            End If

        Catch ex As Exception

        End Try

    End Sub

Build, run the project and see the result.

 Result:

    In this article we have learn how to display Binary formatted image from Sql Server database  in asp.net (C#, VB). I hope you enjoyed this article.