Hi kartik3661,
Refer the below sample code.
HTML
CS.aspx
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" />
<script type="text/javascript">
function ShowPopup() {
$(function () {
$("#dialog").dialog({
title: "Original Image",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Name" HeaderText="Image Name" />
<asp:TemplateField HeaderText="Photo">
<ItemTemplate>
<asp:ImageButton ID="Image1" Height="100" Width="100" runat="server" ImageUrl='<%# Eval("ID", "ImageCSharp.ashx?ImageID={0}")%>'
OnClick="GetOriginalImage" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="dialog" style="display: none; height: auto; width: auto" align="center">
<asp:Image ID="Image1" runat="server" Visible="false" Height="200px" Width="200px" />
</div>
</div>
</form>
</body>
VB.aspx
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" />
<script type="text/javascript">
function ShowPopup() {
$(function () {
$("#dialog").dialog({
title: "Original Image",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Name" HeaderText="Image Name" />
<asp:TemplateField HeaderText="Photo">
<ItemTemplate>
<asp:ImageButton ID="Image1" Height="100" Width="100" runat="server" ImageUrl='<%# Eval("ID", "ImageVB.ashx?ImageID={0}")%>'
OnClick="GetOriginalImage" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="dialog" style="display: none; height: auto; width: auto" align="center">
<asp:Image ID="Image1" runat="server" Visible="false" Height="200px" Width="200px" />
</div>
</div>
</form>
</body>
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridView1.DataSource = GetData("SELECT * FROM tblFiles WHERE ContentType = 'image/jpeg' ORDER BY ID");
GridView1.DataBind();
}
}
protected void GetOriginalImage(object sender, EventArgs e)
{
string id = (sender as ImageButton).ImageUrl.Split('=')[(sender as ImageButton).ImageUrl.Split('=').Length - 1];
if (!string.IsNullOrEmpty(id))
{
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/png;base64," + base64String;
Image1.Visible = true;
}
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup();", true);
}
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;
}
}
ImageCSharp.ashx
public void ProcessRequest(HttpContext context)
{
if (context.Request.QueryString["ImageID"] != null)
{
string strQuery = "SELECT * FROM tblFiles WHERE id = " + context.Request.QueryString["ImageID"];
DataTable dt = new DataTable();
string constr = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(strQuery))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
sda.SelectCommand = cmd;
sda.Fill(dt);
}
}
}
if (dt != null)
{
Byte[] bytes = (Byte[])dt.Rows[0]["Data"];
context.Response.Buffer = true;
context.Response.Charset = "";
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
context.Response.ContentType = dt.Rows[0]["ContentType"].ToString();
context.Response.AddHeader("content-disposition", "attachment;filename=" + dt.Rows[0]["Name"].ToString());
context.Response.BinaryWrite(bytes);
context.Response.Flush();
context.Response.End();
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
GridView1.DataSource = GetData("SELECT * FROM tblFiles WHERE ContentType = 'image/jpeg' ORDER BY ID")
GridView1.DataBind()
End If
End Sub
Protected Sub GetOriginalImage(sender As Object, e As EventArgs)
Dim id As String = TryCast(sender, ImageButton).ImageUrl.Split("="c)(TryCast(sender, ImageButton).ImageUrl.Split("="c).Length - 1)
If Not String.IsNullOrEmpty(id) Then
Dim bytes As Byte() = DirectCast(GetData(Convert.ToString("SELECT Data FROM tblFiles WHERE Id =") & id).Rows(0)("Data"), Byte())
Dim base64String As String = Convert.ToBase64String(bytes, 0, bytes.Length)
Image1.ImageUrl = Convert.ToString("data:image/png;base64,") & base64String
Image1.Visible = True
End If
ClientScript.RegisterStartupScript(Me.[GetType](), "Popup", "ShowPopup();", True)
End Sub
Private Function GetData(query As String) As DataTable
Dim dt As New DataTable()
Dim constr As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand(query)
Using sda As New SqlDataAdapter()
cmd.CommandType = CommandType.Text
cmd.Connection = con
sda.SelectCommand = cmd
sda.Fill(dt)
End Using
End Using
Return dt
End Using
End Function
ImageVB.ashx
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
If context.Request.QueryString("ImageID") IsNot Nothing Then
Dim strQuery As String = "SELECT * FROM tblFiles WHERE id = " + context.Request.QueryString("ImageID")
Dim dt As New DataTable()
Dim constr As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand(strQuery)
Using sda As New SqlDataAdapter()
cmd.CommandType = CommandType.Text
cmd.Connection = con
sda.SelectCommand = cmd
sda.Fill(dt)
End Using
End Using
End Using
If dt IsNot Nothing Then
Dim bytes As [Byte]() = DirectCast(dt.Rows(0)("Data"), [Byte]())
context.Response.Buffer = True
context.Response.Charset = ""
context.Response.Cache.SetCacheability(HttpCacheability.NoCache)
context.Response.ContentType = dt.Rows(0)("ContentType").ToString()
context.Response.AddHeader("content-disposition", "attachment;filename=" + dt.Rows(0)("Name").ToString())
context.Response.BinaryWrite(bytes)
context.Response.Flush()
context.Response.[End]()
End If
End If
End Sub
Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
Screenshot