how to show an image in gridview

Susanta Rout

11y1.7k.NET

how to show an image in gridview and we can change that image using in gridview too

22 Replies

Know the answer? Post it — somebody with the same question will find it here.

Upendra Pratap Shahi11y ago
Accepted answer
Hello Susanta Rout,

Kindly use new below code for your requirement-

Design Page-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewImageUploading.aspx.cs" Inherits="GridViewImageUploading" %>

DOCTYPE html>

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

<head runat="server">

<title>An article by Upendra Pratap Shahititle>

head>

<body>

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

<h3 style="color: #0000FF; font-style: italic">Display Image and update, delete in GridView Using ASP.NETh3>

<div>

<asp:FileUpload ID="fileupload" runat="server" />

<asp:Button ID="upload" runat="server" Font-Bold="true" Text="Upload" OnClick="upload_Click" />

<asp:Label ID="lblResult" runat="server"/>

<br />

<br />

div>

<div>

<asp:GridView runat="server" ID="gvImage" AutoGenerateColumns="false" AllowPaging="True"

OnRowCancelingEdit="gvImage_RowCancelingEdit" DataKeyNames="ImageId" CellPadding="4"

OnRowEditing="gvImage_RowEditing" OnRowUpdating="gvImage_RowUpdating" OnRowDeleting="gvImage_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="Name" HeaderStyle-Width="200px">

<ItemTemplate>

<asp:Label ID="lblImageName" runat="server" Text='<%# Eval("ImageName") %>'>asp:Label>

ItemTemplate>

<EditItemTemplate>

<asp:TextBox ID="txt_Name" runat="server" Text='<%# Eval("ImageName") %>'>asp:TextBox>

EditItemTemplate>

asp:TemplateField>

<asp:TemplateField HeaderText="Image" HeaderStyle-Width="200px">

<ItemTemplate>

<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Image") %>'

Height="80px" Width="100px" />

ItemTemplate>

<EditItemTemplate>

<asp:Image ID="img_user" runat="server" ImageUrl='<%# Eval("Image") %>'

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">Editasp:LinkButton>

<asp:LinkButton ID="LkB11" runat="server" CommandName="Delete">Deleteasp:LinkButton>

ItemTemplate>

<EditItemTemplate>

<asp:LinkButton ID="LkB2" runat="server" CommandName="Update">Updateasp:LinkButton>

<asp:LinkButton ID="LkB3" runat="server" CommandName="Cancel">Cancelasp:LinkButton>

EditItemTemplate>

asp:TemplateField>

Columns>

asp:GridView>

div>

form>

body>

html>

Code behind page-

using System;

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.IO;

using System.Configuration;

public partial class GridViewImageUploading : System.Web.UI.Page

{

SqlConnection con;

SqlDataAdapter da;

DataSet ds;

SqlCommand cmd;

string connStr = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

ImageData();

}

}

protected void upload_Click(object sender, EventArgs e)

{

try

{

string filename = Path.GetFileName(fileupload.PostedFile.FileName);

fileupload.SaveAs(Server.MapPath("~/Images/" + filename));

con = new SqlConnection(connStr);

con.Open();

cmd = new SqlCommand("insert into Image_Details (ImageName,Image) values(@ImageName,@Image)", con);

cmd.Parameters.AddWithValue("@ImageName", filename);

cmd.Parameters.AddWithValue("@Image", "Images/" + filename);

cmd.ExecuteNonQuery();

ImageData();

}

catch (Exception ex)

{

upload.Text = ex.Message;

}

}

protected void ImageData()

{

con = new SqlConnection(connStr);

con.Open();

da = new SqlDataAdapter("select * from Image_Details", con);

ds = new DataSet();

da.Fill(ds);

gvImage.DataSource = ds;

gvImage.DataBind();

}

// edit event

protected void gvImage_RowEditing(object sender, GridViewEditEventArgs e)

{

gvImage.EditIndex = e.NewEditIndex;

ImageData();

}

