insert images into database and how to retrieve and bind images to gridview using asp.net save and retrieve images from database using c# asp.net

insert images into database and how to retrieve and bind images to gridview using asp.net save and retrieve images from database using c# asp.net

Program:

.aspx file

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Inserting images into databse and displaying images with gridview</title>

<style type="text/css">

.Gridview

{

font-family:Verdana;

font-size:10pt;

font-weight:normal;

color:black;

width:500px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

<table>

<tr>

<td>

Image Name:

</td>

<td>

<asp:TextBox ID="txtImageName" 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>

</div>

<div>

<asp:GridView ID="gvImages" CssClass="Gridview" runat="server" AutoGenerateColumns="False"

HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="white">

<Columns>

<asp:BoundField HeaderText = "Image Name" DataField="imagename" />

<asp:TemplateField HeaderText="Image">

<ItemTemplate>

<asp:Image ID="Image1" runat="server" ImageUrl='<%# "ImageHandler.ashx?ImID=

"+ Eval("ImageID") %>' Height="150px" Width="150px"/>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</div>

</form>

</body>

</html>

.aspx.cs

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial class addtocart : System.Web.UI.Page
{
string strcon = ConfigurationManager.ConnectionStrings["dbconnection"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridData();
}
}
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 imagename = txtImageName.Text;
SqlConnection connection = new SqlConnection(strcon);
connection.Open();
SqlCommand cmd = new SqlCommand("INSERT INTO Image (ImageName,Image) VALUES (@imagename,@imagedata)", connection);
cmd.Parameters.Add("@imagename", SqlDbType.VarChar, 50).Value = imagename;
cmd.Parameters.Add("@imagedata", SqlDbType.Image).Value = imgbyte;
int count = cmd.ExecuteNonQuery();
connection.Close();
if (count == 1)
{
BindGridData();
txtImageName.Text = string.Empty;
ScriptManager.RegisterStartupScript(this, this.GetType(), "alertmessage",

"javascript:alert('" + imagename + " image inserted successfully')", true);
}
}
}
private void BindGridData()
{
SqlConnection connection = new SqlConnection(strcon);
SqlCommand command = new SqlCommand("SELECT imagename,ImageID from [Image]",

connection);
SqlDataAdapter daimages = new SqlDataAdapter(command);
DataTable dt = new DataTable();
daimages.Fill(dt);
gvImages.DataSource = dt;
gvImages.DataBind();
gvImages.Attributes.Add("bordercolor", "black");
}

Now we need to add HTTPHandler file to our project to retrieve images from database because we save our images in binary format getting the binary format of data from database it’s easy but displaying is very difficult that’s why we will use HTTPHandler to solve this problem.

Right Click on your project add new HTTPHandler.ashx file and give name as ImageHandler.ashx and write the following code in page request method like this

HTTPHandler.ashx

string strcon = ConfigurationManager.AppSettings["ConnectionString"].ToString();public void ProcessRequest(HttpContext context)

{

string imageid = context.Request.QueryString["ImID"];

SqlConnection connection = new SqlConnection(strcon);

connection.Open();

SqlCommand command = new SqlCommand("select Image from Image where ImageID=" + imageid, connection);

SqlDataReader dr = command.ExecuteReader();

dr.Read();

context.Response.BinaryWrite((Byte[])dr[0]);

connection.Close();

context.Response.End();

}

web.config:

<connectionStrings>
<add name="dbconnection" connectionString="Data Source=SureshDasari;Integrated Security=true;
Initial Catalog=MySampleDB"/>
</connectionStrings>

Demo: