Header Ads

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
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.

7 comments:

  1. Perfectly explained ASP.NET MVC. Thank you for sharing this technical article.

    ReplyDelete
  2. Really awesome blog
    Like it so much
    Keep it up

    https://antiquestore-us.blogspot.com

    ReplyDelete
  3. i am very impres of your post.

    https://grfreightservices.com/

    ReplyDelete
  4. Amazing article. Worth to read. Thanks a lot for sharing this. https://patnalocalguide.com/

    ReplyDelete
  5. Your site is in reality extremely alluring. Your own course is really immense. We should be existing by and by there. I'm agreeable along with your distribute. I'll go to an individual with respect to considerably more reconsider. Much obliged!Printer Repair

    ReplyDelete

  6. Thank you for taking the time to publish this information. Nice post sharing. Thank you for your analysis. Looking forward to reading more of your posts. Keep it up...

    No more waste time to searching #HDimages, #PCwallpaper, #smartphone_wallpaper, #socialmedia_banner, #socialmedia_image_post, #natureHDimages, and many more awesome pictures. Just visit All Awesome Pictures Only For Love Hearts and choose your best choice.
    All Awesome Pictures Only For Love Hearts
    All Awesome Pictures Only For Love Hearts
    All Awesome Pictures Only For Love Hearts

    ReplyDelete