// update event

protected void gvImage_RowUpdating(object sender, GridViewUpdateEventArgs e)

{

//find image id of edit row

string imageId = gvImage.DataKeys[e.RowIndex].Value.ToString();

// find values for update

TextBox name = (TextBox)gvImage.Rows[e.RowIndex].FindControl("txt_Name");

FileUpload FileUpload1 = (FileUpload)gvImage.Rows[e.RowIndex].FindControl("FileUpload1");

con = new SqlConnection(connStr);

string path = "~/Images/";

if (FileUpload1.HasFile)

{

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)gvImage.Rows[e.RowIndex].FindControl("img_user");

path = img.ImageUrl;

}

SqlCommand cmd = new SqlCommand("update Image_Details set ImageName='" + name.Text + "',image='" + path + "' where ImageId=" + imageId + "", con);

con.Open();

cmd.ExecuteNonQuery();

con.Close();

gvImage.EditIndex = -1;

ImageData();

}

// cancel edit event

protected void gvImage_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)

{

gvImage.EditIndex = -1;

ImageData();

}

//delete event

protected void gvImage_RowDeleting(object sender, GridViewDeleteEventArgs e)

{

GridViewRow row = (GridViewRow)gvImage.Rows[e.RowIndex];

Label lbldeleteid = (Label)row.FindControl("lblImgId");

Label lblDeleteImageName = (Label)row.FindControl("lblImageName");

con = new SqlConnection(connStr);

con.Open();

SqlCommand cmd = new SqlCommand("delete FROM Image_Details where ImageId='" + Convert.ToInt32(gvImage.DataKeys[e.RowIndex].Value.ToString()) + "'", con);

cmd.ExecuteNonQuery();

con.Close();

ImageDeleteFromFolder(lblDeleteImageName.Text);

ImageData();

}

///

/// This function is used to delete image from folder when deleting in gridview.

///

/// image name

protected void ImageDeleteFromFolder(string imagename)

{

string file_name = imagename;

string path = Server.MapPath(@"~/Images/" + 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;

}

}

}
Kindly accept the answer.
0
Susanta Rout11y ago
thank u sir, thank u mam too for your kind advice.i always will take it +vely

i have successfully completed both of your article
0
Baimey Rajesh11y ago
Good that you got success in what you did, Susanta Rout,
But let me tell you something, please try to read more articles and work more on coding... I'm basically a mentor and trainer, have seen many candidates.

Ur attitude and readiness should be appreciated but Please take it as a good advice and on positive spirit to be more alert and work more on ur coding part.

Best wishes and have a good future.
Baimey
+2
Upendra Pratap Shahi11y ago
Congrats to success ....
0
Susanta Rout11y ago
thanks all of you i got the success
0
Upendra Pratap Shahi11y ago
Thanks Susanta Rout for appreciation.
0
Upendra Pratap Shahi11y ago
I've deleted only in DB fut you can delete this from folder also.
0
Susanta Rout11y ago
thanks upendra Pratap shahi.yes i can do this.but there is a problem if i delete the image from database but it will not be delete in the image folder. thanks sir for your valuable time
0
Munesh Sharma11y ago
http://www.c-sharpcorner.com/UploadFile/5089e0/show-image-in-gridview-using-Asp-Net/
0
Upendra Pratap Shahi11y ago
Hello Susanta Rout,

If you don't want image name then left that field or not pull image name in code.
It is very simple and I hope you can do this.

Is this not helped you?

If helped then kindly accept the answer. It help to other for better discussion on forum.
0
Susanta Rout11y ago
Upendra Pratap Shahi but i don't want image name.thanks for given your time to me
0
Upendra Pratap Shahi11y ago
Your welcome Susanta Rout .

If helped kindly accept the answer.

I've written an article for you dear-

http://www.c-sharpcorner.com/UploadFile/77a82c/binding-image-with-gridview-and-update-image-in-gridview/

