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.