分页不更新目标 - 使用 Ajax 的 Asp.Net Core

Question

我希望这是直截了当的！我有一个加载得很好的部分，它使用 ajax 来应用过滤器/排序，效果很好。然而，分页链接发送正确的 url，并且响应是所需的页面，只是它实际上并没有更新/替换那里的内容。 父视图：

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


<p></p>
<div class="reviewView" id="filter">
    @await Html.PartialAsync("ShowReviewDetails", Model)
</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";


}
<form method="post" data-ajax="true">
<div class="row">
    <div id="pagerow" class="col s12 center center-align center-block">
        <p>Page @(Model.TotalPage < Model.PageIndex ? 1 :  
Model.PageIndex) of @Model.TotalPage<pager id="pager" class="pagination"  
setting-link-attr-data-ajax-update="filter" setting-link-attr-data-ajax-  
mode="replace" setting-link-attr-data-ajax="true" /></></p>
        <cs-pager cs-paging-pagesize="@Model.PageSize"
                  cs-paging-pagenumber="@Model.PageIndex"
                  cs-paging-totalitems="@Model.TotalPage"
                  cs-pagenumber-param="page"                      
                  asp-route-perPage="@ViewData["Page"]"
                  asp-route-searchProduct="@ViewData["Product"]"
                  asp-controller="Review"
                  asp-action="GetProducts"
                  cs-ajax-target="filter"></cs-pager>
    </div>
</div>
</form>
<hr />
<div id="stuff">
@foreach (var item in Model)
{
    var stars = item.Stars.ToString();
    var starurl = string.Format("images/stars/{0}_star.jpg", 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: 
<img src="~/@starurl" class="responsive-img" id="@item.Id" /></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 之外，所发生的只是当页面 >1 时分页从未更新。

我是新手，直到现在才制作没有 ajax 的网站！我想出了过滤器/排序，但我一直在这里转圈，我什至尝试了一个不同的 nuget 包进行分页Link to git，仍然没有乐趣！就像我说的，下一页在响应中，但它并不能取代那里的内容。

谢谢:)

Answer 1

想通了...在 data-ajax-update="filter" 中，我需要在元素 id 前面添加一个标签，例如data-ajax-update="#filter"... 手掌