从索引视图中的部分视图重新渲染索引视图？

Question

索引视图带有分页的部分视图。 如果单击按钮 btnRowsPerPage，_pagination 部分视图会调用主控制器中的 Index ActionResult。 使用正确的变量调用控制器方法，但视图（索引）未更新。我错过了什么？

<div>
    @Html.Partial("_Pagination", new { offset = ViewBag.Offset, take = ViewBag.Take, count = ViewBag.Count } )
</div>

局部视图在索引视图中的静态集成。

<ul class="pagination pagination-sm">
<li class="page-item @(ViewBag.Offset==0 ? "disabled" : "")">
    @Html.ActionLink("<<", "Index", new { po = 0, sk = ViewBag.Take }, new { @class = "page-link" })
</li>
<li class="page-item @(ViewBag.PageCount==0 ? "disabled" : "")">
    @Html.ActionLink("<", "Index", new { po = ViewBag.Offset == 0 ? 0 : ViewBag.Offset - 1, sk = ViewBag.Take }, new { @class = "page-link" })
</li>
@for(int i = 0; i < ViewBag.PageCount; i++) {
    <li class="page-item @(ViewBag.Offset==i ? "active" : "")">
        @Html.ActionLink((i + 1).ToString(), "Index", new { po = i, sk = ViewBag.Take }, new { @class = "page-link" })
    </li>
}
<li class="page-item @(ViewBag.Offset==ViewBag.PageCount ? "disabled" : "")">
    @Html.ActionLink(">", "Index", new { po = ViewBag.Offset == ViewBag.PageCount ? ViewBag.Offset : ViewBag.Offset + 1, sk = ViewBag.Take }, new { @class = "page-link" })
</li>
<li class="page-item @(ViewBag.Offset==ViewBag.PageCount ? "disabled" : "")">
    @Html.ActionLink(">>", "Index", new { po = (int)(ViewBag.PageCount), sk = ViewBag.Take }, new { @class = "page-link" })
</li>
<li class="page-item">
    <input class="col-sm-5" type="number" placeholder="@ViewBag.Take" id="RowsPerPageValue" />
</li>
<li class="page-item" id="RowsPerPageLi">
    <button type="button" class="btn btn-primary" onclick="updateRowsPerPage()" id="btnRowsPerPage">Requery</button>
</li>

<script type="text/javascript">
var updateRowsPerPage = function () {
        $.ajax({
            url: '@Url.Action("Index", "TParts")',

            data: {
                po: @ViewBag.Offset,
                sk: $('#RowsPerPageValue').val()
            },
            success: function (data) {

            },
            error: function () {
                alert('Error');
            }
        });
    }

使用 JavaScript 进行局部视图

    public ActionResult Index(int? po, int? sk)
    {
        int offset = po ?? 0;
        int take = sk ?? 5;
        if(offset < 0) offset = 0;
        if(take < 1) take = 1;
        ViewBag.Take = take;
        int count = db.TParts.Count();
        ViewBag.PageCount = (int)(count / take) + ((count % take) > 0 ? 1 : 0);
        if(offset > ViewBag.PageCount) offset = ViewBag.PageCount;
        ViewBag.Offset = offset;
        var tParts = db.TParts.Include(t => t.PartType).OrderBy(o => o.Title).Skip(offset * take).Take(take);
        return View(tParts.ToList());
    }

主控制器的索引方法

Answer 1

您似乎没有在 ajax 调用中处理来自服务器的响应。

  <div id="page-details">
    @Html.Partial("_Pagination", new { offset = ViewBag.Offset, take = ViewBag.Take, count = ViewBag.Count } )
</div>

然后在你的 JS 文件中

       $.ajax({
            url: '@Url.Action("Index", "TParts")',

            data: {
                po: @ViewBag.Offset,
                sk: $('#RowsPerPageValue').val()
            },
            success: function (data) {
                $('#page-details').html(data);
            },
            error: function () {
                alert('Error');
            }
        });
    }