PagedList in BootStrap pop-up Modal using Asp.Net CORE MVC

I am showing some data in modal pop-up using BootStrap .Basically I am using for each loop for displaying Data. So I would like to know, How To apply paging in these scenario using PagedList asp net core mvc or any other plugin in pop-up modal.

thank you

Asked by:- Nguyễn ThànhThịnh
: 1515 At:- 7/5/2018 2:58:41 PM
asp net core mvccore netcore

2 Answers
profileImage Answered by:- jaya

You can show data in Bootstrap pop-up modal like you do basically in all Razor pages in MVC.

To implement paging (IPagedList) inside pop-up modal, You would require to use jQuery plugin with it.

Create the Razor Code as below sample HTML

@using PagedList.Mvc;
@model PagedList.IPagedList<Project.Web.Models.Details>
    var pCount = Model.PageCount;

<div class="table-responsive">
    <table class="table table-bordered table-hover">
                <th>Expiring Date</th>
                <th>Company Name</th>
                <th>Address Name</th>

            @foreach (var M in Model)

<div class="pagination-container">
    <ul class="pagination">
        @for (var i = 1; i <= pCount; i++)
            if (i == Model.PageNumber)
                <li class="active"><a>@i</a></li>
               <!--Loading next page using jQuery Ajax in Pop-Up Modal -->
                <li><a href="javascript:void(0)" class="GetAjaxCall" data-id="@i" data-action="AgreementExpiring">@i</a></li>


jQuery code to load new data in pop-up modal should be inside Main View(View from which modal is opened.)

 $(document).on('click', ".GetAjaxCall", function () {
              var id = $(this).attr('data-id');
              var action = $(this).attr('data-action');

              $.get('/Controller/' + action + "?page=" + id, function (data) {


Above solution works, but when there will be lots of pages, it shows all the pages number like 1 to 50 continuously so to make it like 1,2,3....10 we can use any of these jQuery plugin

The above plugins will help you convert pages list "1 2 3 4 5 6 7 8 9 10" to "1 2 3....10", will be helpful when there are lots pages like more than 20.

At:- 7/5/2018 6:01:04 PM
I have used it, and there are more plugins for jQuery pagination which makes pop-up modal pagination much easier. 0
By : jon - at :- 7/9/2018 11:35:19 AM

profileImage Answered by:- Sam

If the above solution didn't worked for you, please check this article

This is MVC solution but should work with ASP.NET Core also.

At:- 9/4/2018 10:46:57 AM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use

Subscribe Now

Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly