First Page always selected in @Html.PagedListPager
bekeer020 opened this issue · 1 comments
I have created pagination for .Net Core 3 project using X.PagedList nuget, when I click on page number it call action that retrieve partial view and update div for data list, all ok but when I click on page number 2 the data in list updated but current page selection is still on 1, it should changed to 2. and every time click on page greater that 1 the selection remain on 1 in PagedListPager.
` @Html.PagedListPager(Model.OrderViewModels, page => Url.Action("OrdersSearch2", "Orders",
new { ViewBag.SearchName, page = page }),
PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new PagedListRenderOptions
{
LiElementClasses = new string[] { "page-item" },
PageClasses = new string[] { "page-link" },
}
, new AjaxOptions()
{
HttpMethod = "POST",
UpdateTargetId = "OrdersList",
}))`
OrdersIndexViewModel
` public class OrdersIndexViewModel
{
public IPagedList OrderViewModels { get; set; }
public SearchOrderViewModel SearchOrderViewModel { get; set; }
}`
And my Action in Orders controller
` public ActionResult OrdersSearch2(int? page)
{
if (!ModelState.IsValid)
{
return View(mymodel);
}
OrderSearch ors = new OrderSearch();
ors.PageNumber = page ?? 1;
var entitiesList = orderService.FindBy(ors).ToPagedList(ors.PageNumber, 5);
var model = new OrdersIndexViewModel();
model.OrderViewModels = entitiesList.ToViewModels();
return PartialView("_OrdersListPartial", model.OrderViewModels);
}`
Index.cshtml
` @model OrdersIndexViewModel
_OrdersListPartial.cshtml
`@model X.PagedList.IPagedList
@{
int rowNo = 0;
}
</div>
</div>
<div class="" id="OrdersList">
@if (Model == null || Model.Count == 0)
{
<div class="alert alert-warning">No Orders</div>
}
else
{
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="mb-0">Orders List</h4>
</div>
<div class="card-content">
<div class="table-responsive mt-1">
<table class="table table-hover-animation mb-0">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>CUSTOMER NAME</th>
<th>CREATED</th>
<th>DELIVERY DATE</th>
<th>STATUS</th>
<th>OPERATORS</th>
<th></th>
<th style="display:none"></th>
</tr>
</thead>
<tbody>
@foreach (var i in @Model)
{
rowNo = rowNo + 1;
<tr>
<td>@rowNo</td>
<td>@ViewBag.OrdersPrefix @i.ID</td>
<td><i class="fa fa-circle font-small-3 text-success mr-50"></i>@i.CustomerName</td>
<td>@Html.DisplayFor(x => i.CreatedDate)</td>
<td>@Html.DisplayFor(x => i.DeliveryDate)</td>
<td>@i.OrderStatusText</td>
<td class="p-1">
<ul class="list-unstyled users-list m-0 d-flex align-items-center">
<li data-toggle="tooltip" data-popup="tooltip-custom" data-placement="bottom" data-original-title="Vinnie Mostowy" class="avatar pull-up">
<img class="media-object rounded-circle" src="../../../app-assets/images/portrait/small/avatar-s-5.jpg" alt="Avatar" height="30" width="30">
</li>
<li data-toggle="tooltip" data-popup="tooltip-custom" data-placement="bottom" data-original-title="Elicia Rieske" class="avatar pull-up">
<img class="media-object rounded-circle" src="../../../app-assets/images/portrait/small/avatar-s-7.jpg" alt="Avatar" height="30" width="30">
</li>
<li data-toggle="tooltip" data-popup="tooltip-custom" data-placement="bottom" data-original-title="Julee Rossignol" class="avatar pull-up">
<img class="media-object rounded-circle" src="../../../app-assets/images/portrait/small/avatar-s-10.jpg" alt="Avatar" height="30" width="30">
</li>
<li data-toggle="tooltip" data-popup="tooltip-custom" data-placement="bottom" data-original-title="Darcey Nooner" class="avatar pull-up">
<img class="media-object rounded-circle" src="../../../app-assets/images/portrait/small/avatar-s-8.jpg" alt="Avatar" height="30" width="30">
</li>
</ul>
</td>
<td>
@Html.ActionLink("Edit", "EditOrder", "Orders", routeValues: new { ID = i.ID })
</td>
<td style="display:none">
<i class="feather icon-trash"></i>
@Html.ActionLink("Delete", "DeleteOrderDetailTempItem", "Orders", routeValues: new { ID = i.ID }, htmlAttributes: new
{
@data_ajax = "true",
@data_ajax_method = "Get",
@data_ajax_update = "#OrderDetailList",
@data_ajax_failure = "onFailureDefault",
@data_ajax_success = "ViewOnSuccess",
})
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
}
</div>
</div>
</div>
Sorry, but I can't reproduce the problem. Try publish you example code in any public repository and provide link.