0

I am using PagedListPager for pagination in MVC. I have a normal view and loading partial view for load grid section. First time it's working fine but second time when user click on page number it's loading data properly but layout is not loading/showing there.

public IActionResult TestTripList()
    {
        TripsServices tripsServices = new TripsServices();
        int? page = null;
        const int pageSize = 2;
        var result = tripsServices.GetTripList(1, DateTime.Now.AddYears(-1), DateTime.Now);
        var listPaged = result.ToPagedList(page ?? 1, pageSize);
        return View(listPaged);
    }


public IActionResult TestTripListFilter(int page, string searchText)
    {
        TripsServices tripsServices = new TripsServices();
        const int pageSize = 2;
        var result = tripsServices.GetTripList(1, DateTime.Now.AddYears(-1), DateTime.Now);
        var listPaged = result.ToPagedList(page > 0 ? page : 1, pageSize);
        return PartialView("~/Views/Home/_TestTripListView.cshtml", listPaged);
    }

Above is an Action under controller. And below is a code of normal view and partial view.

Normal view is as below :

@model IPagedList<TMS_WEB.Models.CustomModels.TripDetailsModel>
@{Layout = "~/Views/Shared/_AdminLayout.cshtml";}
<div id="tblSection">
      @Html.Partial("~/Views/Home/_TestTripListView.cshtml", Model)
</div>

However, partial view is as below:

    @model IPagedList<TMS_WEB.Models.CustomModels.TripDetailsModel>
    @using X.PagedList.Mvc.Core;
    @using X.PagedList;
    @using X.PagedList.Web.Common;
    <link href="~/css/PagedList.css" rel="stylesheet" />

    <table class="table">
    <thead class="thead-light">
       <tr>
            <th scope="col">Trip Number</th>
       </tr>
    </thead>
    <tbody class="customtable">
       @foreach (var item in Model)
       {
          <tr>
             <td>@item.TripNumber</td>
          </tr>
       }
    </tbody>
    </table>
@Html.PagedListPager(Model, page => Url.Action("TestTripListFilter", new { page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new PagedListRenderOptions { MaximumPageNumbersToDisplay = 5, DisplayPageCountAndCurrentLocation = true, UlElementClasses = new[] { "pagination" }, ContainerDivClasses = new[] { "pagination-container" } }, new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "tblSection" }))

Normally first time it's showing data with layout. As shown below : enter image description here

But when I click on page number then it's make call to partial action and loading partial view. Data is loading properly but Layout is not loading properly. enter image description here

Could you guide where I am making mistake? Thank you in advance.

Harsh
  • 15
  • 6

1 Answers1

0

The problem occurs because you are returning a partial view page in TestTripListFilter() action like this:

return PartialView("~/Views/Home/_TestTripListView.cshtml", listPaged);

, but the partial view page does not refer to the layout. According to this problem, I provide three solutions for your reference.

Option 1, according to the server side refresh, in @Html.PagedListPager( Model, page => Url.Action("TestTripListFilter", new { page }), return to TestTripList() action, and you also need add parameters in TestTripList() ,you can refer to this

Option 2, you can use AJAX for partial refresh, that is the Layout does not change, but only dynamically calls the partial view page, which can also achieve the effect you want.

Option 3, as I mentioned before, but if a layout has been added to the Normal view, the Layout under Layout problem you mentioned will appear. If the Normal view does not have to have a layout, this one will be OK too.

Qing Guo
  • 6,041
  • 1
  • 2
  • 10
  • I checked it, but not working properly. Also, I noticed that it's changing the URL even I set an ajax option with the pagedlistpager. – Harsh Mar 24 '22 at 04:22
  • I noticed that your _AdminLayout.cshtml is added by yourself, not the usual _layout.cshtml. If I want a custom Layout to be displayed on the PatialView, I need to add _AdminLayout.cshtml to the PatialView, hoping this can help you. – Qing Guo Mar 24 '22 at 06:07
  • It's conflict in parent child concept. When we add custom layout under partial view, then it's loading whole layout again under grid section. Layout under Layout problem. – Harsh Mar 24 '22 at 06:12
  • My latest answer has been updated. – Qing Guo Mar 28 '22 at 10:48