First Page always selected in @Html.PagedListPager

[bekeer020]

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<OrderViewModel> 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<OrderViewModel> @{ 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>

`