Asp.net: Display Binary format image in Gridview Control using C#, VB | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF 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.

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget