Asp.net core Sakura.AspNetCore.PagedList and partial views

Question

I've been struggling for far too long with this now, and I think I've finally found where the problem is!

I am making a review section in an Asp.Net Core web app, I have added 2 drop downs that filter reviews by product, and set the number of reviews per page.

For the paged list I am using Sakura.AspNetCore.PagedList.

I am trying to use ajax to return the partial view which has the filtered and sorted reviews, and all goes well, until the model is passed back. At first I couldn't figure it out, then using chrome, I found a 500 error, and from there found the following error in the resonse:

InvalidOperationException: The model item passed into the ViewDataDictionary is of Microsoft.AspNetCore.Mvc.PartialViewResult but this ViewDataDictionary instance requires a model item of type Sakura.AspNetCore.IPagedList

I can't for the life of me figure out how to fix this, the model although a pagedlist is a partialView... here's the offending part of the code in my model:

        public async Task<ActionResult> ShowReviewDetails(string searchProduct, int? page, string perPage)
    {
        // get product via id
        var prodId = Convert.ToInt32(searchProduct);
        var prod = await _context.Product.FindAsync(prodId);
        searchProduct = prod.ProductName;
        if (perPage == "0")
        {
            perPage = _context.Product.Count().ToString();
        }
        var perPageGet = Convert.ToInt32(perPage);
        if (perPageGet <= 0)
        {
            perPageGet = _context.Product.Count();
        }
        int pageSize = Convert.ToInt32(perPageGet);
        int pageNumber = (page ?? 1);

        IEnumerable<Review> reviews = await _context.Review.Where(r => r.ReviewApproved == true).ToListAsync();
        if (!string.IsNullOrWhiteSpace(searchProduct) || !string.IsNullOrEmpty(searchProduct))
        {

            searchProduct = StringExtensions.UppercaseFirst(searchProduct);
        }           
        if (!string.IsNullOrEmpty(searchProduct) || !string.IsNullOrWhiteSpace(searchProduct) || searchProduct == "0")
        {
            page = 1;
            reviews = await _context.Review.Where(r => r.Product == searchProduct && r.ReviewApproved == true).ToListAsync();
        }
        if (searchProduct == "All" || string.IsNullOrEmpty(searchProduct))
        {
            reviews = await _context.Review.Where(r => r.ReviewApproved == true).ToListAsync();
        }

        reviews = reviews.ToPagedList(pageSize, pageNumber);

        return PartialView(reviews);

I'm still fairly green when it comes to asp.net core and c#, so any help or suggestions would be welcomed, maybe there is a better option for paging?

Thanks for your time!

EDIT: added views and script

My partial view parent:

@{
ViewBag.Title = "Review Dashboard";
@using YaCu_2017.Controllers;
}
<p class="green-text">@ViewBag.StatusMessage</p>
<p class="red-text">@ViewBag.ErrorMessage</p>

<h2>Our Product Reviews</h2>

<div class="reviewView" id="filter">
@await Html.PartialAsync("ShowReviewDetails")
</div>

The actual partialview:

    @model IPagedList<YaCu_2017.Models.Review>
@using System.Globalization
@using Sakura.AspNetCore
@using YaCu_2017.Controllers
@using YaCu_2017.Models
@{
ViewData["Title"] = "Digital Jeeves - Reviews";

}

<div class="row">
<div class="col s2">

    <h5>Filter by Product:</h5>

    <form method="get" >
        @{
            var product = ReviewController.GetProductListIncId();
            var productCount = ReviewController.GetProductCountList();
            ViewBag.ProductList = product;
            ViewBag.ProductCount = productCount;
        }
        <select asp-items="@ViewBag.ProductList" id="searchProduct" class="dropdown-button btn"></select>
        <h5>Reviews per page</h5>
        <select asp-items="@ViewBag.ProductCount" id="perPage" class="dropdown-button btn"></select>
    </form>

</div>
</div>

<div class="row">
    <div class="col s12 center center-align center-block">
        <p>Page @(Model.TotalPage < Model.PageIndex ? 1 : Model.PageIndex) of @Model.TotalPage<pager class="pagination" setting-link-attr-data-ajax="true" /></></p>
    </div>
</div>
<hr />
<div>
@foreach (var item in Model)
{
    var stars = Convert.ToDouble(item.Stars);
    <div class="container opaque-parent z-depth-5">
        <div class="row">
            <div class="col s6"><h6 style="border-bottom:thin">Title : @Html.DisplayFor(model => item.Title)</h6></div>
            <div class="col s3"><h6 style="border-bottom:thin">Product : @Html.DisplayFor(model => item.Product)</h6></div>
            <div class="col s3"><h6 style="border-bottom:thin">Rated: <ej-rating value="@stars" id="@item.Id" read-only="true" /></h6></div>
        </div>
        <div class="row" style="">
            <div class="col s12" style="border-bottom:inset">
                <h6>Comment:</h6>
            </div>
        </div>
        <div class="row" style="border-bottom:inset">
            <div class="col s6 offset-s3">
                <p class="flow-text">"@Html.DisplayFor(model => item.ReviewText)"</p>
            </div>
        </div>
        <div class="row">
            <div class="col s3">
                <p>Date Created : @Html.DisplayFor(modelItem => item.CreatedDate)</p>
            </div>
            <div class="col s3">
                <p>Chosen Display Name: @Html.DisplayFor(modelItem => item.DisplayName)</p>
            </div>
        </div>
    </div>
    <hr />
}
</div>
<div class="row">
<div class="col s12 center center-align center-block">
    <p>Page @(Model.TotalPage < Model.PageIndex ? 1 : Model.PageIndex) of @Model.TotalPage<pager class="pagination" setting-link-attr-data-ajax="true" /></></p>
</div>
</div>

and my document ready function:

     $("#searchProduct").change(function () {
        var product =  $("#searchProduct").val();
        var perPage = $("#perPage").val();
           $("#filter").load('http://LocalHost:50426/Review/GetProducts?searchProduct=' + product + '&perPage=' + perPage);
  });
 $("#perPage").change(function () {
        var product =  $("#searchProduct").val();
        var perPage = $("#perPage").val();
           $("#filter").load('http://LocalHost:50426/Review/GetProducts?searchProduct=' + product + '&perPage=' + perPage);
  });

Answer 1

The answer was stupidly simple, I kicked my self so hard I won't be sitting down for a week!

I just needed to return partialView(GetReviewDetails) as IPagedList.

For the sake of completness (Is that even a word?) here is everything as it ended up! Views: Modified index (Parent) as I was duplicating an entire page lol:

    @model Sakura.AspNetCore.IPagedList<YaCu_2017.Models.Review>
@{
ViewBag.Title = "Review Dashboard";
@using YaCu_2017.Controllers;
}
<p class="green-text">@ViewBag.StatusMessage</p>
<p class="red-text">@ViewBag.ErrorMessage</p>

<h2>Our Product Reviews</h2>
<div class="row">
<div class="col s2">

    <h5>Filter by Product:</h5>

    <form method="get">
        @{
            var product = ReviewController.GetProductListIncId();
            var productCount = ReviewController.GetProductCountList();
            ViewBag.ProductList = product;
            ViewBag.ProductCount = productCount;
        }
        <select asp-items="@ViewBag.ProductList" id="searchProduct" class="dropdown-button btn"></select>
        <h5>Reviews per page</h5>
        <select asp-items="@ViewBag.ProductCount" id="perPage" class="dropdown-button btn"></select>
    </form>

</div>
</div>

<div class="row">
<div class="col s12 center center-align center-block">
    <p>Page @(Model.TotalPage < Model.PageIndex ? 1 : Model.PageIndex) of @Model.TotalPage<pager class="pagination" setting-link-attr-data-ajax="true" /></></p>
</div>
</div>
<hr />
<div>
<div class="reviewView" id="filter">
    @await Html.PartialAsync("ShowReviewDetails", Model)
</div>
</div>
<div class="row">
<div class="col s12 center center-align center-block">
    <p>Page @(Model.TotalPage < Model.PageIndex ? 1 : Model.PageIndex) of @Model.TotalPage<pager class="pagination" setting-link-attr-data-ajax="true" /></></p>
</div>
</div>

Modified ShowReviewDetails (Child / partial) only has the loop:

    @model IPagedList<YaCu_2017.Models.Review>
@using System.Globalization
@using Sakura.AspNetCore
@using YaCu_2017.Controllers
@using YaCu_2017.Models
@{
ViewData["Title"] = "Digital Jeeves - Reviews";

}


@foreach (var item in Model)
{
    var stars = Convert.ToDouble(item.Stars);
    <div class="container opaque-parent z-depth-5">
        <div class="row">
            <div class="col s6"><h6 style="border-bottom:thin">Title : @Html.DisplayFor(model => item.Title)</h6></div>
            <div class="col s3"><h6 style="border-bottom:thin">Product : @Html.DisplayFor(model => item.Product)</h6></div>
            <div class="col s3"><h6 style="border-bottom:thin">Rated: <ej-rating value="@stars" id="@item.Id" read-only="true" /></h6></div>
        </div>
        <div class="row" style="">
            <div class="col s12" style="border-bottom:inset">
                <h6>Comment:</h6>
            </div>
        </div>
        <div class="row" style="border-bottom:inset">
            <div class="col s6 offset-s3">
                <p class="flow-text">"@Html.DisplayFor(model => item.ReviewText)"</p>
            </div>
        </div>
        <div class="row">
            <div class="col s3">
                <p>Date Created : @Html.DisplayFor(modelItem => item.CreatedDate)</p>
            </div>
            <div class="col s3">
                <p>Chosen Display Name: @Html.DisplayFor(modelItem => item.DisplayName)</p>
            </div>
        </div>
    </div>
    <hr />
}

Now the controllers:

I have a GetProducts() controller, which is uses to load the partial via ajax and is where I needed to add as IPagedList:

        [HttpGet]
    [AllowAnonymous]
    public async Task<ActionResult> GetProducts(string searchProduct, int? page, string perPage)
    {
        var product = int.Parse(searchProduct);

        var obj = await this.ShowReviewDetails(searchProduct, page, perPage) as IPagedList;
        return PartialView("ShowReviewDetails", obj);
    }

The index control:

        public async Task<ActionResult> Index(Review model, string sortOrder, string searchString, string searchProduct, int? page, string perPage)
    {

        await ShowReviewDetails(model, sortOrder, searchString, searchProduct, page, perPage);
        return View();
    }

And finally ShowReviewDetails:

        public async Task<ActionResult> ShowReviewDetails(string searchProduct, int? page, string perPage)
    {
        // get product via id
        var prodId = Convert.ToInt32(searchProduct);

        if (prodId > 0)
        {
            var dbProd = await _context.Product.FindAsync(prodId);
            var prod = new Product()
            {
                Id = dbProd.Id,
                ProductName = dbProd.ProductName,
                Cost = dbProd.Cost,
                ProductCategory = dbProd.ProductCategory,
                ProductDescription = dbProd.ProductDescription,
            };
            searchProduct = prod.ProductName;
        }
        else
        {
            searchProduct = "All";
        }           
        if (perPage == "0")
        {
            perPage = _context.Product.Count().ToString();
        }
        var perPageGet = Convert.ToInt32(perPage);
        if (perPageGet <= 0)
        {
            perPageGet = _context.Product.Count();
        }
        int pageSize = Convert.ToInt32(perPageGet);
        int pageNumber = (page ?? 1);

        IEnumerable<Review> reviews = await _context.Review.Where(r => r.ReviewApproved == true).ToListAsync();
        if (!string.IsNullOrWhiteSpace(searchProduct) || !string.IsNullOrEmpty(searchProduct))
        {

            searchProduct = StringExtensions.UppercaseFirst(searchProduct);
        }           
        if (!string.IsNullOrEmpty(searchProduct) || !string.IsNullOrWhiteSpace(searchProduct) || searchProduct == "0")
        {
            page = 1;
            reviews = await _context.Review.Where(r => r.Product == searchProduct && r.ReviewApproved == true).ToListAsync();
        }
        if (searchProduct == "All" || string.IsNullOrEmpty(searchProduct))
        {
            reviews = await _context.Review.Where(r => r.ReviewApproved == true).ToListAsync();
        }

        reviews = reviews.ToPagedList(pageSize, pageNumber);

        return PartialView(reviews);
    }