A Confirmation Dialog for ASP.Net with Bootstrap

Most of the time, you may perform CRUD operations in your web application and some may cost you a lot if something goes wrong. For example, even the admin can go wrong with a little thing and the whole application may be crashed. To avoid such things, we can have a confirmation popup before performing any CRUD operation which is worth to double check. With bootstrap, it is not that complex and can easily manage in the client side. First you need to create the confirmation popup.

 <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
     <div class="modal-dialog">  
       <div class="modal-content">  
         <div class="modal-header">  
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>  
           <h4 class="modal-title" id="myModalLabel">Confirm</h4>  
         </div>  
         <div class="modal-body">  
           <p>You are about to save one record.</p>  
           <p>Do you want to proceed?</p>  
         </div>  
         <div class="modal-footer">  
           <button type="button" class="btn btn-default" data-dismiss="modal">No</button>  
           <a class="btn btn-danger btn-ok" data-dismiss="modal">Yes</a>  
         </div>  
       </div>  
     </div>  

This will give you confirmation window like below;

We are not done yet. Still we need to pop this window once the user click on Save button. To do so, we declare the button as below.

 <button id="btnSave" class="btn btn-primary btn-lg btn-block btn-sm btn-setmargin" type="button" data-toggle="modal" data-target="#confirm-delete">Save</button>  

A simple button which will be called this above created popup is enabling user to think twice before saving a record.

The "Yes" Button on popup can have a Ajax call to update the details or even can use a server side button control with a postback enabled.

Ultimately the page will looks like below.

Happy coding... :)