Asp.net core Sakura.AspNetCore.PagedList 和部分视图答案

【问题标题】：Asp.net core Sakura.AspNetCore.PagedList and partial viewsAsp.net core Sakura.AspNetCore.PagedList 和部分视图
【发布时间】：2017-06-20 01:06:54
【问题描述】：

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

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

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

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

InvalidOperationException：传递到 ViewDataDictionary 的模型项属于 Microsoft.AspNetCore.Mvc.PartialViewResult 但此 ViewDataDictionary 实例需要 Sakura.AspNetCore.IPagedList 类型的模型项

我终其一生都想不出如何解决这个问题，模型虽然分页列表是部分视图...这是我模型中代码的违规部分：

        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 core 和 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);
  });

【问题讨论】：

您如何在客户端和 ShowReviewDetails 部分视图中处理此问题？
@dime2lo 我已经更新了我的问题以包含其余相关代码
错误是在第一次渲染期间发生还是在您尝试更改页面之后发生？我的意思是，您可以正确访问主页（部分视图父级）吗？
是的，一切正常；就在我尝试使用下拉菜单应用过滤器时。我在控制器上添加了断点，一切正常，但列表从未更新。当我使用 chromes 开发工具检查时，响应总是一个错误页面。

标签： c# asp.net asp.net-core .net-core pagedlist

【解决方案1】：

答案很简单，我狠狠地踢了自己一个星期都坐不下！

我只需要将 partialView(GetReviewDetails) 作为 IPagedList 返回。

为了完整起见（这甚至是一个词吗？）这里是最后的一切！意见：当我复制整个页面时修改了索引（父级）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>

修改后的 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);
    }

【讨论】：