This article shows how to bind data in GridView controls using database and to bind controls with a database. I will also show you how to handle GridView common events in this. Here I’ve described events such as Edit Update and Delete event.
Also, it displays Image uploading and binding in GridView and then updating image in GridView.
Also read
Initial Chamber
Step 1: Open Visual Studio and create an empty website, then provide a suitable name GridViewImageUploading.
Step 2: In Solution Explorer you will get your empty website, then add some web forms.
GridViewImageUploading (your empty website). Right click and select Add New Item Web Form. Name it GridViewImageUploading.aspx.
For SQL Server database
Create a database in SQL server and named it SchoolDB (You can give your own name)
Database Chamber
Step 3: In SchoolDB create a table named Product.
Here's the query
USE [SchoolDB]
GO
/****** Object: Table [dbo].[Image_Details] Script Date: 07.09.2015 4:34:24 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Image_Details](
[ImageId] [int] IDENTITY(1,1) NOT NULL,
[ImageName] [varchar](50) NULL,
[Image] [nvarchar](max) NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
Table Product structure is here
Figure 1
After query execution
Figure 2
Design Chamber
Step 4: Open the GridViewImageUploading.aspx file and write some code for the design of the application.
Step 4.1: Put stylesheet code in head chamber of page.
Set your style of page according to your need of design.
Step 4.2: Choose control from toolbox and put on your design page as in the following code snippet:
<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>
Design of page looks like the following:
Figure 3
Here I've designed the GridView Control and used some property as in the following code snippet:
<%@ 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>
Your design looks like following figure:
Figure 4
Configure Chamber
Add the following code in Web.configure.
<connectionStrings>
<add name="DefaultConnection" connectionString="Data Source=.\SQLEXPRESS;Integrated Security=true;Initial Catalog=SchoolDB;" providerName="System.Data.SqlClient"/>
</connectionStrings>
Code Chamber
Step 5: In the code chamber we will write the code so that our application works.
Adding the following namespaces on namespace section of your 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.ConFigureuration;
Now your page looks like the following:
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 (ImageName,Image) 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();
}
/// <summary>
/// This function is used to delete image from folder when deleting in gridview.
/// </summary>
/// <param name="imagename">image name</param>
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;
}
}
}
Output
When no data is uploaded.
Figure 5
On first image upload-
Figure 6
One more image uploaded-
Figure 7
Two more images uploaded-
Figure 8
On deleting an image-
Figure 9
On Edit button click-
Figure 10
On Image Pupation-
Figure 11
Hope you liked this. Have a good day. Thank you for reading.
idrissa camaraPosted Oct 14, 2019, 1:42 PM
Thank you for your article
Rohan RaoPosted Sep 3, 2019, 11:38 PM
What if I want to upload more than one images, by updating it without removing the previously uploaded file. So that it just gets appended to the existing file?? How can I do that?
Rajneesh ChaubeyPosted Mar 11, 2018, 5:38 AM
Nice Article. Nicely Explained.
Pradeep SahooPosted May 16, 2016, 11:34 PM
Good share ...
Md MuradPosted Mar 28, 2016, 3:56 PM
Incorrect syntax near '='.Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. Exception Details: System.Data.SqlClient.SqlException: Incorrect syntax near '='. Source Error: Line 84: con.Open(); Line 85: SqlCommand cmd = new SqlCommand("update Image_Details set ImageName='" + name.Text + "',image='" + path + "' where ImageId=" + imageId + "", con); Line 86: cmd.ExecuteNonQuery(); Line 87: con.Close(); Line 88:
Asfend YarPosted Feb 27, 2016, 3:55 AM
Nice Share
Harshad PansuriyaPosted Sep 11, 2015, 2:29 AM
Nice Share
Sibeesh VenuPosted Sep 10, 2015, 8:07 AM
Nice Share
Jacob RobinsonPosted Sep 10, 2015, 6:24 AM
Nice One..
Raja TPosted Sep 10, 2015, 5:09 AM
Very nice...thanks for sharing..
Prem Anandh JPosted Sep 9, 2015, 6:58 AM
good work...
Ankit BansalPosted Sep 9, 2015, 4:34 AM
thanks for sharing..
Pushpa HariramPosted Sep 9, 2015, 1:37 AM
nice sir,, thanks for sharing..
Pankaj Kumar ChoudharyPosted Sep 8, 2015, 8:02 PM
Again a nice Article Sir.........
Shridhar SharmaPosted Sep 8, 2015, 4:13 PM
Nice Share sir.
Santhakumar MunuswamyPosted Sep 8, 2015, 3:19 PM
Good work
Mohammed IbrahimPosted Sep 8, 2015, 3:10 PM
nice share
RakeshPosted Sep 8, 2015, 12:41 PM
Good work
Baimey RajeshPosted Sep 8, 2015, 2:31 AM
Good Job... Upendra... Keep going this good work :)
Rajeesh MenothPosted Sep 8, 2015, 12:43 AM
Good Explanation Upendra Pratap Shahi..
Karthikeyan KPosted Sep 8, 2015, 12:39 AM
Excellent sir...Thanks for sharing