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;
  6. namespace BootStrapConfirm
  7. {
  8. [Serializable()]
  9. public class Details
  10. {
  12. public int Id { get; set; }
  13. public string Name { get; set; }
  14. public string City { get; set; }
  16. public List<Details> GetDetails()
  17. {
  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;
  27. }
  29. }
  31. }
Now we will create a webform ConfirmDemo.aspx.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ConfirmDemo.aspx.cs" Inherits="BootStrapConfirm.ConfirmDemo" %>
  3. <!DOCTYPE html>
  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;
  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>
  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', '');
  82. } else {
  83. BootstrapDialog.closeAll();
  84. }
  85. }
  86. });
  88. }
  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;
  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. }
  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. }
  33. protected void gridbind()
  34. {
  35. if (ViewState["Data"] != null)
  36. {
  38. }
  39. else
  40. {
  41. Details d = new Details();
  42. ViewState["Data"] = d.GetDetails();
  44. }
  45. grdDemo.DataSource = (List<Details>)ViewState["Data"];
  46. grdDemo.DataBind();
  47. }
  49. protected void grdDemo_RowDeleting(object sender, GridViewDeleteEventArgs e)
  50. {
  52. }
  53. }
  54. }