Question

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

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

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

这是我的控制器代码：

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>元素中。

Ajax分页正在复制_layout页面，同时使用分页来替换页面内容

1 个答案: