ASP.NET MVC: Load Page with Data on BootStrap Modal

In order to make a website looks more interactive with improve page-loading performance, BootStrap modal is a way to go. For page loading performance BootStarp modal can be utilized with any sort of web component e.g. static web page loading, dynamic web page loading with data or page loading with Jquery plugins.

Today, I shall demonstrate loading of a complete web page with dynamic data 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

Download Now!

Let's begin now.

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

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 your target view model class file, which you will pass to your BootStrap modal page.

4) Now, Create a "Controllerss\HomeController.cs" file with default Index method along with a method "MyPage" which I will load on my BootStrap Modal. In "MyPage" method, load your data into your target view model and pass that model to the partial view.

5) Now, in the subsequent MyPage page "Views\Home\MyPage.cshtml" create a table to load your list data.

6) Now, attach the BootStrap modal to the button or link through the JavaScript lines of code 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"));
    });
...

The above lines of code will load the content of my target page into the BootStrap modal body.

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 a complete web page with dynamic data on BootStrap modal using ASP.NET MVC5 platform.