Insert Image With Details in Database With ASP.NET

Introduction

From this article we will know how to insert an image with details of the employee in the database. Here we will create three web pages as Default.aspx, employee.aspx and image.aspx. After inserting the records in the Default.aspx page the control moves to employee.aspx where we can see all the records of the employee with images in a Gridview.

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Byte_array_gridview._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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>Employee Details </h2>
<table>
<tr>
<td>
Name</td>
<td>
<asp:TextBox id="txtname" RunAt="server"></asp:TextBox>
</td>
</tr>

<tr>
<td>
Address</td>
<td>
<asp:TextBox id="txtaddress" RunAt="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Image File </td>
<td>
<input id="Upload" type="file" runat="server" /></td>
</tr>
</table>
<asp:Button id="btn_insert" RunAt="server"
Text="Insert" onclick="btn_insert_Click"></asp:Button>
<asp:label id="lblMessage" runat="server" />
</div>
</form>
</body>
</html>

Default.aspx.cs

using System;
using System.Collections;
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;
namespace Byte_array_gridview
{
public partial class _Default : System.Web.UI.Page
{
string strConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
string str;
SqlCommand com;
protected void btn_insert_Click(object sender, EventArgs e)
{
insertdata();
}
public void insertdata()
{
SqlConnection con = new SqlConnection(strConnString);
con.Open();
str = "select count(*)from employee where name='" + txtname.Text + "'";
com = new SqlCommand(str, con);
int count = Convert.ToInt32(com.ExecuteScalar());
con.Close();
if (count > 0)
{
lblMessage.Text = "Sorry! you can't take this username";
}
else
{
lblMessage.Text = "You can take this username";
con.Open();
int len = Upload.PostedFile.ContentLength;
byte[] pic = new byte[len + 1];
Upload.PostedFile.InputStream.Read(pic, 0, len);
str = "insert into employee values (@name,@address,@photo)";
com = new SqlCommand(str, con);
com.Parameters.AddWithValue("@name", txtname.Text);
com.Parameters.AddWithValue("@address", txtaddress.Text);
com.Parameters.AddWithValue("@photo", pic);
com.ExecuteNonQuery();
con.Close();
lblMessage.Text = "Employee Details Inserted Successfully!";
Response.Redirect("employee.aspx");
con.Close();
}
}
}
}

employee.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="employee.aspx.cs" Inherits="Byte_array_gridview.employee" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<itemtemplate>
<b>Id :</b> <%# Eval("id") %>
<br>
<b>Name :</b> <%# Eval("name")%>
<br>
<b>Address :</b> <%# Eval("address")%>
<br>
<img alt="image" src='image.aspx?id=<%# Eval("id")%>'/>
</itemtemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>

employee.aspx.cs

image.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="image.aspx.cs" Inherits="Byte_array_gridview.image" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>

image.aspx.cs

using System;
using System.Collections;
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.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Data.SqlClient;
namespace Byte_array_gridview
{
public partial class image : System.Web.UI.Page
{
string strConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
string str;
SqlCommand com;
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(strConnString);
con.Open();
str = "select photo from employee where id = '" + Request.QueryString["id"] + "'";
com = new SqlCommand(str, con);
MemoryStream stream = new MemoryStream();
byte[] image = (byte[])com.ExecuteScalar();
stream.Write(image, 0, image.Length);
Bitmap bitmap = new Bitmap(stream);
Response.ContentType = "image/Jpeg";
bitmap.Save(Response.OutputStream, ImageFormat.Jpeg);
con.Close();
stream.Close();
}
}
}

Output