Post
Ask Question

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.

  1. using System;    
  2. using System.Collections.Generic;    
  3. using System.Linq;    
  4. using System.Web;    
  5.     
  6. namespace BootStrapConfirm    
  7. {    
  8.     [Serializable()]    
  9.     public class Details    
  10.     {    
  11.     
  12.         public int Id { get; set; }    
  13.         public string Name { get; set; }    
  14.         public string  City { get; set; }    
  15.             
  16.         public List<Details> GetDetails()    
  17.         {    
  18.                
  19.             List<Details> Persons = new List<Details>();    
  20.             Persons.Add(new Details { Id=1,Name= "Rajeev", City="Bangalore" });    
  21.             Persons.Add(new Details { Id = 2, Name = "Raj Kumar", City = "Chennai" });    
  22.             Persons.Add(new Details { Id = 3, Name = "Raj", City = "Mumbai" });    
  23.             Persons.Add(new Details { Id = 4, Name = "Shiva", City = "Pune" });    
  24.             Persons.Add(new Details { Id = 5, Name = "Lalit", City = "Ahmedabad" });    
  25.             return Persons;    
  26.     
  27.         }    
  28.                   
  29.     }    
  30.     
  31. }    
Now we will create a webform ConfirmDemo.aspx.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ConfirmDemo.aspx.cs" Inherits="BootStrapConfirm.ConfirmDemo" %>    
  2.     
  3. <!DOCTYPE html>    
  4.     
  5. <html xmlns="http://www.w3.org/1999/xhtml">    
  6. <head runat="server">    
  7.     <title>Confirm Demo</title>    
  8.     <script src="js/jquery-1.10.2.min.js"></script>    
  9.     <script src="js/bootstrap.min.js"></script>    
  10.     <script src="js/bootstrap-dialog.min.js"></script>    
  11.     <link href="css/bootstrap-dialog.min.css" rel="stylesheet" />    
  12.     <link href="css/bootstrap.min.css" rel="stylesheet" />    
  13.     <style>    
  14.         .row1 {    
  15.             padding: 4px 30px 4px 6px;    
  16.             border-bottom: 1px solid #b3b3b3;    
  17.         }    
  18.         .header {    
  19.             background: #646464;    
  20.   color: #d1d1d1;    
  21.       
  22.   text-align: center;    
  23.   font-weight: bold;    
  24.   padding: 4px 30px 4px 6px;    
  25.             border-bottom: 1px solid #b3b3b3;    
  26.         }    
  27.     </style>    
  28. </head>    
  29. <body>    
  30.     <form id="form1" runat="server">    
  31.         <h2>    
  32.             Confirm Demo Using Bootstrap Dialog    
  33.         </h2>    
  34.     <div class="container">    
  35.         <asp:GridView ID="grdDemo" runat="server" AutoGenerateColumns="false" RowStyle-CssClass="row1" HeaderStyle-CssClass="header"   OnRowCommand="grdDemo_RowCommand" OnRowDeleting="grdDemo_RowDeleting">    
  36.             <Columns>    
  37.                 <asp:TemplateField HeaderText="Id">    
  38.                     <ItemTemplate>    
  39.                          <asp:Label ID="lblId" runat="server" Text='<%#Eval("Id") %>'></asp:Label>    
  40.                     </ItemTemplate>    
  41.                 </asp:TemplateField>    
  42.                 <asp:TemplateField HeaderText="Name">    
  43.                     <ItemTemplate>    
  44.                         <asp:Label ID="lblName" runat="server" Text='<%#Eval("Name") %>'></asp:Label>    
  45.                     </ItemTemplate>    
  46.                 </asp:TemplateField>    
  47.                 <asp:TemplateField HeaderText="City">    
  48.                     <ItemTemplate>    
  49.  <asp:Label ID="lblCity" runat="server" Text='<%#Eval("City") %>'></asp:Label>    
  50.                     </ItemTemplate>    
  51.                 </asp:TemplateField>    
  52.                 <asp:TemplateField HeaderText="Action">    
  53.                     <ItemTemplate>    
  54.                         <asp:LinkButton ID="lnkDelete" runat="server"    
  55.                              CssClass=""      
  56.                             OnClientClick='<%# string.Concat("if(!popup(this.id",",",Eval("ID"),",\"",Eval("Name"),"\"))return false; ") %>'     
  57.                             Text="Delete" CommandArgument='<%# Eval("Id") %>' CommandName="Delete" ></asp:LinkButton>    
  58.                     </ItemTemplate>    
  59.                 </asp:TemplateField>    
  60.             </Columns>    
  61.         </asp:GridView>    
  62.     </div>    
  63.         <script>    
  64.     
  65.     
  66.     
  67.             function popup(lnk, id, Name) {    
  68.                     BootstrapDialog.confirm({    
  69.                     title: 'WARNING',    
  70.                     message: 'Do You Want To Delete <b>'+Name+'</b>',    
  71.                     type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY    
  72.                     closable: true, // <-- Default value is false    
  73.                     draggable: true, // <-- Default value is false    
  74.                     btnCancelLabel: 'Cancel', // <-- Default value is 'Cancel',    
  75.                     btnOKLabel: 'Ok', // <-- Default value is 'OK',    
  76.                     btnOKClass: 'btn-warning', // <-- If you didn't specify it, dialog type will be used,    
  77.                     callback: function (result) {    
  78.                         // result will be true if button was click, while it will be false if users close the dialog directly.    
  79.                         if (result) {    
  80.                              javascript: __doPostBack('grdDemo$ctl02$lnkDelete', '');    
  81.     
  82.                         } else {    
  83.                             BootstrapDialog.closeAll();    
  84.                         }    
  85.                     }    
  86.                 });    
  87.     
  88.             }    
  89.     
  90.     
  91.         </script>    
  92.     </form>    
  93. </body>    
  94. </html>    
