In this article I will explain how to inserting images into database and retrieving the images from database and binding images to gridview using asp.net
Or
How to save images into DB and retrieve images from
Database using Image Handler.ashx
Or
How to save and retrieve images from Database using
ASP.NET
In my
previous article I explained How
to upload or Save files in folder and download files when click on Download
link in gridview using asp.net
In this scenario inserting images into database and
retrieving the images from database and binding images to gridview using
asp.net
I have created one
table in Database.
1.
tblImages
First we need to establish a connection in
Web.config file.
<connectionStrings>
<add name="connectionString" connectionString="Data Source=LocalHost;uid=sa1;password=Con@123;Initial Catalog=practice"/>
</connectionStrings>
Below is the page
design.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Save images into databse and displaying images with gridview</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table align="center">
<tr>
<td align="center" colspan="2">
<b style="color: maroon; font-size: large;">Registration Form Save User Images</b>
</td>
</tr>
<tr>
<td align="right">FirstName
</td>
<td>
<asp:TextBox ID="txtfname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">LastName
</td>
<td>
<asp:TextBox ID="txtlname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">Email
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">Phone No
</td>
<td>
<asp:TextBox ID="txtphone" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">City
</td>
<td align="left">
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">Image Name:
</td>
<td>
<asp:TextBox ID="txtImageName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">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 align="center">
<tr>
<td align="center">
<asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="False"
HeaderStyle-BackColor="maroon" HeaderStyle-ForeColor="white">
<Columns>
<asp:BoundField HeaderText="First Name" DataField="Firstname" />
<asp:BoundField HeaderText="Last Name" DataField="Lastname" />
<asp:BoundField HeaderText="Image Name" DataField="imagename" />
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("UserID") %>' Height="100px" Width="100px" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Below is the total code for saving and retrieving
data from Database.
using
System;
using
System.Collections.Generic;
using
System.Configuration;
using
System.Data;
using
System.Data.SqlClient;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
public partial class SaveImagesToDb : System.Web.UI.Page
{
SqlConnection conImage = new SqlConnection(ConfigurationManager.ConnectionStrings["Connection"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridData();
}
}
//Bind data to GridView
private void BindGridData()
{
SqlCommand
command = new SqlCommand("SELECT
UserID,FirstName,LastName,imagename,image from tblImages", conImage);
SqlDataAdapter daimages = new SqlDataAdapter(command);
DataTable
dtBindGridData = new DataTable();
daimages.Fill(dtBindGridData);
gvImages.DataSource = dtBindGridData;
gvImages.DataBind();
}
// Save user information with image
protected void btnUpload_Click(object sender, EventArgs e)
{
//Check if the file uploaded or not
if (fileuploadImage.HasFile)
{
//Length of uploaded file
int length =
fileuploadImage.PostedFile.ContentLength;
//create a byte array to store the binary image data
byte[] imgbyte = new byte[length];
//store the currently selected file in memeory
HttpPostedFile img = fileuploadImage.PostedFile;
//set the binary data
img.InputStream.Read(imgbyte, 0, length);
string
imagename = txtImageName.Text;
conImage.Open();
SqlCommand
cmd = new SqlCommand("INSERT INTO tblImages
(FirstName,LastName,Email,PhoneNo,City,imagename,image) VALUES ('" + txtfname.Text + "','" + txtlname.Text + "','" + txtEmail.Text + "','" + txtphone.Text + "','" + txtCity.Text + "','" + txtImageName.Text + "',@imagedata)", conImage);
cmd.Parameters.Add("@imagedata", SqlDbType.Image).Value = imgbyte;
int count =
cmd.ExecuteNonQuery();
conImage.Close();
if (count == 1)
{
BindGridData();
ScriptManager.RegisterStartupScript(this, this.GetType(), "alertmessage", "javascript:alert('" + imagename + " image inserted successfully
!')", true);
}
}
}
}
After Completion of above code we
need to add Handler file to our Website to retrieve images from
database. We save our images in binary format getting the binary format of data
from database.
Handler is a simple class that allows you to process a request and
return a response to the browser. It can handle only one request at a time,
which in turn gives high performance.
Right Click on your Website
add new Handler.ashx file and give name as ImageHandler.ashx and
write the following code in page request method like this
<%@ WebHandler Language="C#" Class="ImageHandler" %>
using
System;
using
System.Collections.Generic;
using
System.Configuration;
using
System.Data.SqlClient;
using
System.Linq;
using
System.Web;
using
System.Web.Services;
public class ImageHandler : IHttpHandler
{
SqlConnection conImage = new SqlConnection(ConfigurationManager.ConnectionStrings["Connection"].ConnectionString);
public void ProcessRequest(HttpContext context)
{
string
imageid = context.Request.QueryString["ImID"];
conImage.Open();
SqlCommand
command = new SqlCommand("select image from tblImages where
UserID=" + imageid, conImage);
SqlDataReader dr = command.ExecuteReader();
dr.Read();
context.Response.BinaryWrite((Byte[])dr[0]);
conImage.Close();
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
Output:
Step 1: First record inserted into Database
Step 2: Second record inserted into Database
No comments:
Post a Comment