从 PagedListPager 调用 JavaScript 函数答案

【问题标题】：Call JavaScript function from PagedListPager从 PagedListPager 调用 JavaScript 函数
【发布时间】：2014-03-03 14:39:54
【问题描述】：

是否可以从 @Html.PagedListPager(in here) 中调用 JavaScript 函数？

我有一个按钮，它调用以下功能并轻松执行所有应有的操作：

function fetchResults() {
    $.get('@Url.Action("Search", "Notifications")',
        {
            device: "Device"
        },
        function (data) {
            $('#results').html(data);
        })
};

现在，当我单击 PagedListPager 上的页码时，我该如何做同样的事情？

目前我的寻呼机重新加载页面，这是我要避免的主要事情。

这是我的寻呼机：

@Html.PagedListPager((IPagedList)ViewBag.NotificationsPage, page => 
    Url.Action("Search", "Notifications", new
    {
        device = "Device",
        page = page
    }),
    PagedListRenderOptions.PageNumbersOnly)

也许有更好的方法来做到这一点。我们将不胜感激。

【问题讨论】：

为什么不使用 JQuery 并且不显眼地劫持点击事件呢？我在我的一些应用程序中执行此操作，如果由于某种原因事件被取消挂钩，它会优雅地降级。
感谢您的提醒。
Ajax Pagination in PagedList.MVC using partial Page的可能重复

标签： javascript jquery asp.net-mvc razor pagedlist

【解决方案1】：

这个@Html.PagedListPager 助手所做的只是吐出一些包含链接的HTML 来执行分页。所以你可以订阅这些链接的点击事件并对它们进行 AJAXify：

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

需要注意的重要事项：

我以活泼的方式订阅了点击事件。这意味着如果我们替换 AJAX 请求成功回调中的链接，这个点击事件处理程序将继续工作
您可能需要调整$(document).on('click', 'a', function() { 选择器，该选择器具有相当的包容性，并且仅针对此寻呼机生成的链接。例如，看看它们是否不在某些包含 div 或其他内容中，在这种情况下，您可以使用类似于 $('.pager').on('click', 'a', function() { 的内容。
在 success 回调中，您可能需要调整 $('#results') 选择器以定位包含实际结果的 div，该结果将使用控制器操作返回的部分 HTML 进行刷新。
谈到部分 HTML 和控制器操作，您显然需要调整在 AJAX 请求中调用的控制器操作，以返回 PartialView 而不是仅包含更新记录和新分页链接的完整视图。

【讨论】：

谢谢。经过必要的修改后，它运行良好。