Bootstrap Modal Dialog - Loading Content from MVC Partial View

• Download source - 3.9 MB

Introduction

I will show a simple way to display the content of partial view in a bootstrap dialog. I will also show how to fix the dialog doesn't appear issue after 3.1.0 version. There is no need to write additional Ajax calls - this is handled internally by Bootstrap.

Background

When you have a list - table of data and want to add a record, it's one of the better ideas to use a modal dialog - just because there will be no need to go to another page. Also for the deletion of records - confirmation could be done using bootstrap modal dialogs. There are many other places where you can use modal dialogs.

I saw online many different ways to create modal dialogs... many bad ways like:

1. Creating all dialogs on the page and then just show or hide them using JavaScript. This means adding partial views to a page - render all the information and then if the user needs to see the dialog - it will appear.
2. Making Ajax calls to display the content. This means for every dialog a call .... not effective. It is better to use a library for that.

The question now is how to do it in a nice and simple way?

1. On the main layout, you need to have a modal container - the place where the dialogs will be loaded.
   HTML

   <div id="modal-container" class="modal fade" 
   tabindex="-1" role="dialog">
      <div class="modal-content">
      </div>
    </div>

   If you are using bootstrap v 3.0.0, then remove:

   HTML

   <div class="modal-content"></div>

   After version 3.1.0, this should be included - this is how the changing of the versions affected my implementation.

2. Set some styles - I have put that in the main layout just for the example, but you can put it in the correct place in your project.
   CSS

   <style>
        .modal-content {
            width: 600px !important;
            margin: 30px auto !important;
        }
    </style>
   

3. Add JavaScript - this will make an Ajax call internally and will inject the partialview content into the modal container.
   HTML

   <script type="text/javascript">
           $(function () {
               // Initialize numeric spinner input boxes
               //$(".numeric-spinner").spinedit();
               // Initialize modal dialog
               // attach modal-container bootstrap attributes to links with .modal-link class.
               // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
               $('body').on('click', '.modal-link', function (e) {
                   e.preventDefault();
                   $(this).attr('data-target', '#modal-container');
                   $(this).attr('data-toggle', 'modal');
               });
               // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
               $('body').on('click', '.modal-close-btn', function () {
                   $('#modal-container').modal('hide');
               });
               //clear modal cache, so that new content can be loaded
               $('#modal-container').on('hidden.bs.modal', function () {
                   $(this).removeData('bs.modal');
               });
               $('#CancelModal').on('click', function () {
                   return false;
               });
           });
       </script>

4. Create a Controller Action, that will return partial view.
   C#

    public ActionResult ViewLyubomir()
   {
        return PartialView("_Lyubomir");
    }

5. Create an action that will process the result of the post occurring in the partial view.
   C#

   [HttpPost]
   public ActionResult Lyubomir()
   {
       return RedirectToAction("Index");
   }
   

6. Create a partial view:
   HTML

   <div class="modal-body">
       <div class="alert alert-warning">
           <span class="glyphicon glyphicon-warning-sign"></span>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
           Donec consequat nisl a nibh tincidunt condimentum. 
           Nullam in augue vitae augue dictum eleifend. 
           Nunc porta fermentum metus, quis efficitur lectus scelerisque ac. 
           Quisque egestas sit amet nunc in interdum. 
           Etiam malesuada maximus nisi, id tempus metus. 
           Vivamus at sapien ut metus aliquet sodales sed id magna. 
           Integer in auctor ex. Phasellus tempor, est vel placerat dapibus, 
           nulla dui tempor ligula, at pulvinar libero nunc gravida metus. 
           Proin non feugiat felis. Proin ut ultrices ex. Morbi aliquet lacinia elit at bibendum. 
           Nunc facilisis, neque a finibus dignissim, turpis felis vulputate diam, 
           a tristique tellus nibh nec nulla. Suspendisse eget augue non turpis 
           dignissim euismod eget eget odio. Donec sit amet nibh cursus, efficitur 
           nibh in, sodales arcu. Pellentesque pulvinar consequat lacus ac porttitor.
       </div>
       @using (Html.BeginForm("Lyubomir", "Home", FormMethod.Post))
       {
           <div class="row">
               &nbsp;
           </div>
           <div class="row">
               <div class="col-md-4 col-md-offset-4">
                   <button type="button" class="btn btn-default" 
                   data-dismiss="modal">Cancel</button>
                   <button type="submit" id="approve-btn" 
                   class="btn btn-danger">Save</button>
               </div>
           </div>
       }
   </div>
   <script type="text/javascript">
       $(function () {
           $('#approve-btn').click(function () {
               $('#modal-container').modal('hide');
           });
       });
   </script>

7. The last step is to create an action link with specific attributes.
   HTML

   @Html.ActionLink("Lyubomir ", "ViewLyubomir", "Home", 
   null, new { @class = "modal-link btn btn-success" })

How Does It Work?

On point 7 when the user clicks on the link, based on the attribute - modal-link we have an attached click event for all the links with that attribute - point 3. On point 3, the default action of a link will be prevented and the content to where this link points to will be injected into the model-container div point 1. When the user posts in the modal dialog - point 6, the data will be processed in the corresponding controller - point 5.

When you open the project - Home view has a link button - Lyubomir. Click on that and you will see the magic happening.

Points of Interest

As you can see - nice and simple, no direct Ajax calls to display the content - everything is handled by Bootstrap. Just remember the changing of the versions and how this affects the example. You can search online for that but, it seems a cosmetic issue but it took me quite some time to figure out where to apply it.