In this article I will explain with an example, how to display Images from SQL Server database stored in Binary format in ASP.Net GridView control using C# and VB.Net.
Image files will be uploaded and then will be saved (inserted) to SQL Server database table in Binary format. The saved (inserted) Image files will be retrieved and displayed in ASP.Net GridView along with feature to Zoom the Image using jQuery.
 
 
Database
This article makes use of a table named tblFiles whose schema is defined as follows.
Display images from SQL Server Database in ASP.Net GridView control
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 
HTML Markup
The following HTML Markup consists of:
FileUpload – For selecting image file.
Button – For uploading image file to SQL Server database.
GridView:– For displaying images from database.
Columns
GridView consists of a TemplateField column and two BoundField columns.
TemplateField consists of Image Control for displaying uploaded image file.
 
Events
OnRowDataBound – For getting control of each GridView Row.
<asp:FileUpload ID="fuUpload" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />
<hr />
<asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Image Id" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:TemplateField HeaderText="Image">
            <ItemTemplate>
                <asp:Image ID="Image1" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<div id="dialog" style="display: none">
</div>
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.IO;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
 
VB.Net
Imports System.IO
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
 
 
Displaying Binary Images from database in ASP.Net GridView
Inside the Page Load event handler, the GridView is populated with records from the tblFiles table of SQL Server database.
Inside the OnRowDataBound event handler of the GridView, the Binary data i.e. BYTE Array is converted into a BASE64 string and assigned to the ImageUrl property of the Image control inside the GridView.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection conn = new SqlConnection(constr))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter("SELECT * FROM tblFiles", conn))
            {
                DataTable dt = new DataTable();
                sda.Fill(dt);
                gvImages.DataSource = dt;
                gvImages.DataBind();
            }
        }
    }
}
 
protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        DataRowView dr = (DataRowView)e.Row.DataItem;
        string imageUrl = "data:image/jpg;base64," + Convert.ToBase64String((byte[])dr["Data"]);
        (e.Row.FindControl("Image1") as Image).ImageUrl = imageUrl;
    }
}
 
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using conn As SqlConnection = New SqlConnection(constr)
            Using sda As SqlDataAdapter = New SqlDataAdapter("SELECT * FROM tblFiles", conn)
                Dim dt As DataTable = New DataTable()
                sda.Fill(dt)
                gvImages.DataSource = dt
                gvImages.DataBind()
            End Using
        End Using
    End If
End Sub
 
Protected Sub OnRowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim dr As DataRowView = CType(e.Row.DataItem, DataRowView)
        Dim imageUrl As String = "data:image/jpg;base64," & Convert.ToBase64String(CType(dr("Data"), Byte()))
        CType(e.Row.FindControl("Image1"), Image).ImageUrl = imageUrl
    End If
End Sub
 
 
Uploading and saving Image in Binary format in SQL Server database in ASP.Net
The following event handler gets called when an Image file is selected and the Upload Button is clicked.
The uploaded Image file is converted to an Array of Bytes using BinaryReader class and is finally inserted into the SQL Server database table.
C#
protected void Upload(object sender, EventArgs e)
{
    byte[] bytes;
    using (BinaryReader br = new BinaryReader(fuUpload.PostedFile.InputStream))
    {
        bytes = br.ReadBytes(fuUpload.PostedFile.ContentLength);
    }
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection conn = new SqlConnection(constr))
    {
        string sql = "INSERT INTO tblFiles VALUES(@Name, @ContentType, @Data)";
        using (SqlCommand cmd = new SqlCommand(sql, conn))
        {
            cmd.Parameters.AddWithValue("@Name", Path.GetFileName(fuUpload.PostedFile.FileName));
            cmd.Parameters.AddWithValue("@ContentType", fuUpload.PostedFile.ContentType);
            cmd.Parameters.AddWithValue("@Data", bytes);
            conn.Open();
            cmd.ExecuteNonQuery();
            conn.Close();
        }
    }
 
    Response.Redirect(Request.Url.AbsoluteUri);
}
 
VB.Net
Protected Sub Upload(ByVal sender As Object, ByVal e As EventArgs)
    Dim bytes As Byte()
    Using br As BinaryReader = New BinaryReader(fuUpload.PostedFile.InputStream)
        bytes = br.ReadBytes(fuUpload.PostedFile.ContentLength)
    End Using
 
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using conn As SqlConnection = New SqlConnection(constr)
        Dim sql As String = "INSERT INTO tblFiles VALUES(@Name, @ContentType, @Data)"
        Using cmd As SqlCommand = New SqlCommand(sql, conn)
            cmd.Parameters.AddWithValue("@Name", Path.GetFileName(fuUpload.PostedFile.FileName))
            cmd.Parameters.AddWithValue("@ContentType", fuUpload.PostedFile.ContentType)
            cmd.Parameters.AddWithValue("@Data", bytes)
            conn.Open()
            cmd.ExecuteNonQuery()
            conn.Close()
        End Using
    End Using
 
    Response.Redirect(Request.Url.AbsoluteUri)
End Sub
 
 
Implement Zoom feature when Image is clicked using jQuery
A jQuery click event handler is assigned to all the Image constrols within the GridView.
When an HTML Image element is clicked, the Image constrols is cloned and displayed in larger size within a jQuery UI Model Popup.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
    $(function () {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            height: 600,
            width: 600,
            title: "Zoomed Image"
        });
        $("[id*=gvImages] img").click(function () {
            $('#dialog').html('');
            $('#dialog').append($(this).clone());
            $('#dialog').dialog('open');
        });
    });
</script>
 
 
Screenshot
Display images from SQL Server Database in ASP.Net GridView control
 
 
Downloads
Download Code