In this article, you will learn gridview control in asp.net and how to implement Gridview Crud Operations in ASP.NET web application. The following example will demonstrate you to add, edit/update, and delete row in gridview using the modal popup with a confirmation message box.
You can watch Gridview Crud Operations in ASP.NET working demo here:
- You may be interested in ASP.NET MVC full Ajaxify, and Bootstrap Grid with CRUD Operation
Gridview Control in ASP.NET
The GridView control is a very important control used to display tabular data from the database on a web page. It is a commonly used control in ASP.Net web applications. To use a GridView control a DataSource control has to be attached to the GridView control. The property DataSourceID of the GridView control binds the GridView control to the DataSource control and allows paging, sorting, and database operations with the DataSource.
Gridview CRUD Operations in ASP.NET
Let’s get started by creating the following table in the MS SQL Server database.
SQL Table
CREATE TABLE [Users]( [UserID] [int] IDENTITY(100,1) NOT NULL, [UserName] [varchar](50) NULL, [Address] [varchar](100) NULL, [City] [varchar](50) NULL, [State] [varchar](50) NULL, CONSTRAINT [PK_Users] PRIMARY KEY ([UserID]) )
Find the below code to perform CRUD operations; Select, Insert, Edit, Update, and Delete in ASP.Net web forms using C#. You need to add the AjaxControlToolkit.dll to use ModalPopupExtender.
UserEntity.cs
using System;
public class UserEntity
{
public Int32 UserId { get; set; }
public String UserName { get; set; }
public String Address { get; set; }
public String City { get; set; }
public String State { get; set; }
}<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>gridview insert update delete in asp.net example</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<h1>ASP.NET Gridview CRUD Operations Example </h1>
<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:UpdatePanel ID="upnlUsers" runat="server">
<ContentTemplate>
<asp:GridView ID="gvUsers" runat="server"
AutoGenerateColumns="false"
Width="100%"
CssClass="grid"
DataKeyNames="UserID"
EmptyDataText="No record found!"
EmptyDataRowStyle-CssClass="gvEmpty"
GridLines="none">
<Columns>
<asp:BoundField HeaderText="ID" DataField="UserID" />
<asp:BoundField HeaderText="User Name" DataField="UserName" />
<asp:BoundField HeaderText="Address" DataField="Address" />
<asp:BoundField HeaderText="City" DataField="City" />
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<asp:ImageButton ID="ibtnEdit" runat="server"
ImageUrl="/Images/btn-edit.png" OnClick="ibtnEdit_Click" />
<asp:ImageButton ID="ibtnDelete" runat="server"
ImageUrl="/Images/btn-delete.jpg"
OnClientClick="javascript:return confirm('Do you want to delete it?');"
OnClick="ibtnDelete_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataRowStyle CssClass="gvEmpty" />
</asp:GridView>
<div>
<asp:Button ID="btnAdd" runat="server" BackColor="#0489B1" Text="Add New User"
OnClick="btnAdd_Click" />
</div>
<div id="pnlAddPopup" runat="server" style="width: 500px; background-color: #ffffff;">
<div id="popupheader" class="popuHeader">
<asp:Label ID="lblHeader" runat="server" Text="Add New User" />
<span style="float: right">
<img id="imgClose" src="/Images/btn-close.png" alt="close" title="Close" />
</span>
</div>
<div>
<asp:HiddenField ID="hfUserID" runat="server" Value="0" />
<table border="0" class="table-border">
<tr>
<td>Full Name</td>
<td>
<asp:TextBox ID="txtUserName" runat="server" /></td>
</tr>
<tr>
<td>Address</td>
<td>
<asp:TextBox ID="txtAddress" runat="server" TextMode="MultiLine" Rows="3" Columns="40" /></td>
</tr>
<tr>
<td>City</td>
<td>
<asp:TextBox ID="txtCity" runat="server" /></td>
</tr>
<tr>
<td>State</td>
<td>
<asp:TextBox ID="txtState" runat="server" /></td>
</tr>
<tr>
<td> </td>
<td>
<asp:Button ID="btnSave" runat="server" BackColor="#0489B1" Text=" Save "
OnClick="btnSave_Click" />
<asp:Button ID="btnCancel" runat="server" BackColor="#0489B1" Text=" Cancel "
OnClientClick="javascript:$find('mpeUserBehavior').hide();return false;" />
</td>
</tr>
</table>
</div>
<ajax:ModalPopupExtender ID="mpeUser" runat="server"
TargetControlID="hfUserID"
PopupControlID="pnlAddPopup"
BehaviorID="mpeUserBehavior"
DropShadow="true"
CancelControlID="imgClose"
PopupDragHandleControlID="popupheader" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>Conclusion
I hope you liked this article gridview crud operations in asp.net. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
Leave a Reply