Question

我有一个用户调用部分视图_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来获取寻呼机的点击事件：

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

一切正常。但是，如果我点击第二页将会在＆＃34; TableContainerId＆＃34;表格div正确，寻呼机将不会更新。这是一个问题。如果我在＆＃34; tableWithPagerId＆＃34;中更改javascript以进行渲染div，表格将更新和寻呼机，但我必须重新加载javascript。

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

谢谢。

Answer 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;
    });
});

Answer 2

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

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

它解决了重新加载，分页等问题，并且可以完全自定义。它包括文档。

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

过滤和排序（客户端或服务器端，首选）
为防止过多刷新而进行的辩论
可自定义的按钮和样式，取决于行数据
轻松地向行添加/删除事件侦听器（并获取有关触发的行数据）

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

如果您仍在浏览器中开发分页列表，请查看。

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

2 个答案: