In this article I am going to explain how we can save
and show Images from Data Base in asp.net c#.
Below is my table
Image 1.
My aspx Code is:
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Save And Display Images From Data Base</title>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<table
cellpadding="1"
cellspacing="10"
style="background-color: skyblue;
border: solid 2px Green;"
width="70%" align="center">
<tr>
<td align="center">
<table cellpadding="1" cellspacing="10" style="background-color:
skyblue; border:
solid 4px Red;">
<tr>
<td>
Employee Name:
</td>
<td>
<asp:TextBox ID="txtEmpName"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Employee
Address:
</td>
<td>
<asp:TextBox ID="txtEmpAddress"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Employee
Mobile:
</td>
<td>
<asp:TextBox ID="txtEmpMobile"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Upload Image:
</td>
<td>
<asp:FileUpload ID="fileuploadImage"
runat="server"
/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnUpload"
runat="server"
Text="Upload"
OnClick="btnUpload_Click"
/>
</td>
</tr>
</table>
<table>
<tr>
<td height="10px">
</td>
</tr>
</table>
<table cellpadding="1" cellspacing="10" style="background-color:
skyblue; border:
solid 2px Green;"
width="100%">
<tr>
<td align="center">
<asp:GridView ID="gridViewEmployee"
CssClass="Gridview"
runat="server"
AutoGenerateColumns="False"
Width="90%" HeaderStyle-ForeColor="#cc0000">
<Columns>
<asp:BoundField HeaderText="Employee
Name" DataField="EmployeeName" ItemStyle-VerticalAlign="Middle"
ItemStyle-HorizontalAlign="Center"
/>
<asp:BoundField HeaderText="Address"
DataField="Address"
ItemStyle-VerticalAlign="Middle"
ItemStyle-HorizontalAlign="Center"
/>
<asp:BoundField HeaderText="Mobile"
DataField="Mobile"
ItemStyle-VerticalAlign="Middle"
ItemStyle-HorizontalAlign="Center"
/>
<asp:TemplateField HeaderText="Image"
ItemStyle-VerticalAlign="Middle"
ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Image ID="EmpImage"
runat="server"
ImageUrl='<%#
"EmployeeImage.ashx?EmpID="+ Eval("ID") %>'
Height="100px" Width="100px" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div>
</div>
</form>
</body>
</html>
My aspx.cs
code is:
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using
System.Web.UI.HtmlControls;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
public partial
class _Default
: System.Web.UI.Page
{
protected void
Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindEmpGridData();
}
}
protected void
btnUpload_Click(object sender, EventArgs e)
{
if (fileuploadImage.HasFile)
{
int
length = fileuploadImage.PostedFile.ContentLength;
byte[]
imgbyte = new byte[length];
HttpPostedFile
img = fileuploadImage.PostedFile;
img.InputStream.Read(imgbyte, 0,
length);
string
Emp_Name = txtEmpName.Text;
string
Emp_Address = txtEmpAddress.Text;
string
Emp_Mobile = txtEmpMobile.Text;
SqlConnection
connection = new SqlConnection(@"Data Source= MyPC\SqlServer2k8;Integrated
Security=True;Initial Catalog=Business");
connection.Open();
SqlCommand
cmd = new SqlCommand("INSERT INTO Employee (EmployeeName,Address,Mobile,Image)
VALUES
(@EmployeeName,@Address,@Mobile,@Image)", connection);
cmd.Parameters.Add("@EmployeeName", SqlDbType.VarChar, 50).Value = Emp_Name;
cmd.Parameters.Add("@Address", SqlDbType.VarChar,
50).Value = Emp_Address;
cmd.Parameters.Add("@Mobile", SqlDbType.VarChar,
50).Value = Emp_Mobile;
cmd.Parameters.Add("@Image", SqlDbType.Image).Value
= imgbyte;
int
RecordCount = cmd.ExecuteNonQuery();
connection.Close();
if
(RecordCount == 1)
{
BindEmpGridData();
txtEmpName.Text = string.Empty;
txtEmpAddress.Text = string.Empty;
txtEmpMobile.Text = string.Empty;
ScriptManager.RegisterStartupScript(this, this.GetType(),
"alertmessage", "javascript:alert('Record Inserted
Successfully.')", true);
}
else
{
ScriptManager.RegisterStartupScript(this, this.GetType(),
"alertmessage", "javascript:alert('There is some Error, Please try
again.')", true);
}
}
}
private void
BindEmpGridData()
{
SqlConnection connection = new SqlConnection(@"Data Source= MyPC \SqlServer2k8;Integrated Security=True;Initial
Catalog=Business");
SqlCommand command = new SqlCommand("SELECT * FROM EMPLOYEE", connection);
SqlDataAdapter da = new SqlDataAdapter(command);
DataTable dt = new DataTable();
da.Fill(dt);
gridViewEmployee.DataSource = dt;
gridViewEmployee.DataBind();
}
}
Here I am using a Handler to display images
(EmployeeImage.ashx)
<%@ WebHandler
Language="C#"
Class="EmployeeImage"
%>
using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
public class
EmployeeImage : IHttpHandler
{
public void
ProcessRequest(HttpContext context)
{
string EmpId =
context.Request.QueryString["EmpID"];
SqlConnection connection = new SqlConnection(@"Data Source=MyPC\SqlServer2k8;Integrated
Security=True;Initial Catalog=Business");
connection.Open();
SqlCommand command = new SqlCommand("select Image from Employee where ID=" +
EmpId, connection);
SqlDataReader dr =
command.ExecuteReader();
dr.Read();
context.Response.BinaryWrite((Byte[])dr[0]);
connection.Close();
context.Response.End();
}
public bool
IsReusable
{
get
{
return
false;
}
}
}
Now Run the application:
Image 2.
Image 3.