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 Scenerio 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.
Here is the code behind for the same.
For the sake of simplicity i have used a class with some data .You can also use database to populate gridview.
Now we will create a webform ConfirmDemo.aspx.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; } } }
<%@ 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>
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) { } } }
