Image Update in GridView Using Asp.Net C#

Image Update in GridView 


Gridview Display Image  if you want  to  Change Image Update Run Time.


Multiple Image Upload
Image Update in Gridview   
Show Image Preview
Restrict Upload File Size
Image Insert Bind  GridView
Without Database Upload Image Show

                          
                                 DEMO

HTML CODING
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <br />
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating">
            <Columns>
                <asp:CommandField ShowEditButton="True" />
                <asp:TemplateField HeaderText="ImageName">
                    <EditItemTemplate>
                        <asp:Label ID="labelImageName" runat="server" Text='<%# Bind("imagename") %>'></asp:Label>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("imagename") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Image">
                    <EditItemTemplate>
                        <asp:Image ID="UpdateImage" runat="server" Height="100px" ImageUrl='<%# Eval("imagepath") %>' Width="100px" />
                        <br />
                        <asp:FileUpload ID="FileUpload1" runat="server" />
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Image ID="Image1" runat="server" Height="100px" ImageUrl='<%# Eval("imagepath") %>' Width="100px" />
                        <br />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>

</html>

C# CODING



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;


public partial class ImageUpdateGridView : System.Web.UI.Page
{

    SqlConnection con;
    SqlCommand cmd;
    SqlDataAdapter adp;
    SqlDataReader rd;
    DataSet ds;
    string query;


    public void dbcon()
    {
        string connn = (System.Configuration.ConfigurationManager.ConnectionStrings["dbcon"].ToString());
        con = new SqlConnection(connn);
        con.Open();

    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            bind1();
        }

    }
    protected void bind1()
    {

        dbcon();
        query = "select * from img";
        cmd = new SqlCommand(query, con);
        adp = new SqlDataAdapter(cmd);
        ds = new DataSet();
        adp.Fill(ds);
        rd = cmd.ExecuteReader();
        if (ds.Tables[0].Rows.Count > 0)
        {
            GridView1.DataSource = ds;
            GridView1.DataBind();
        }
        else
        {
            ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());
            GridView1.DataSource = ds;
            GridView1.DataBind();
            int columncount = GridView1.Rows[0].Cells.Count;
            GridView1.Rows[0].Cells.Clear();
            // GridView1.FooterRow.Cells.Clear();
            GridView1.Rows[0].Cells.Add(new TableCell());
            GridView1.Rows[0].Cells[0].ColumnSpan = columncount;
            GridView1.Rows[0].Cells[0].Text = "No Records Found";
        }

    }


protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {

        string name;

        Label labName = (Label)GridView1.Rows[e.RowIndex].FindControl("labelImageName");

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

        dbcon();

        if (UploadImage.HasFile)
        {
            name =
           Path.GetFileName(UploadImage.PostedFile.FileName);

            UploadImage.SaveAs(Server.MapPath("files/" + name));

            query = "update img set imagepath='" + "files/" + name + "' where imagename ='" + labName.Text + "'";
            cmd = new SqlCommand(query, con);
            cmd.ExecuteNonQuery();
            Response.Write("<script>alert('Image Updated')</script>");

            GridView1.EditIndex = -1;
            bind1();

        }
        else
        {
            string path11 = "~/files/imagename/";

            Image displayimage = (Image)GridView1.Rows[e.RowIndex].FindControl("UpdateImage");

            path11 = displayimage.ImageUrl;

            query = "update img set imagepath='" + path11 + "' where imagename ='" + labName.Text + "'";

            cmd = new SqlCommand(query, con);
            cmd.ExecuteNonQuery();
            Response.Write("<script>alert('Image Not Updated')</script>");

            GridView1.EditIndex = -1;
            bind1();

        }

    }

    protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
    {
        GridView1.EditIndex = e.NewEditIndex;
        bind1();

    }

    protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
    {
        GridView1.EditIndex = -1;
        bind1();
    }

}




First - Create New WebForm - Add DataBase - Create Table & Fields - ImageName&ImagePath 
Folder Create - Solution Explorer for Image Path.









Next - Add GridView  From ToolBox









Next - Right Click - GridView - Select EditColumn









Add - the TemplateField -  Change The Header Name 









Add - the TemplateField -  Change The Header Name 
 -OK.








Show Only Header Name - Next - Bind Data










Next - Right Click - GridView - Select - Edit Templates









Select - ImageName Column - Add Label - Right Click - Edit DataBinding - Add the Table Field Name - OK









 Add Label - Right Click - Edit DataBinding - Add the Table Field Name - OK










Select - Image - Column - Add Image Control - Right Click - Edit DataBinding - Add the Table Field Name - OK.










Select - Image - Column - Add Image Control - Right Click - Edit DataBinding - Add the Table Field Name - OK.









Next - Add the FileUpload  Tool  










Next - Right Click GridView - End Template Editing












GridView Edit Column - Add the  Command Field for  Edit







Bata Bound GridView 









Next - Add the  Name Spaces & DataBase Connections








Select DataBase Values   Page_Load 









Next - GridView  - Events -  Double Click - RowUpdating









Row Canceling  & RowEditing  Event for GridView 









GridView Update Event -  Call the GridView  Label & Image & TextBox  Id 

Write Coding For  Update Command









Next - Run(R5)  the WebForm


OUTPUT










2 comments:

  1. "Nice and good article.. it is very useful for me to learn and understand easily.. thanks for sharing your valuable information and time.. please keep updating.php jobs in hyderabad.
    "

    ReplyDelete