Header Ads

ASP.NET MVC: Load Jquery Plugin on BootStrap Modal

August 10, 2020 , , , ,
BootStarp modal can be utilized to compact the page navigation(s) and to improve page-loading performance. Using Jquery plugins on top of BootStrap modal will further add user interactivity and rich user interaction experience.

Today, I shall demonstrate loading of Jquery plugin on BootStrap modal using ASP.NET MVC5 platform.


Prerequisites:

Following are some of the prerequisites for this tutorial before you proceed any further:
  1. Knowledge of Bootstrap.
  2. Knowledge of ASP.NET MVC5.
  3. Knowledge of Jquery.
  4. Knowledge of HTML.
  5. Knowledge of JavaScript.
  6. Knowledge of C# Programming.
The example code is being developed in Microsoft Visual Studio 2019 Professional. I am using BootStrap v3.4.1
Let's begin now.

1) Create a new MVC web project and name it "MVCLoadPluginOnModal". 

2) In order to understand detail flow of the BootStrap modal, I suggest to study "ASP.NET MVC - Load Page on BootStrap Modal" article.

3) Create a "Controllerss\HomeController.cs" file with default Index method along with a method "MyPage" which I will load on my BootStrap Modal. Return "MyPage" method, as a partial view.

4) Create a subsequent Index page "Views\Home\Index.cshtml" with a button to load a BootStrap Modal.

5) Now, in the subsequent MyPage page "Views\Home\MyPage.cshtml" integrate a Jquery plugin of your choice. In my case, I am using Date/Time Picker Jquery Plugin.

6) Now, in the JavaScript file, you need to configure your target Jquery plugin within the below lines of code structure i.e.

...
    // Modal Click Load server content.
    $("#ModalRemoteBoxId").on("show.bs.modal", function (e)
    {
        // Loading.
        var link = $(e.relatedTarget);

        // Loading.
        $(this).find(".modal-body").load(link.attr("href"), function ()
        {
        ...
            // USE Jquery Plugins HERE
        ...
        });
    });
...

The above lines of code will load the content of my target page into the BootStrap modal body along with the Date/Time picker Jquery plugin that I have configured in the provided solution.

7) Now, execute the provided solution and you will be able to see the following in action i.e.


Conclusion

In this article, you will learn to load Jquery plugin on BootStrap modal using ASP.NET MVC5 platform. You will also learn about the main structure of BootStrap modal in JavaScript within which you will configure your target Jquery plugin.