Here is the code behind for the same.
  1. using System;    
  2. using System.Collections.Generic;    
  3. using System.Linq;    
  4. using System.Web;    
  5. using System.Web.UI;    
  6. using System.Web.UI.WebControls;    
  7.     
  8. namespace BootStrapConfirm    
  9. {    
  10.     public partial class ConfirmDemo : System.Web.UI.Page    
  11.     {    
  12.         protected void Page_Load(object sender, EventArgs e)    
  13.         {    
  14.             if (!IsPostBack)    
  15.                 gridbind();    
  16.         }    
  17.             
  18.         protected void grdDemo_RowCommand(object sender, GridViewCommandEventArgs e)    
  19.         {    
  20.             if (e.CommandName == "Delete")    
  21.             {    
  22.                 LinkButton lnkView = (LinkButton)e.CommandSource;    
  23.                 string dealId = lnkView.CommandArgument;    
  24.                 List<Details> data = (List<Details>)ViewState["Data"];    
  25.                 data.RemoveAll(d => d.Id == Convert.ToInt32(dealId));    
  26.                 ViewState["Data"] = data;    
  27.                 gridbind();    
  28.                 System.Web.UI.ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "AlertBox", "BootstrapDialog.alert('Record Deleted Successfully.');", true);    
  29.                 //data.    
  30.             }    
  31.         }    
  32.            
  33.         protected void gridbind()    
  34.         {    
  35.             if (ViewState["Data"] != null)    
  36.             {    
  37.                    
  38.             }    
  39.             else     
  40.             {    
  41.                 Details d = new Details();    
  42.                 ViewState["Data"] = d.GetDetails();    
  43.                    
  44.             }    
  45.              grdDemo.DataSource = (List<Details>)ViewState["Data"];    
  46.             grdDemo.DataBind();    
  47.         }    
  48.     
  49.         protected void grdDemo_RowDeleting(object sender, GridViewDeleteEventArgs e)    
  50.         {    
  51.     
  52.         }    
  53.     }    
  54. }    

 
Next Recommended Reading What Is Cross Page Posting In ASP.NET Web Form