Binding Image With GridView And Update Image in GridView Without Using Database

This article shows you how to bind data in GridView controls without using any database. Also, we will learn here how to bind controls with data without using a database. Additionally, how to handle gridview common event in this will be discussed. Here I’ve described more events such as Edit, Update and Delete event.

This is using Image uploading and binding in GridView and then updating image in GridView.

Also read the following articles:

Binding Data Using ListView and GridView in ASP.NET without Database

Binding Data in ListView on LinkButton Click

Initial Chamber

Step 1

Open Visual Studio and create an empty website, then provide a suitable name such as BindImageWithoutDB.

Step 2

In Solution Explorer you will get your empty website, then add some web forms.

BindImageWithoutDB (your empty website). Right-click and select Add New Item Web Form. Name it BindImageWithoutDB.aspx.

Design Chamber

Step-3

Open the BindImageWithoutDB.aspx file and write some code for the design of the application.

Step3.1

Put stylesheet code in head chamber of page.

Set your style of page according to your need of design as in the following:

<style type="text/css">
body {
color: #333;
text-align: center;
background-color: aqua;
}
</style>

Step3.2

Choose control from toolbox and put on your design page as in the following code snippet:

<div style="float: left">
<asp:Label ID="Label1" runat="server" Text="Display an Image :"></asp:Label>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Display" OnClick="UploadImage" />
</div>
<asp:Label ID="lblResult" runat="server" />
<br />
<br />
<div style="float: left">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowCancelingEdit="GridView1_RowCancelingEdit" DataKeyNames="imgname" CellPadding="4"
OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" OnRowDeleting="GridView1_RowDeleting" HeaderStyle-BackColor="Tomato">
<Columns>
<asp:TemplateField HeaderText="Sr.No" HeaderStyle-Width="200px">
<ItemTemplate>
<asp:Label ID="lblImgId" runat="server" Text='<%#Container.DataItemIndex+1%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Date">
<ItemTemplate>
<asp:Label ID="lblDate" runat="server" ClientIDMode="Static" Text='<%# DataBinder.Eval(Container.DataItem,"imgdate") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblTextBox1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"imgname") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image Name">
<ItemTemplate>
<asp:Image ID="Image" runat="server" Height="100px" Width="20%" ImageUrl='<%# DataBinder.Eval(Container.DataItem,"imgurl") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:Image ID="img_user" runat="server" ImageUrl='<%# Eval("imgurl") %>'
Height="80px" Width="100px" /><br />
<asp:FileUpload ID="FileUpload1" runat="server" />
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="150px">
<ItemTemplate>
<asp:LinkButton ID="LkB1" runat="server" CommandName="Edit">Edit</asp:LinkButton>
<asp:LinkButton ID="LkB11" runat="server" CommandName="Delete">Delete</asp:LinkButton>
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="LkB2" runat="server" CommandName="Update">Update</asp:LinkButton>
<asp:LinkButton ID="LkB3" runat="server" CommandName="Cancel">Cancel</asp:LinkButton>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div

Design of page looks like the following:

