Image Update in GridView Using Asp.Net C#

05:58:00  , , , ,  2 comments

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. Unknown12 October 2017 at 21:24

    "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
  2. rmouniak8 March 2018 at 02:44

    Learned a lot of new things from your post!Good creation ,It's amazing blog

    .Net Online Training
    Dot Net Online Training Bangalore
    .Net Online Course

    ReplyDelete