How to show uploaded images in Grid view ?


In this article I have explained about how to show uploaded images in grid view control and also I have explained about how to use file upload control in this grid view row editing. For example if user uploaded image into the database but image not uploaded successfully then he uploaded again with help of this grid view operation easily.

How to add new record in to the grid view?
Starting we have add new record into the database like this way convert images into bytes and insert into the database.


if (FileUpload1.HasFile)
{
sname = TextBox1.Text;
filebyte = convertByte(FileUpload1);
sqlcon.Open();
query = "insert into stud(sname,simage) values(@sname,@simage)";
SqlCommand cmd = new SqlCommand(query, sqlcon);
cmd.Parameters.Add("@sname", SqlDbType.VarChar).Value = sname;
cmd.Parameters.Add("@simage", SqlDbType.Image).Value = filebyte;
cmd.CommandType = CommandType.Text;
cmd.ExecuteNonQuery();
sqlcon.Close();
TextBox1.Text = "";
LoadGrid();
}

//Convert Byte method
public byte[] convertByte(FileUpload FileControl)
{
Stream fs = default(Stream);
byte[] bytes1 = null;
byte[] postfile = null;
fs = FileControl.PostedFile.InputStream;
BinaryReader br1 = new BinaryReader(fs);
bytes1 = br1.ReadBytes(FileControl.PostedFile.ContentLength);
postfile = bytes1;
return postfile;
}


How to show images in grid view
Client side grid view I have template field with Image control that image control Image url, i have pass the student id field in to other web page for getting student image and write in grid view. If you want use handler then use "Handler2.ashx" available in the sorce code.


How to get edit item template file upload control value during edit ?
You can use below code for getting value of edit item template file upload control.


protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
GridViewRow row = GridView1.Rows[e.RowIndex];
string sid;
sid = GridView1.DataKeys[e.RowIndex].Value.ToString();
TextBox sname = (TextBox)row.FindControl("txtsname");
FileUpload simage = (FileUpload)row.FindControl("FileUpload2");
sqlcon.Open();
query = "update stud set sname=@sname,simage=@simage where sid=@sid";
SqlCommand cmd = new SqlCommand(query, sqlcon);
cmd.Parameters.Add("@sname", SqlDbType.VarChar).Value = sname.Text;
cmd.Parameters.Add("@simage", SqlDbType.Image).Value = convertByte(simage);
cmd.Parameters.Add("@sid", SqlDbType.Int).Value = Convert.ToInt32(sid);
cmd.CommandType = CommandType.Text;
cmd.ExecuteNonQuery();
sqlcon.Close();
GridView1.EditIndex = -1;
LoadGrid();
}

Source Code Detail:
Here with I have attached source code for display images in grid view and also edit that images using file upload control in grid view. Down load it and try to upload images in database and handle that images using grid view control.
Front End : ASP.NET
Code Behind : C#

Output
Output

Conclusion:
I hope this article is help to show images in Grid View control.


Attachments

  • ShowImage_Gridview (42953-12050-GridVw_ImgDisplay.rar)
  • Comments

    No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: