Layout is not loading with PagedListPager and partial view in MVC

Question

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.

Answer 1

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.