从PagedListPager调用JavaScript函数

时间:2014-02-06 15:06:33

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

是否可以从@ 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)

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

1 个答案:

答案 0 :(得分:2)

这个@Html.PagedListPager帮助器所做的就是吐出一些包含链接的HTML来执行分页。所以你可以订阅这些链接的点击事件并AJAX化它们:

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

需要注意的重要事项:

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