Asp.net 核心 Sakura.AspNetCore.PagedList 和部分视图

Question

我现在已经为此苦苦挣扎了太久，我想我终于找到了问题所在！

我正在 Asp.Net 核心网络应用程序中创建一个评论部分，我添加了 2 个下拉列表以按产品过滤评论，并设置每页评论的数量。

对于分页列表，我使用 Sakura.AspNetCore.PagedList。

我正在尝试使用 ajax 到 return 具有过滤和排序评论的部分视图，一切顺利，直到模型传回。一开始我想不通，然后使用chrome，我发现了一个500错误，并从那里发现了以下错误：

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

虽然 pagedlist 是一个部分视图，但我这辈子都想不出如何解决这个模型...这是我模型中代码中有问题的部分：

        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);

我在 asp.net 核心和 c# 方面还是比较新手，所以欢迎任何帮助或建议，也许有更好的分页选项？

感谢您的宝贵时间！

编辑：添加了视图和脚本

我的部分视图父级：

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

实际局部视图：

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

和我的文档准备功能：

     $("#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

答案简单得愚蠢，我狠狠地踢了自己一个星期都不会坐下来！

我只需要 return partialView(GetReviewDetails) 作为 IPagedList。

为了完整起见（这甚至是一个词吗？）这是最终的一切！意见：修改索引（父级），因为我正在复制整个页面大声笑：

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

修改后的 ShowReviewDetails (Child / partial) 只有循环：

    @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 />
}

现在的控制器：

我有一个 GetProducts() 控制器，它用于通过 ajax 加载部分，我需要在其中添加 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);
    }

索引控件：

        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();
    }

最后是 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);
    }

Asp.net 核心 Sakura.AspNetCore.PagedList 和部分视图

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

c#

asp.net

pagedlist

.net-core

asp.net-core