ASP.NET MVC - Load Page on BootStrap Modal

BootStrap modal enables interactive way of loading a page or small web component like form on top of the page without leaving the parent page. This feature adds rich interactivity between end-user and the web page as end-user will stay on the page and will not be redirected, this also speeds-up loading process since only a small web component is being loaded on top of the parent page while all require libraries/images/content has already been loaded. When a page is navigated to another page, loading page might take a bit longer depending on the data on the page or content such as images loading on the page. So, BootStrap modal is not only interactive with end-user, but, also speed up the new small web component content loading compare to loading of the entire page.

Today, I shall demonstrate loading of a complete static web page 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 "MVCLoadPageOnModal". 

2) 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, make sure to use partial view return type as follow i.e.

...
            // Info.
            return this.PartialView();
...

Know that BootStrap modal loads small web components on the same requesting page, there is no redirection or navigation to new page is involved. Therefore, it is important that the target web page in controller file must return partial view instead of normal view.

3) Create your generic "BootStrap Modal" static view in a partial view file.

4) Then include the BootStrap modal view file created in the previous step as a partial HTML view in your "Layout" page just before the start of the scripts rendering line of code.

5) Now, in the subsequent index view page "Views\Home\Index.cshtml" create a button, which will open the BooStrap modal and load my target page into it. So, configure BootStrap modal settings on the button with the following lines of code i.e.

...

<a class="btn btn-danger" href="@Url.Action("MyPage", "Home")" data-toggle="modal" data-target="#ModalRemoteBoxId" data-remote="false"><i class="fa fa-info-circle "></i>  Load Page</a>

...

In the above code, I have added my target page link URL in the href property, which I want to load on the BootStarp modal. Then, I have added data-toggle property as modal as this will open my BootStrap modal when this button is clicked. I have also added data-target property, which will contain the ID of my created BootStrap modal and finally, I have set the data-remote property as false, since, I am using href property to load my target page. Know that if you are using your target page URL in the data-remote property then you need to use the empty href property and similarly, if you want your target page URL in href property then you need to set false in the data-remote property..

6) Now, create the JavaScript file "Scripts\script-custom-modal.js" with the following 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 static web page on BootStrap modal using ASP.NET MVC5 platform. You will also learn about the various properties on the button link which will enable BootStrap modal and finally, you will learn the difference between utilization of href property vs data-remote property on the BootStrap modal button.