Asp.net core中的Sakura.AspNetCore.PagedList和局部视图

Question

我已经与这个问题斗争了太长时间，现在我认为我终于找到了问题所在！

我正在为Asp.Net Core Web应用程序创建一个评论部分，我添加了两个下拉框，按产品筛选评论，并设置每页评论数。

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

我试图使用Ajax返回部分视图，其中包含过滤和排序的评论，一切都很顺利，直到模型被传回。起初我无法弄清楚它，然后使用谷歌浏览器，我发现了500错误，从那里发现了以下错误：

InvalidOperationException：传递给ViewDataDictionary的模型项是Microsoft.AspNetCore.Mvc.PartialViewResult类型，但此ViewDataDictionary实例需要Sakura.AspNetCore.IPagedList类型的模型项。

我无法想象如何修复这个问题，尽管PagedList是一个partialView的模型... 这是我的模型代码中有问题的部分:

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

- Mark Perry

---

你是如何在客户端和ShowReviewDetails局部视图中处理这个问题的？ - dime2lo

@dime2lo 我已经更新了我的问题，包括其余相关代码。 - Mark Perry

错误是在第一次渲染期间发生的，还是在您尝试更改页面后发生的？我的意思是，您能否在没有错误的情况下访问主页面（部分视图父级）？ - dime2lo

是的，一切都可以正常加载；只是当我尝试使用下拉菜单应用过滤器时出现问题。我在控制器上添加了断点，并且那里的一切都进行得很好，但列表从未更新。当我使用谷歌开发工具检查时，响应总是一个错误页面。 - Mark Perry

Answer 1

答案非常简单，我自己踢了一脚，这一个星期都不能坐下来了！

我只需要将partialView（GetReviewDetails）返回为IPagedList即可。

为了完整起见（这个词真的存在吗？），以下是最终的全部内容！ 视图： 修改了index（父级），因为我在复制整个页面，哈哈。

    @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（子/部分）仅有循环：

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

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

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

- Mark Perry