how to show an image in gridview

Question

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

Upendra Pratap Shahi · 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 Shahi title > head > body > form id ="form1" runat ="server"> h3 style =" color : #0000FF ; font-style : italic"> Display Image and update, delete in GridView Using ASP.NET h3 > 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"> 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 > 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.

Baimey Rajesh · Answer

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

Susanta Rout · Answer

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

Upendra Pratap Shahi · Answer

Congrats to success ....

Susanta Rout · Answer

thanks all of you i got the success

Upendra Pratap Shahi · Answer

Thanks Susanta Rout for appreciation.

Upendra Pratap Shahi · Answer

I've deleted only in DB fut you can delete this from folder also.

Susanta Rout · Answer

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

Munesh Sharma · Answer

http://www.c-sharpcorner.com/UploadFile/5089e0/show-image-in-gridview-using-Asp-Net/

Upendra Pratap Shahi · Answer

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.

Susanta Rout · Answer

Upendra Pratap Shahi but i don't want image name.thanks for given your time to me

Upendra Pratap Shahi · Answer

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.

Susanta Rout · Answer

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

Upendra Pratap Shahi · Answer

Hello Susanta Rout , Try my code , this will help you. Any doubt kindly revert same. If help kindly accept the answer .

Baimey Rajesh · Answer

Please refer to the below link as well :) http://technico.qnownow.com/how-to-update-image-in-gridview/

Upendra Pratap Shahi · Answer

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 Shahi title > head > body > form id ="form1" runat ="server"> h3 style =" color : #0000FF ; font-style : italic"> Display Image and update, delete in GridView Using ASP.NET h3 > 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"> 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 > 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 .

Baimey Rajesh · Answer

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); }

Susanta Rout · Answer

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

Upendra Pratap Shahi · Answer

Hello Susanta, Go through below nice link- http://www.c-sharpcorner.com/UploadFile/5089e0/show-image-in-gridview-using-Asp-Net/

Susanta Rout · Answer

my gridview is like this Image

Rajeesh Menoth · Answer

Hi Susanta Rout , Ref the Baimey Rajesh solution and check Click here & Second one

Baimey Rajesh · Answer

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

how to show an image in gridview

Answers (22)