<%@ Page Language="C#" %>
<!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">
/// <summary>
///
/// </summary>
public class ToDo
{
private int _id;
private string _item;
private bool _isCompleted;
public ToDo(int id, string item, bool isCompleted)
{
this._id = id;
this._item = item;
this._isCompleted = isCompleted;
}
public int ID
{
get { return this._id; }
}
public string Item
{
get { return this._item; }
}
public bool IsCompleted
{
get { return this._isCompleted; }
}
}
/// <summary>
///
/// </summary>
private System.Collections.Generic.List<ToDo> ToDoList
{
get
{
System.Collections.Generic.List<ToDo> item = this.Session["ToDoList"] as System.Collections.Generic.List<ToDo>;
if (item == null)
{
item = new System.Collections.Generic.List<ToDo>();
item.Add(new ToDo(1, "Go to the store", false));
item.Add(new ToDo(2, "Go to work", true));
item.Add(new ToDo(3, "Feed the dog", false));
item.Add(new ToDo(4, "Take a nap", true));
item.Add(new ToDo(5, "Eat some lunch", false));
this.Session["ToDoList"] = 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.gvToDoList.DataSource = this.ToDoList;
this.gvToDoList.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
ToDo itemToRemove = this.ToDoList[row.RowIndex];
this.ToDoList.Remove(itemToRemove);
// rebind the datasource
this.gvToDoList.DataSource = this.ToDoList;
this.gvToDoList.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>
<p style="background-color:AliceBlue; width:95%">
Example of using a ModalPopupExtender as a delete confirm button<br />
for the indivdual rows of a GridView. To test out the functionality,<br />
click the Delete button of any of the rows and watch what happens.<br />
</p>
<br />
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblTitle" runat="server" Text="ToDo List" BackColor="lightblue" Width="95%" />
<asp:GridView
ID="gvToDoList" runat="server" AutoGenerateColumns="false" Width="95%">
<AlternatingRowStyle BackColor="aliceBlue" />
<HeaderStyle HorizontalAlign="Left" />
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Item" HeaderText="Description" />
<asp:BoundField DataField="IsCompleted" HeaderText="Complete?" />
<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="warning.jpg" />Are you sure you want to delete this item?<br />
<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>
