Ajax 分页在使用分页替换页面内容时复制 _layout 页面

Question

我正在使用x.PagedList 在我的 ASP.NET MVC 页面中使用分页。我对插件的唯一问题是，当我在页面之间导航时它使用了页面刷新。

为了避免我使用 jQuery 调用来替换页面内容，如 article 中所述。

我的视图和 javascript 看起来像这样。

<div id="circuitsContent">
    <table class="table">
        <tr>
            --Header 
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                --Loop through and create content
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                    @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.ID })
                </td>
            </tr>
        }

    </table>
</div>

<div id="circuitContentPager">
    @Html.PagedListPager((IPagedList)Model, page => Url.Action("Circuits", new { page }))
</div>

@section scripts
{
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $(document).on("click", "#circuitContentPager a[href]", function () {
                $.ajax({
                    url: $(this).attr("href"),
                    type: 'GET',
                    cache: false,
                    success: function (result) {
                        $('#circuitsContent').html(result);
                    }
                });
                return false;
            });
        });
 </script>

这是我的控制器代码：

public ActionResult Circuits(int? page)
        {

            var pageNumber = page ?? 1;
            var circuits = _repo.GetAllCircuits().OrderBy(circ=>circ.ID).ToList();
            var pagedCircuits = circuits.ToPagedList(pageNumber, 25);


            return View(pagedCircuits);
        }

我在这里错过了什么？

Answer 1

您的 ajax 调用从 Circuits() 方法返回 html，这与您最初用于呈现页面的视图相同，其中包括所有初始 html，但您只替换了现有页面的一部分，因此元素如@Html.PagedListPager() 方法生成的分页按钮将被重复。由于重复的 id 属性，您还会生成无效的 html（您将有多个 <div id="circuitsContent"> 元素

有两种方法可以解决这个问题。

创建一个单独的控制器方法，该方法仅返回 <table> 的部分视图并调用该方法，但是您需要提取寻呼机按钮的 href 属性的页码值以将其传递为好吧。

使用您当前的 Circuits() 方法，测试请求是否为 ajax，如果是，则仅返回 <table> 的部分视图。

public ActionResult Circuits(int? page)
{
    var pageNumber = page ?? 1;
    var circuits = _repo.GetAllCircuits().OrderBy(circ=>circ.ID);
    var pagedCircuits = circuits.ToPagedList(pageNumber, 25);
    if (Request.IsAjaxRequest)
    {
        return PartialView("_Circuits", pagedCircuits);
    }
    return View(pagedCircuits);
}

注意：不要在查询中使用.ToList()。这违背了使用服务器端分页的全部目的，因为.ToList() 会立即从数据库中下载所有记录。

_Circuits.cshtml 在哪里

@model IEnumerable<yourModel>
<table class="table">
    <thead>
        <tr>
            // <th> elements
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
            .... // Loop through and create content
            </tr>
        }
    </tbody>
</table>

请注意，您的标题元素应位于 <thead> 元素中，而记录应位于 <tbody> 元素中。