Here, I've designed the GridView Control and uploader used some property as in the following code snippet:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BindImageWithoutDB.aspx.cs" Inherits="BindImageWithoutDB" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>C-sharp corner by Upendra</title>
<style type="text/css">
body {
color: #333;
text-align: center;
background-color: aqua;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="float: left">
<asp:Label ID="Label1" runat="server" Text="Display an Image :"></asp:Label>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Display" OnClick="UploadImage" />
</div>
<asp:Label ID="lblResult" runat="server" />
<br />
<br />
<div style="float: left">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowCancelingEdit="GridView1_RowCancelingEdit" DataKeyNames="imgname" CellPadding="4"
OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" OnRowDeleting="GridView1_RowDeleting" HeaderStyle-BackColor="Tomato">
<Columns>
<asp:TemplateField HeaderText="Sr.No" HeaderStyle-Width="200px">
<ItemTemplate>
<asp:Label ID="lblImgId" runat="server" Text='<%#Container.DataItemIndex+1%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Date">
<ItemTemplate>
<asp:Label ID="lblDate" runat="server" ClientIDMode="Static" Text='<%# DataBinder.Eval(Container.DataItem,"imgdate") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblTextBox1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"imgname") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image Name">
<ItemTemplate>
<asp:Image ID="Image" runat="server" Height="100px" Width="20%" ImageUrl='<%# DataBinder.Eval(Container.DataItem,"imgurl") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:Image ID="img_user" runat="server" ImageUrl='<%# Eval("imgurl") %>'
Height="80px" Width="100px" /><br />
<asp:FileUpload ID="FileUpload1" runat="server" />
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="150px">
<ItemTemplate>
<asp:LinkButton ID="LkB1" runat="server" CommandName="Edit">Edit</asp:LinkButton>
<asp:LinkButton ID="LkB11" runat="server" CommandName="Delete">Delete</asp:LinkButton>
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="LkB2" runat="server" CommandName="Update">Update</asp:LinkButton>
<asp:LinkButton ID="LkB3" runat="server" CommandName="Cancel">Cancel</asp:LinkButton>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>

Your design looks like the following figure:

CODE CHAMBER

Step 4

In the code chamber we will write some code so that our application works.
Adding the following namespaces under namespace section of your code behind page.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

Code behind Page

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class BindImageWithoutDB : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindImage();
}
}
public class clsImg
{
//property for image uploading
public string imgurl { get; set; }
public string imgname { get; set; }
public DateTime imgdate { get; set; }
}
protected void BindImage()
{
string[] filesindirectory = Directory.GetFiles(Server.MapPath("~/Images/TestImage/"));
List<clsImg> images = new List<clsImg>(filesindirectory.Count());
//file time
DirectoryInfo DirInfo = new DirectoryInfo(Server.MapPath("~/Images/TestImage/"));
var files = from file in DirInfo.EnumerateFiles()
orderby file.LastWriteTime descending
select file;
DateTime lastModifie = System.DateTime.Now;
DateTime creationTime;
DateTime lastAccessTime;
foreach (var fi in files)
{
lastModifie = fi.LastWriteTimeUtc;
creationTime = fi.CreationTimeUtc;
lastAccessTime = fi.LastWriteTimeUtc;
images.Add(new clsImg { imgdate = lastModifie, imgname = fi.Name.ToString(), imgurl = String.Format("~/Images/TestImage/{0}", System.IO.Path.GetFileName(fi.Name.ToString())) });
}
GridView1.DataSource = images;
GridView1.DataBind();
}
protected void UploadImage(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Images/TestImage/") + fileName);
Response.Redirect(Request.Url.AbsoluteUri);
}
}
//editing event
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
GridView1.EditIndex = e.NewEditIndex;
BindImage();
}
//row updation event
//here we try to update modification time but this I can't achieve this currently
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
//find image id of edit row
string imageId = GridView1.DataKeys[e.RowIndex].Value.ToString();
// find values for update
Label name = (Label)GridView1.Rows[e.RowIndex].FindControl("lblTextBox1");
FileUpload FileUpload1 = (FileUpload)GridView1.Rows[e.RowIndex].FindControl("FileUpload1");
string path = "~/Images/TestImage/";
string path1;
if (FileUpload1.HasFile)
{
ImageDeleteFromFolder(name.Text.ToString());
//path += FileUpload1.FileName;
path += FileUpload1.FileName;
//save image in folder
FileUpload1.SaveAs(MapPath(path));
}
else
{
// use previous user image if new image is not changed
Image img = (Image)GridView1.Rows[e.RowIndex].FindControl("img_user");
path = img.ImageUrl;
}
GridView1.EditIndex = -1;
BindImage();
}
//cancelation event
protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
GridView1.EditIndex = -1;
BindImage();
}
//deleting event
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
GridViewRow row = (GridViewRow)GridView1.Rows[e.RowIndex];
// Label lbldeleteid = (Label)row.FindControl("lblTextBox1");
Label lblDeleteImageName = (Label)row.FindControl("lblTextBox1");
//con = new SqlConnection(connStr);
ImageDeleteFromFolder(lblDeleteImageName.Text.ToString());
BindImage();
}
/// <summary>
/// This function is used to delete image from folder when deleting in gridview.
/// </summary>
/// <param name="imagename">image name</param>
protected void ImageDeleteFromFolder(string imagename)
{
string file_name = imagename;
string path = Server.MapPath(@"~/Images/TestImage/" + imagename);
FileInfo file = new FileInfo(path);
if (file.Exists)//check file exsit or not
{
file.Delete();
lblResult.Text = file_name + " file deleted successfully";
lblResult.ForeColor = System.Drawing.Color.Green;
}
else
{
lblResult.Text = file_name + " This file does not exists ";
lblResult.ForeColor = System.Drawing.Color.Red;
}
}
}

Output

I hope you liked this. Have a good day. Thank you for reading.

19 Comments

Join the conversation! Your thoughts help the community grow.

manish kumar8y ago
It having error i tried many times but same error occur (var files = from file in DirInfo.EnumerateFiles())
- Upendra Pratap Shahi8y ago
  I'm not getting you. What you exactly want? Have you downloaded the source code?
Vipul Malhotra11y ago
nice Article
- Upendra Pratap Shahi11y ago
  thanks Vipul Malhotra
Ajeet Mishra11y ago
nice
- Upendra Pratap Shahi11y ago
  thanks Ajeet Mishra
Ankit Bansal11y ago
Awesome..thanks for sharing..
- Upendra Pratap Shahi11y ago
  thanks Ankit Bansal
Harshad Pansuriya11y ago
Nice one
- Upendra Pratap Shahi11y ago
  thanks Harshad Pansuriya
Nilesh Jadav11y ago
hahah !! Upendra Pratap Shahi Nice article sir !! But what about chambers ?? Just kidding
- Upendra Pratap Shahi11y ago
  thanks for nice comments
- Upendra Pratap Shahi11y ago
  I'll update this
Shridhar Sharma11y ago
nice share :)
- Upendra Pratap Shahi11y ago
  thanks Shridhar Sharma
Santhakumar Munuswamy11y ago
Good one
- Upendra Pratap Shahi11y ago
  thanks Santhakumar Munuswamy
Sujeet Suman11y ago
Nice Article.............
- Upendra Pratap Shahi11y ago
  thanks Sujeet Suman