Asp.net: Display Binary format image in Gridview Control using C#, VB - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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 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.

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

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:
Asp.net: Display Binary format image in Gridview Control using C#, VB


    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.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon