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,
- closable: true,
- draggable: true,
- btnCancelLabel: 'Cancel',
- btnOKLabel: 'Ok',
- btnOKClass: 'btn-warning',
- callback: function (result) {
-
- 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);
-
- }
- }
-
- 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)
- {
-
- }
- }
- }