Please run this code by making a new website
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Images from Database in GridView Example</title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).on("click", "[id*=lnkView]", function () {
$("#id").html($(".Id", $(this).closest("tr")).html());
$("#name").html($(".Name", $(this).closest("tr")).html());
$("#divImage1").attr('src', ($(".Image1", $(this).closest("tr")).attr("src")));
$("#dialog").dialog({
title: "View Details",
buttons: {
Ok: function () {
$(this).dialog('close');
}
},
modal: true
});
return false;
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" Font-Names="Arial"
OnRowDataBound="GridView2_OnRowDataBound" Caption="Using ImageControl">
<Columns>
<asp:BoundField DataField="ID" ItemStyle-CssClass="Id" HeaderText="ID" />
<asp:BoundField DataField="Name" ItemStyle-CssClass="Name" HeaderText="Image Name" />
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" CssClass="Image1" Height="100" Width="100" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="View Image">
<ItemTemplate>
<asp:LinkButton Text="View" ID="lnkView" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<div id="dialog" style="display: none">
<b>Id:</b> <span id="id"></span>
<br />
<b>Name:</b> <span id="name"></span>
<br />
<b>Image:</b>
<asp:Image ID="divImage1" runat="server" Height="100" Width="100" />
</div>
</form>
</body>
</html>
Namespace
using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
C#
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
String strConnString = System.Configuration.ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
string strQuery = "select ID, Name from tblFiles order by ID";
SqlCommand cmd = new SqlCommand(strQuery);
SqlConnection con = new SqlConnection(strConnString);
SqlDataAdapter sda = new SqlDataAdapter();
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
try
{
con.Open();
sda.SelectCommand = cmd;
sda.Fill(dt);
//GridView1.DataSource = dt;
//GridView1.DataBind();
GridView2.DataSource = dt;
GridView2.DataBind();
}
catch (Exception ex)
{
Response.Write(ex.Message);
}
finally
{
con.Close();
sda.Dispose();
con.Dispose();
dt.Dispose();
}
}
protected void GridView2_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
int id = int.Parse(e.Row.Cells[0].Text);
Image Image1 = (Image)e.Row.FindControl("Image1");
byte[] bytes = (byte[])GetData("SELECT Data FROM tblFiles WHERE Id =" + id).Rows[0]["Data"];
string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
Image1.ImageUrl = "data:image/jpg;base64," + base64String;
}
}
private DataTable GetData(string query)
{
DataTable dt = new DataTable();
string constr = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
sda.SelectCommand = cmd;
sda.Fill(dt);
}
}
return dt;
}
}
SQL
CREATE TABLE [dbo].[tblFiles](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](50) NOT NULL,
[ContentType] [varchar](50) NOT NULL,
[Data] [varbinary](max) NOT NULL
) ON [PRIMARY]
GO
Screenshot
