Boot Strap Confirm Box In ASP.NET Web forms (Confirm Delete)

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. In this example, I will show how to use Bootstrap Confirm modal in ASP.NET. This is the most common Scenario where we want to confirm before we delete any record. Here, I will demonstrate how call confirm modal from within Gridview link and if user confirms then only record will be deleted.

For the sake of simplicity, I have used a class with some data. You can also use database to populate Gridview.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace BootStrapConfirm
{
[Serializable()]
public class Details
{
public int Id { get; set; }
public string Name { get; set; }
public string City { get; set; }
public List<Details> GetDetails()
{
List<Details> Persons = new List<Details>();
Persons.Add(new Details { Id=1,Name= "Rajeev", City="Bangalore" });
Persons.Add(new Details { Id = 2, Name = "Raj Kumar", City = "Chennai" });
Persons.Add(new Details { Id = 3, Name = "Raj", City = "Mumbai" });
Persons.Add(new Details { Id = 4, Name = "Shiva", City = "Pune" });
Persons.Add(new Details { Id = 5, Name = "Lalit", City = "Ahmedabad" });
return Persons;
}
}
}

Now we will create a webform ConfirmDemo.aspx.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ConfirmDemo.aspx.cs" Inherits="BootStrapConfirm.ConfirmDemo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Confirm Demo</title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-dialog.min.js"></script>
<link href="css/bootstrap-dialog.min.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<style>
.row1 {
padding: 4px 30px 4px 6px;
border-bottom: 1px solid #b3b3b3;
}
.header {
background: #646464;
color: #d1d1d1;
text-align: center;
font-weight: bold;
padding: 4px 30px 4px 6px;
border-bottom: 1px solid #b3b3b3;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h2>
Confirm Demo Using Bootstrap Dialog
</h2>
<div class="container">
<asp:GridView ID="grdDemo" runat="server" AutoGenerateColumns="false" RowStyle-CssClass="row1" HeaderStyle-CssClass="header" OnRowCommand="grdDemo_RowCommand" OnRowDeleting="grdDemo_RowDeleting">
<Columns>
<asp:TemplateField HeaderText="Id">
<ItemTemplate>
<asp:Label ID="lblId" runat="server" Text='<%#Eval("Id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%#Eval("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="City">
<ItemTemplate>
<asp:Label ID="lblCity" runat="server" Text='<%#Eval("City") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<asp:LinkButton ID="lnkDelete" runat="server"
CssClass=""
OnClientClick='<%# string.Concat("if(!popup(this.id",",",Eval("ID"),",\"",Eval("Name"),"\"))return false; ") %>'
Text="Delete" CommandArgument='<%# Eval("Id") %>' CommandName="Delete" ></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<script>
function popup(lnk, id, Name) {
BootstrapDialog.confirm({
title: 'WARNING',
message: 'Do You Want To Delete <b>'+Name+'</b>',
type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
closable: true, // <-- Default value is false
draggable: true, // <-- Default value is false
btnCancelLabel: 'Cancel', // <-- Default value is 'Cancel',
btnOKLabel: 'Ok', // <-- Default value is 'OK',
btnOKClass: 'btn-warning', // <-- If you didn't specify it, dialog type will be used,
callback: function (result) {
// result will be true if button was click, while it will be false if users close the dialog directly.
if (result) {
javascript: __doPostBack('grdDemo$ctl02$lnkDelete', '');
} else {
BootstrapDialog.closeAll();
}
}
});
}
</script>
</form>
</body>
</html>

Here is the code behind for the same.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace BootStrapConfirm
{
public partial class ConfirmDemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
gridbind();
}
protected void grdDemo_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Delete")
{
LinkButton lnkView = (LinkButton)e.CommandSource;
string dealId = lnkView.CommandArgument;
List<Details> data = (List<Details>)ViewState["Data"];
data.RemoveAll(d => d.Id == Convert.ToInt32(dealId));
ViewState["Data"] = data;
gridbind();
System.Web.UI.ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "AlertBox", "BootstrapDialog.alert('Record Deleted Successfully.');", true);
//data.
}
}
protected void gridbind()
{
if (ViewState["Data"] != null)
{
}
else
{
Details d = new Details();
ViewState["Data"] = d.GetDetails();
}
grdDemo.DataSource = (List<Details>)ViewState["Data"];
grdDemo.DataBind();
}
protected void grdDemo_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
}
}
}