Hi George616,
Referring the below article i have created the example.
Check this example. Now please take its reference and correct your code.
HTML
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="OnRowDataBound" class="table table-bordered table-condensed table-hover" Width="100%">
<EmptyDataTemplate>
<div style="text-align: center; font-weight: bolder; font-size: medium;">
<asp:Label ID="labelTemp" runat="server" Text="No Activity Recorded"></asp:Label>
</div>
</EmptyDataTemplate>
<Columns>
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" Width="30px" Height="30px" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="dialog" style="display: none">
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/start/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
height: 400,
width: 410,
title: "Zoomed Image"
});
$("[id*=GridView1] img").on('mouseenter', function () {
$('#dialog').html('');
$('#dialog').append($(this).clone());
$('#dialog').find('img')[0].style.width = '375px';
$('#dialog').find('img')[0].style.height = '350px';
$('#dialog').dialog('open');
});
});
</script>
Namespaces
C#
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
VB.Net
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Code
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 Name,Data FROM tblFiles", conn))
{
DataTable dt = new DataTable();
sda.Fill(dt);
dt.Rows.Add();
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
}
}
protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
DataRowView dr = (DataRowView)e.Row.DataItem;
if (dr.Row.Table.Columns.Contains("Data"))
{
if (dr["Data"] != DBNull.Value)
{
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 Name,Data FROM tblFiles", conn)
Dim dt As DataTable = New DataTable()
sda.Fill(dt)
dt.Rows.Add()
GridView1.DataSource = dt
GridView1.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)
If dr.Row.Table.Columns.Contains("Data") Then
If Not IsDBNull(dr("Data")) Then
Dim imageUrl As String = "data:image/jpg;base64," & Convert.ToBase64String(CType(dr("Data"), Byte()))
TryCast(e.Row.FindControl("Image1"), Image).ImageUrl = imageUrl
End If
End If
End If
End Sub
Screenshot
![](https://i.imgur.com/mmJG2yl.gif)