Step 1: Add the GridView to your page, placing it inside an UpdatePanel.
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblTitle" runat="server" Text="User List" BackColor="lightblue" Width="95%" />
<asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="false" Width="95%">
<AlternatingRowStyle BackColor="aliceBlue" />
<HeaderStyle HorizontalAlign="Left" />
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="Address" HeaderText="Address" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Nothing out of the ordinary here, just a basic GridView contained in an UpdatePanel (don't forget to set UpdateMode to Conditional)
Step 2: Add a TemplateField with a Delete button. Wire up an event handler for the button click.
<asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Button ID="btnDelete" runat="server" OnClientClick="showConfirm(this); return false;"
OnClick="BtnDelete_Click" Text="Delete" />
</ItemTemplate>
</asp:TemplateField>
You can either explicitly use the OnClick event of the delete button or add the CommandName attribute and implement the RowDeleting event. I chose the former for this sample.
Step 3: Add the HTML markup for the modal popup.
<div id=”div” runat=”server” align=”center” class=”confirm” style=”display:none”>
<img align=”absmiddle” src=”Img/warning.jpg” />Are you sure you want to delete this item?
<asp:Button ID=”btnOk” runat=”server” Text=”Yes” Width=”50px” />
<asp:Button ID=”btnNo” runat=”server” Text=”No” Width=”50px” />
</div>
Step 4: Add the ModalPopupExtender to the page.
<ajaxToolKit:ModalPopupExtender
runat=”server” BehaviorID=”mdlPopup”
TargetControlID=”div” PopupControlID=”div”
OkControlID=”btnOk” CancelControlID=”btnNo” BackgroundCssClass=”modalBackground”
/>
Step 5: Add an OnClientClick for the delete button
<asp:TemplateField ControlStyle-Width=”50px” HeaderStyle-Width=”60px” ItemStyle-HorizontalAlign=”Center”>
<ItemTemplate>
<asp:Button
ID=”btnDelete” runat=”server” OnClientClick=”showConfirm(this); return false;”
OnClick=”BtnDelete_Click” Text=”Delete” />
</ItemTemplate>
</asp:TemplateField>
Step 6: Add the supporting javascript
<script type=”text/javascript”>
// keeps track of the delete button for the row
// that is going to be removed
var _source;
// keep track of the popup div
var _popup;
function showConfirm(source){
this._source = source;
this._popup = $find(’mdlPopup’);
// find the confirm ModalPopup and show it
this._popup.show();
}
function okClick(){
// find the confirm ModalPopup and hide it
this._popup.hide();
// use the cached button as the postback source
__doPostBack(this._source.name, ”);
}
function cancelClick(){
// find the confirm ModalPopup and hide it
this._popup.hide();
// clear the event source
this._source = null;
this._popup = null;
}
</script>
Here is the complete listing for this page.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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="head" runat="server">
<title>Delete Confirm Example</title>
<script runat="server">
public class User
{
private int _id;
private string _firstName;
private string _lastName;
private string _Address;
public User(int id, string firstname, string lastname, string address)
{
this._id = id;
this._firstName = firstname;
this._lastName = lastname;
this._Address = address;
}
public int ID
{
get { return this._id; }
}
public string FirstName
{
get { return this._firstName; }
}
public string LastName
{
get { return this._lastName; }
}
public string Address
{
get { return this._Address; }
}
}
private System.Collections.Generic.List<User> Users
{
get
{
System.Collections.Generic.List<User> item = this.Session["Users"] as System.Collections.Generic.List<User>;
if (item == null)
{
item = new System.Collections.Generic.List<User>();
item.Add(new User(1, "santosh", "kumar", "Chandigarh"));
item.Add(new User(2, "Vinod", "kumar", "HP"));
item.Add(new User(3, "Ajay", "Chawla", "PB"));
item.Add(new User(4, "MandeepInder", "Singh", "Chandigarh"));
this.Session["Users"] = item;
}
return item;
}
}
/// <summary>
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.gvUsers.DataSource = this.Users;
this.gvUsers.DataBind();
}
}
/// <summary>
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void BtnDelete_Click(object sender, EventArgs e)
{
// get the gridviewrow from the sender so we can get the datakey we need
Button btnDelete = sender as Button;
GridViewRow row = (GridViewRow)btnDelete.NamingContainer;
// find the item and remove it
User itemToRemove = this.Users[row.RowIndex];
this.Users.Remove(itemToRemove);
// rebind the datasource
this.gvUsers.DataSource = this.Users;
this.gvUsers.DataBind();
}
</script>
<script type="text/javascript">
// keeps track of the delete button for the row
// that is going to be removed
var _source;
// keep track of the popup div
var _popup;
function showConfirm(source){
this._source = source;
this._popup = $find('mdlPopup');
// find the confirm ModalPopup and show it
this._popup.show();
}
function okClick(){
// find the confirm ModalPopup and hide it
this._popup.hide();
// use the cached button as the postback source
__doPostBack(this._source.name, '');
}
function cancelClick(){
// find the confirm ModalPopup and hide it
this._popup.hide();
// clear the event source
this._source = null;
this._popup = null;
}
</script>
<style>
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.confirm{
background-color:White;
padding:10px;
width:370px;
}
</style>
</head>
<body>
<form id="form" runat="server" style="font-family: Trebuchet MS;">
<asp:ScriptManager ID="scriptManager" runat="server" />
<div>
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblTitle" runat="server" Text="User List" BackColor="lightblue" Width="95%" />
<asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="false" Width="95%">
<AlternatingRowStyle BackColor="aliceBlue" />
<HeaderStyle HorizontalAlign="Left" />
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="Address" HeaderText="Address" />
<asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Button ID="btnDelete" runat="server" OnClientClick="showConfirm(this); return false;"
OnClick="BtnDelete_Click" Text="Delete" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mdlPopup" runat="server"
TargetControlID="div" PopupControlID="div" OkControlID="btnOk" OnOkScript="okClick();"
CancelControlID="btnNo" OnCancelScript="cancelClick();" BackgroundCssClass="modalBackground" />
<div id="div" runat="server" align="center" class="confirm" style="display: none">
<img align="absmiddle" src="Img/warning.jpg" />Are you sure you want to delete this
item?
<asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />
<asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />
</div>
</div>
</form>
</body>
</html>