kindly go on this link and give a review.
0
Susanta Rout11y ago
thanks all of You, Baimey Rajesh , Upendra Pratap Shahi and Rajeesh menoth again thanks for given you valuable time to me. i am fesher i learnt and learning a lot from this c#corner

upendra sir you code is easy to understand for me bcz i am a fresher.
sir if i want to delete the how will it delete from image folder?
Baimey Rajesh Mam Your ref is a trick task bcz i never used a genereic handler.
thanks a lot a there seniors

But both are correct
0
Upendra Pratap Shahi11y ago
Hello Susanta Rout,

Try my code , this will help you.
Any doubt kindly revert same.

If help kindly accept the answer.
0
Baimey Rajesh11y ago
Please refer to the below link as well :)
http://technico.qnownow.com/how-to-update-image-in-gridview/
0
Upendra Pratap Shahi11y ago
Hello,

Use below code-

Design Page-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewImageUploading.aspx.cs" Inherits="GridViewImageUploading" %>

DOCTYPE html>

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

<head runat="server">

<title>An article by Upendra Pratap Shahititle>

head>

<body>

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

<h3 style="color: #0000FF; font-style: italic">Display Image and update, delete in GridView Using ASP.NETh3>

<div>

<asp:FileUpload ID="fileupload" runat="server" />

<asp:Button ID="upload" runat="server" Font-Bold="true" Text="Upload" OnClick="upload_Click" />

<br />

<br />

div>

<div>

<asp:GridView runat="server" ID="gvImage" AutoGenerateColumns="false" AllowPaging="True"

OnRowCancelingEdit="gvImage_RowCancelingEdit" DataKeyNames="ImageId" CellPadding="4"

OnRowEditing="gvImage_RowEditing" OnRowUpdating="gvImage_RowUpdating" OnRowDeleting="gvImage_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="Name" HeaderStyle-Width="200px">

<ItemTemplate>

<asp:Label ID="lblImageName" runat="server" Text='<%# Eval("ImageName") %>'>asp:Label>

ItemTemplate>

<EditItemTemplate>

<asp:TextBox ID="txt_Name" runat="server" Text='<%# Eval("ImageName") %>'>asp:TextBox>

EditItemTemplate>

asp:TemplateField>

<asp:TemplateField HeaderText="Image" HeaderStyle-Width="200px">

<ItemTemplate>

<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Image") %>'

Height="80px" Width="100px" />

ItemTemplate>

<EditItemTemplate>

<asp:Image ID="img_user" runat="server" ImageUrl='<%# Eval("Image") %>'

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">Editasp:LinkButton>

<asp:LinkButton ID="LkB11" runat="server" CommandName="Delete">Deleteasp:LinkButton>

ItemTemplate>

<EditItemTemplate>

<asp:LinkButton ID="LkB2" runat="server" CommandName="Update">Updateasp:LinkButton>

<asp:LinkButton ID="LkB3" runat="server" CommandName="Cancel">Cancelasp:LinkButton>

EditItemTemplate>

asp:TemplateField>

Columns>

asp:GridView>

div>

form>

body>

html>

CodeBehind Page-

using System;

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.IO;

using System.Configuration;

public partial class GridViewImageUploading : System.Web.UI.Page

{

SqlConnection con;

SqlDataAdapter da;

DataSet ds;

SqlCommand cmd;

string connStr = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

ImageData();

}

}

protected void upload_Click(object sender, EventArgs e)

{

try

{

string filename = Path.GetFileName(fileupload.PostedFile.FileName);

fileupload.SaveAs(Server.MapPath("~/Images/" + filename));

con = new SqlConnection(connStr);

con.Open();

cmd = new SqlCommand("insert into Image_Details (ImageName,Image) values(@ImageName,@Image)", con);

cmd.Parameters.AddWithValue("@ImageName", filename);

cmd.Parameters.AddWithValue("@Image", "Images/" + filename);

cmd.ExecuteNonQuery();

ImageData();

}

catch (Exception ex)

{

upload.Text = ex.Message;

}

}

