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
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">
<thead>
<tr>
<th>Provider</th>
<th>Expiring Date</th>
<th>Bandwidth</th>
<th>Company Name</th>
<th>Address Name</th>
</tr>
</thead>
<tbody>
@foreach (var M in Model)
{
<tr>
<td>@M.Provider</td>
<td>@M.Contract.Value.ToShortDateString()</td>
<td>@M.Internet</td>
<td>@M.CompanyName</td>
<td>@M.AddressName</td>
</tr>
}
</tbody>
</table>
</div>
<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>
}
else
{
<!--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>
}
}
</ul>
</div>
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) {
$("#ModalPopUpBody").html(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
https://esimakin.github.io/twbs-pagination/#examples
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.
If the above solution didn't worked for you, please check this article
https://qawithexperts.com/article/asp.net/paging-in-bootstrap-pop-up-modal-in-aspnet-mvc/182
This is MVC solution but should work with ASP.NET Core also.
Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly