ASP.Net Ajax for Bootstrap Popup & JQuery

Bootstrap is a css, javascript & html framework that is being used for creating web sites and web applications. We have discussed how bootstrap rows and columns are arranged in our previous post here.

Among 100s of rich contents in bootstrap framework, lets talk about popup today. We normally need to use popups more than web pages in our application to show various information to the user. And it is also convenient way too because we do not need to redirect to many pages instead can include all details in a single page. Using Bootstrap Popup is extremely easy. The basic html way is described below;

 <button data-target="#myModal" data-toggle="modal" class="btn btn-primary btn-lg">  
  Open Popup  
 </button>  
 <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade" style="display: none;">  
   <div class="modal-dialog">  
    <div class="modal-content">  
      <div class="modal-header">  
       <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>  
       <h4 id="myModalLabel" class="modal-title">Modal title</h4>  
      </div>  
      <div class="modal-body">  
       Model Description  
      </div>  
      <div class="modal-footer">  
       <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>  
       <button class="btn btn-primary" type="button">Save changes</button>  
      </div>  
    </div>  
    <!-- /.modal-content -->  
   </div>  
   <!-- /.modal-dialog -->  
 </div>  

The button will open the popup here. but what if you need some control over this which need to query the database and show some info on popup dynamically. It is easy as cheese now. Look at the below.

 $(document).ready(function () {  
   $("#divVCardLoading").show();   
   $('[data-toggle=modal]').on('click', function (e) {  
     var $target = $($(this).data('target'));  
     $target.modal('show').data('triggered', false);  
 //YOU CAN LOAD THE AJAX CONTENT HERE  
 //    if ($('#hdnIdPerson').val() != "0")  
 //      LoadPersonDetails();  
 //    else if ($('#hdnIdPerson').val() == "0")  
 //      SetPersonEntryForm();  
 //    else  
 //      $target.data('triggered', true);  
     $("#divVCardLoading").hide(); //HIDE LOADING  
     $("#txtPersonName").focus();  
 // THIS WILL DELAY THE POPUP 100 MILLISECONDS   
     $target.data('triggered', true);  
         setTimeout(function () {  
           if ($target.data('triggered')) {  
             $target.modal('show').data('triggered', false);  
           };  
         }, 100); // milliseconds  
     return false;  
   });  
 });  
 function LoadPersonDetails() {   
 //USE JQUERY AJAX TO LOAD DETAILS AND APPEND THEM TO POPUP CONTROLS HERE  
 };   
 function SetPersonEntryForm() {   
 //CLEAR FIELDS AND SET FOCUS   
 };   

We set the value of "hdnIdPerson" control when user click on the link and that value is passed to the "LoadPersonDetails" function that will use to query the database and get the details needed.

If you need to change the look and feel, change the css in your custom css file for the below classes;

modal-header : for header
modal-body : for body
modal-footer : for footer.

Finally you will get a popup like this,

Hope you can copy the script and try it. Happy coding... :)