protected void ImageData()

{

con = new SqlConnection(connStr);

con.Open();

da = new SqlDataAdapter("select * from Image_Details", con);

ds = new DataSet();

da.Fill(ds);

gvImage.DataSource = ds;

gvImage.DataBind();

}

// edit event

protected void gvImage_RowEditing(object sender, GridViewEditEventArgs e)

{

gvImage.EditIndex = e.NewEditIndex;

ImageData();

}

// update event

protected void gvImage_RowUpdating(object sender, GridViewUpdateEventArgs e)

{

//find image id of edit row

string imageId = gvImage.DataKeys[e.RowIndex].Value.ToString();

// find values for update

TextBox name = (TextBox)gvImage.Rows[e.RowIndex].FindControl("txt_Name");

FileUpload FileUpload1 = (FileUpload)gvImage.Rows[e.RowIndex].FindControl("FileUpload1");

con = new SqlConnection(connStr);

string path = "~/Images/";

if (FileUpload1.HasFile)

{

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)gvImage.Rows[e.RowIndex].FindControl("img_user");

path = img.ImageUrl;

}

SqlCommand cmd = new SqlCommand("update Image_Details set ImageName='" + name.Text + "',image='" + path + "' where ImageId=" + imageId + "", con);

con.Open();

cmd.ExecuteNonQuery();

con.Close();

gvImage.EditIndex = -1;

ImageData();

}

// cancel edit event

protected void gvImage_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)

{

gvImage.EditIndex = -1;

ImageData();

}

//delete event

protected void gvImage_RowDeleting(object sender, GridViewDeleteEventArgs e)

{

GridViewRow row = (GridViewRow)gvImage.Rows[e.RowIndex];

Label lbldeleteid = (Label)row.FindControl("lblImgId");

con = new SqlConnection(connStr);

con.Open();

SqlCommand cmd = new SqlCommand("delete FROM Image_Details where ImageId='" + Convert.ToInt32(gvImage.DataKeys[e.RowIndex].Value.ToString()) + "'", con);

cmd.ExecuteNonQuery();

con.Close();

ImageData();

}

}

Add query according to you.

Kindly accept the answer.
0
Baimey Rajesh11y ago
Please check my answer
in the code behind use the below event:
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if(GridView1.EditIndex == -1) return;
FileUpload fileUpLoad = GridView1.Rows[GridView1.EditIndex].FindControl("FileUpload1") as FileUpload;
string fileName = fileUpLoad.FileName;
string fullPath = Path.GetFullPath(fileName);
fileUpLoad.SaveAs(fullPath);
}
0
Susanta Rout11y ago
i know these are the nice codes but the problem is also need to update this photo using
if i use imagebound then how will update this photo in gridview
0
Upendra Pratap Shahi11y ago
Hello Susanta,

Go through below nice link-

http://www.c-sharpcorner.com/UploadFile/5089e0/show-image-in-gridview-using-Asp-Net/
0
Susanta Rout11y ago
my gridview is like this
Image
0
Rajeesh Menoth11y ago
Hi Susanta Rout,

Ref the Baimey Rajesh solution and check Click here & Second one
0
Baimey Rajesh11y ago
Hi Susanta,

How to show image in Gridview?
We have and article by our Gold Member Nitin Bhardwaj.
http://www.c-sharpcorner.com/UploadFile/5089e0/show-image-in-gridview-using-Asp-Net/

Or you can check MSDN
https://msdn.microsoft.com/en-us/library/aa479350.aspx

To edit this image
ASPX:

CS:
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if(GridView1.EditIndex == -1) return;
FileUpload fileUpLoad = GridView1.Rows[GridView1.EditIndex].FindControl("FileUpload1") as FileUpload;
string fileName = fileUpLoad.FileName;
string fullPath = Path.GetFullPath(fileName);
fileUpLoad.SaveAs(fullPath);
}

Hope it helps.
Regards
Baimey.
'Mark As Answer' if it helps
0