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

Question

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

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

我的 View 和 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>

这是我的 Controller 代码:

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方法与您最初用于呈现页面的 View 相同，其中包括所有初始 html，但您仅替换现有页面的一部分，因此由 @Html.PagedListPager() 生成的分页按钮等元素方法将被重复。由于重复 id，您还会生成无效的 html属性(你将有多个 <div id="circuitsContent"> 元素

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

创建一个单独的 Controller 方法，只返回 <table> 的部分 View 并调用该方法，但是您需要提取 href 的页码值你的寻呼机按钮的属性也可以传递它。

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

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>

请注意，您的 header 元素应位于 <thead> 中元素和 <tbody> 中的记录元素。