How do I update a binary image in gridview .the problem is explained in details below

Question

0.00/5 (No votes)

See more:

hello friends,

As a beginner in C# ,i am trying different possibilities of grid-view and i am stuck with situation.can anybody help to solve this?

i have stored a binary image in database and retrieved to the grid-view,so far so good,
when i have tried to update the content in the grid-view:
in my grid-view there are five fields (productid,productname,price,productpic,description)

For text: TextBox productname =(TextBox)GridView1.Rows[e.RowIndex].Cells[1].Controls[0];

when it comes to image field that is productpic i have stuck,i don't know which code works for update a binary coded image

can anybody help me to find solution?

What I have tried:

string images = "data:Image/png;base64," + Convert.ToBase64String((byte[])Eval("productpic"));

Image images = GridView1.Rows[e.RowIndex].Cells[3].Controls[0];

Posted 17-Nov-18 18:11pm

Member 11993108

Updated 18-Nov-18 9:11am

Add a Solution

Comments

Vincent Maverick Durano 18-Nov-18 12:58pm

Show us your GridView HTML markup. I want to see how it's being declared.

Member 11993108 20-Nov-18 18:09pm

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Horizontal" DataKeyNames="productid" OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating">
<columns>
<asp:BoundField DataField="productname" HeaderText="Product Name" />
<asp:BoundField DataField="price" HeaderText="Price" />
<asp:TemplateField HeaderText="product">
<itemtemplate>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "data:Image/png;base64," + Convert.ToBase64String((byte[])Eval("productpic")) %>' Width="200px" />

<asp:BoundField DataField="description" HeaderText="Description" />
<asp:CommandField ShowEditButton="True" />
<asp:CommandField ShowDeleteButton="True" />

Laxmidhar tatwa technologies 19-Nov-18 0:17am

Vincent is currect .Please show the html with saving code

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Vincent Maverick Durano · Answer 1 · 2018-11-18T09:11:00

You need to to have a FileUpload control within EditItemTemplate so you can browse new image.You can then update the image from your database just like updating normal data in your database. The idea is to get the existing ID of the row that holds your image and then update it with the new image (either update the path or the image itself ~ that depends on how you store the images).

For example your GridView would have something like this:

ASP.NET

<asp:TemplateField HeaderText="Image">
          <ItemTemplate>
                   <asp:Image  runat="server" ID="Image1" />
          </ItemTemplate>
          <EditItemTemplate>
                    <asp:FileUpload ID="FileUpload1" runat="server" />
          </EditItemTemplate>
</asp:TemplateField>

Since you were storing the image as Binary file to display them, then you don't have to access the Image itself to update it. Instead, you just need to update the data from database and rebind your GridView to reflect the changes. Here's an example that I wrote many years ago: FAQ: Displaying Image from Database to GridView Control[^]

Here's a quick example:

C#

private void Update(int ID, string name, decimal price, string description,byte[] image){
	using (SqlConnection connection = new SqlConnection("YOUR CONNECTION STRING HERE")) {
            string sql = "UPDATE YourTableName SET Name = @Name, Price = @Price, Description = @Description, Image = @Image WHERE ID = @ID";
            using (SqlCommand cmd = new SqlCommand(sql, connection)) {
			    cmd.Parameters.AddWithValue("@ID", ID);
	            cmd.Parameters.AddWithValue("@Name", name);
			    cmd.Parameters.AddWithValue("@Price", price);
			    cmd.Parameters.AddWithValue("@Description", description);
			    cmd.Parameters.AddWithValue("@Image", image);
			    cmd.ExecuteNonQuery();
            }
 	}
}

protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
	// turn to edit mode
        GridView1.EditIndex = e.NewEditIndex; 

	// Call the method for re-binding GridView to reflect changes made
        BindGridView(); 
}

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
        //Accessing Edited values from the GridView

        string id = GridView1.Rows[e.RowIndex].Cells[0].Text; //ID
        string name = ((TextBox)GridView1.Rows[e.RowIndex].Cells[1].Controls[0]).Text; //productname
        string price = ((TextBox)GridView1.Rows[e.RowIndex].Cells[2].Controls[0]).Text; //price
        FileUpload fileUpload = (FileUpload)GridView1.Rows[e.RowIndex].Cells[3].FindControl("FileUpload1"); //FileUpload control
        string description = ((TextBox)GridView1.Rows[e.RowIndex].Cells[4].Controls[0]).Text; //description

	//get newly uploaded image stream
	byte[] theImage = new byte[fileUpload.PostedFile.ContentLength];
        HttpPostedFile Image = fileUpload.PostedFile;
        Image.InputStream.Read(theImage, 0, (int)fileUpload.PostedFile.ContentLength);
        int length = theImage.Length; //get the length of the image
        string fileName = fileUpload.FileName.ToString(); //get the file name of the posted image
        string type = fileUpload.PostedFile.ContentType; //get the type of the posted image
        int size = fileUpload.PostedFile.ContentLength; //get the size in bytes that
        if (fileUpload.PostedFile != null && fileUpload.PostedFile.FileName != "")
        {
		// call update method
        	Update(id,name,price,description,theImage); 
        }

	//revert the state to read-only
        GridView1.EditIndex = -1;

	// Call the method for re-binding GridView to reflect changes made
        BindGridView(); 
}