In this article, we will learn how to add details of an employee with an image and display it in a GridView. Here an image will be stored in the application folder. We can also edit, update, delete, and cancel the details of the employee in the GridView.
Table Creation
![Table Creation]()
Stored procedure
CREATE PROCEDURE insert_employee
(
@name varchar(50),
@address varchar(50),
@image varchar(50)
)
AS
Insert into employee values(@name, @address, @image)
CREATE PROCEDURE update_employee
(
@id int,
@name varchar(50),
@address varchar(50)
)
AS
Update employee set name = @name, address = @address where id = @id
CREATE PROCEDURE delete_employee
(@id int)
AS
Delete from employee where id = @id
Default. aspx Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Add_update_delete_gridview._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
Name
</td>
<td>
<asp:textbox id="txt_name" runat="server">
</asp:textbox>
<asp:requiredfieldvalidator id="RequiredFieldValidator1" runat="server" controltovalidate="txt_name"
errormessage="Please enter the name">
</asp:requiredfieldvalidator>
</td>
</tr>
<tr>
<td>
Address
</td>
<td>
<asp:textbox id="txt_address" runat="server">
</asp:textbox>
<asp:requiredfieldvalidator id="RequiredFieldValidator2" runat="server" controltovalidate="txt_address"
errormessage="Please enter the address">
</asp:requiredfieldvalidator>
</td>
</tr>
<tr>
<td>
Image
</td>
<td>
<asp:fileupload id="FileUpload1" runat="server" />
<asp:requiredfieldvalidator id="RequiredFieldValidator3" runat="server" controltovalidate="FileUpload1"
errormessage="Please browse the image">
</asp:requiredfieldvalidator>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:button id="btn_insert" runat="server" onclick="btn_insert_Click" text="Insert" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:gridview id="GridView1" runat="server" autogeneratecolumns="False" onrowcancelingedit="GridView1_RowCancelingEdit"
onrowdeleting="GridView1_RowDeleting" onrowediting="GridView1_RowEditing" onrowupdating="GridView1_RowUpdating"
onselectedindexchanging="GridView1_SelectedIndexChanging" backcolor="#CC3300"
forecolor="Black">
<columns>
<asp:TemplateField HeaderText="Name">
<EditItemTemplate>
<asp:TextBox ID="txt_name" runat="server"
Text='<%# Eval("name") %>'></asp:TextBox>
<asp:Label ID="Label4" runat="server" Text='<%# Eval("id") %>' Visible="False"></asp:Label>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("name") %>'></asp:Label>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("id") %>' Visible="False"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<EditItemTemplate>
<asp:TextBox ID="txt_address" runat="server" Text='<%# Eval("address") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Eval("address") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<img alt="" src ='images/<%#Eval("image") %>' height="50px" width="50px"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit">
<EditItemTemplate>
<asp:LinkButton ID="LinkButton3" runat="server" CausesValidation="False"
CommandName="Update">Update</asp:LinkButton>
<asp:LinkButton ID="LinkButton4" runat="server" CausesValidation="False"
CommandName="Cancel">Cancel</asp:LinkButton>
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False"
CommandName="Edit">Edit</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
CommandName="Delete"
onclientclick="return confirm('Are you sure you want to delete this record')">Delete</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</columns>
<headerstyle backcolor="#FF9933" />
<alternatingrowstyle backcolor="#FFCC00" />
</asp:gridview>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Default. aspx.cs Code
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.IO;
namespace Add_update_delete_gridview {
public partial class _Default : System.Web.UI.Page {
string strConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
string s1;
string path;
SqlConnection cnn = new SqlConnection();
SqlCommand com = new SqlCommand();
SqlDataAdapter sqlda;
DataTable dt;
int id;
string name;
string address;
string image;
protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
bindgrid();
}
}
protected void btn_insert_Click(object sender, EventArgs e) {
if (FileUpload1.PostedFile.ContentLength > 0) {
s1 = Path.GetFileName(FileUpload1.FileName);
path = Server.MapPath("images") + "/" + s1;
FileUpload1.SaveAs(path);
}
SqlConnection con = new SqlConnection(strConnString);
con.Open();
SqlCommand com = new SqlCommand("insert_employee", con);
com.CommandType = CommandType.StoredProcedure;
com.Connection = con;
com.Parameters.AddWithValue("@name", txt_name.Text);
com.Parameters.AddWithValue("@address", txt_address.Text);
com.Parameters.AddWithValue("@image", s1);
com.ExecuteNonQuery();
com.Dispose();
bindgrid();
con.Close();
clear();
}
private void clear() {
txt_name.Text = "";
txt_address.Text = "";
}
private void bindgrid() {
SqlConnection con = new SqlConnection(strConnString);
con.Open();
sqlda = new SqlDataAdapter("SELECT * FROM employee ", con);
dt = new DataTable();
sqlda.Fill(dt);
sqlda.Dispose();
GridView1.DataSource = dt;
GridView1.DataBind();
con.Close();
}
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e) {
SqlConnection con = new SqlConnection(strConnString);
con.Open();
try {
id = Convert.ToInt32(((Label)(GridView1.Rows[e.RowIndex].FindControl("label2"))).Text);
SqlCommand com = new SqlCommand("delete_employee", con);
com.CommandType = CommandType.StoredProcedure;
com.Connection = con;
com.Parameters.Add("@id", SqlDbType.Int).Value = id;
SqlDataAdapter sqlda = new SqlDataAdapter("select * from employee where id=@id", con);
sqlda.SelectCommand.Parameters.Add("@id", SqlDbType.Int).Value = id;
DataSet ds = new DataSet();
sqlda.Fill(ds);
try {
image = Convert.ToString(ds.Tables[0].Rows[0]["image"]);
File.Delete(Server.MapPath("images") + "\\" + image);
} catch (Exception) {}
com.ExecuteNonQuery();
com.Dispose();
bindgrid();
} catch (Exception) {}
}
protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e) {
GridView1.EditIndex = -1;
bindgrid();
}
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e) {
GridView1.EditIndex = e.NewEditIndex;
bindgrid();
}
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e) {
SqlConnection con = new SqlConnection(strConnString);
con.Open();
id = Convert.ToInt32(((Label)(GridView1.Rows[e.RowIndex].FindControl("label4"))).Text);
name = (((TextBox)(GridView1.Rows[e.RowIndex].FindControl("txt_name"))).Text);
address = (((TextBox)(GridView1.Rows[e.RowIndex].FindControl("txt_address"))).Text);
SqlCommand com = new SqlCommand("update_employee", con);
com.CommandType = CommandType.StoredProcedure;
com.Connection = con;
com.Parameters.Add("@id", SqlDbType.Int).Value = id;
com.Parameters.Add("@name", SqlDbType.VarChar, 50).Value = name;
com.Parameters.Add("@address", SqlDbType.VarChar, 50).Value = address;
com.ExecuteNonQuery();
com.Dispose();
con.Close();
GridView1.EditIndex = -1;
bindgrid();
}
protected void GridView1_SelectedIndexChanging(object sender, GridViewSelectEventArgs e) {
GridView1.PageIndex = e.NewSelectedIndex;
bindgrid();
}
}
}
Output
Here we will see the output which is given below.
![Output]()