在部分视图中使用 PagedList 和 Javascript 更新寻呼机答案

【问题标题】：Updating Pager with PagedList and Javascript in Partial Views在部分视图中使用 PagedList 和 Javascript 更新寻呼机
【发布时间】：2014-11-06 00:48:08
【问题描述】：

我有一个视图用户，它调用部分视图_TableWithPager：

    <div id="tableWithPagerId">
    @Html.Action("LoadUserTable","Controller", Model)
    </div>

在我的控制器中：

public ActionResult LoadUserTable(object model)
{
   PagedList userList = getUserList(bla bla bla)...
   return View("_TableWithPager", userList);
}

在 _TableWithPager 内部，我还有其他部分视图 _TableUser 和该表的寻呼机：

@model PagedList<user>
<div id="TableContainerId">
   @Html.Partial("_TableUser");
</div>
<div id="Paginator">
   @Html.PagedListPager( Model, page => Url.Action("LoadUserTable", new { page = page, /*more params...*/ }) )
</div>

我用javascript获取pager的点击事件：

$(function() {
    $('#Paginator').on('click', 'a', function() {
        $.ajax({
            url: this.href,
            type: 'GET',
            cache: false,
            success: function(result) {
                $('#TableContainerId').html(result);
            }
        });
        return false;
    });
});

一切正常。但是，如果我单击第二个页面将正确呈现在“TableContainerId”表 div 中，并且不会更新寻呼机。那是个问题。如果我将 javascript 更改为在“tableWithPagerId” div 中呈现，则表格和寻呼机将被更新，但我必须再次重新加载 javascript。

有谁知道我该如何解决这个问题？我搜索了在加载脚本时将 javascript 放入部分视图中，但它不起作用。

谢谢。

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-partialview pagedlist

【解决方案1】：

在局部视图中调用将不起作用。一段时间后，我得到了一个完美的简单解决方案。只需在重新加载 html 数据后调用 javascript 函数。像这样：

function bind() {
    $('#Paginator').on('click', 'a', function() {
        $.ajax({
            url: this.href,
            type: 'GET',
            cache: false,
            success: function(result) {
                $('#TableContainerId').html(result);
                bind(); // called this java script code again
            }
        });
        return false;
    });
});

【讨论】：

【解决方案2】：

除了 Marco 的具体回答，我想提出一个通用的解决方案：

你可以使用这个 javascript 库（我写的）：https://github.com/pjbonestroo/PagedList

它解决了重新加载、分页等问题，并且是完全可定制的。它包括文档。

它还有一些不错的功能，比如

过滤和排序（客户端或服务器端，根据偏好）
去抖动以防止刷新次数过多
可自定义的按钮和样式，取决于行数据
轻松向行添加/删除事件侦听器（并在触发时获取行数据）

注意：使用此库您将不再使用部分视图...

看看，如果你还在浏览器中开发分页列表。

【讨论】：