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 (ImageNameImage) 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 (ImageNameImage) 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