<!DOCTYPE HTML>
<html>
<head>
<title>Insert, update and delete in asp.net gridview step by step :: Advance Sharp</title>
<link rel="canonical" href="http://www.advancesharp.com/blog/1101/insert-update-and-delete-in-asp-net-gridview-step-by-step" />
<meta name="keywords" content="asp.net, gridview, insert, update, delete" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/resources/min.css?v=20130811" rel="stylesheet" type="text/css" />
</head>
<body lang="en-US">
<div id="loginbar">
<div class="loginbararea">
<div style="display:inline-block;margin:5px;float:left;">
<form action="/blog/articles" method="post">
Search: <input type="text" id="search" name='search' class="txtsearch" />
</form>
</div>
<div class='loginarea'><span>Welcome <strong>Guest</strong></span> | <a href='/account/register'>Register</a> | <a href='/account/logon?ReturnURL=/blog/1101/insert-update-and-delete-in-asp-net-gridview-step-by-step'>Login</a></div>
</div>
</div>
<div class="header">
<div class="headerContent">
<div id="topmost">
<div class="asharp"><a href="http://www.advancesharp.com"><img src="/Images/aslogo.png" alt="logo" /></a></div>
</div>
<div id="menu_wrapper" class="orange">
<ul id="menu">
<li><a href="/">Home</a></li>
<li class="active"><a href="/blog/articles">Blog</a></li>
<li><a href="/questions" >Questions</a></li>
<li><a id="mnuUsers" class="center" href="/users">Users</a></li>
<li><a href="/questions/ask">Ask Question</a></li>
<li>
</li>
</ul>
</div>
</div>
</div>
<div id="page" style="clear:both;">
<div id="main">
<div id="blogcontent">
<h1 class="questionHeading" style="margin:5px 0; padding:3px 0;">
<a href="/blog/1101/insert-update-and-delete-in-asp-net-gridview-step-by-step">Insert, update and delete in asp.net gridview step by step</a>
</h1>
<div>
<div style="border-bottom:1px solid #efefef;margin-top:-7px">
<p>We will do insert, update and delete functionality in a GridView with modal popup, we will proceed step by step to learn how easily we can complete this functionality in any project. We will try to create a basic user page where you can see all the users
in a grid with paging and buttons to add new user, update an existing user and delete any existing user with confirmation box. We will always open modal popup from code behind so we can execute all the necessary methods.</p>
<p>First of all we will create a table Users</p>
<pre><code class="x_default x_prettyprint">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])
)
</code></pre>
<p>Now we will create UserEntity class to pass data from here to there (it should be in a separate layer but we will use in the same application)</p>
<pre><code class="x_default x_prettyprint">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; }
}
</code></pre>
<p>We will user ajax script manager and update panel to stop page post back on every event, so add them on the page:
</p>
<pre><code class="x_default x_prettyprint"><asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:UpdatePanel ID="upnlUsers" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
</code></pre>
<p><img src="http://www.advancesharp.com/blogimages/1101-Insert-update-delete-aspdotnet.png" alt="alt text"></p>
<p>All the code we will put inside the content template.</p>
<p>Here is the complete page HTML:</p>
<pre><code class="x_default x_prettyprint"><!—Add button to add new user -->
<div>
<asp:Button ID="btnAdd" runat="server" Text="Add New Role"
OnClick="btnAdd_Click" />
</div>
<!— GridView code HTML to show users -->
<asp:GridView ID="gvUsers" runat="server"
AutoGenerateColumns="false"
Width="100%"
CssClass="grid"
GridLines="none"
DataKeyNames="UserID"
EmptyDataText = "No record found!"
EmptyDataRowStyle-CssClass ="gvEmpty">
<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>
</asp:GridView>
<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>User 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>&nbsp;</td>
<td>
<asp:Button ID="btnSave" runat="server" Text=" Save "
OnClick="btnSave_Click" />
&nbsp;&nbsp;&nbsp;
<asp:Button ID="btnCancel" runat="server" Text=" Cancel "
OnClientClick=&
gridview代码.rar （2个子文件） 
gridview.htm 30KB
gridview.rar 1.51MB资源评论
michelle72792014-12-03没法用……有使用说明吗？
koine2018-11-25无法直接运行，需自己设置数据库
水风青木2014-07-25无法直接运行，代码可供参考
bzkerchina2018-10-19大概看了一下，和楼主所描述相差太远，1、根本没有私用到Jquery，Ajax没有这两个一样可以执行，相当于Asp.net的页面方法，lord，click等方法，Jquery是需要调用静态方法的好嘛，学好了再来发布资源，此资源差评
