从 PagedListPager 调用 JavaScript 函数不起作用答案

【问题标题】：Calling JavaScript function from PagedListPager doesn't work从 PagedListPager 调用 JavaScript 函数不起作用
【发布时间】：2021-11-09 15:18:16
【问题描述】：

我有一个Html PagedList，如下所示，

<div id="contentPager">
    @Html.PagedListPager(Model, page => Url.Action("ServerPaging", new { page }))
</div>

这是分页器的输出 HTML，

<div id="contentPager">
     <div class="pagination-container">
        <ul class="pagination">
            <li class="active">
                 <a>1</a>
            </li>
            <li>
                 <a data-ajax="true" data-ajax-method="Get" data-ajax-mode="replace" data-ajax-update="#targetContainer" href="/MyController/ServerPaging?page=2">2</a>
            </li>
            <li>
                 <a data-ajax="true" data-ajax-method="Get" data-ajax-mode="replace" data-ajax-update="#targetContainer" href="/MyController/ServerPaging?page=3">3</a>
            </li>
        </ul>
     </div>
</div>

我希望在我从该寻呼机单击页码而不执行服务器操作ServerPaging 时调用单击事件Javascript 函数。这就是我实现 Javascript 事件监听器的方式。

$(document).on("click", "#contentPager a", function () {
            //............
        });

但它仍在调用服务器操作ServerPaging。

【问题讨论】：

您附加点击处理程序的PagedListPager 呈现的结果 HTML 是什么？您能否提供一个 minimal reproducible example 仅包含您试图阻止其他操作发生的客户端代码？您是否只是在某处缺少preventDefault() 和/或stopPropagation()？
你在哪里调用/执行这个函数？
@Tushar，javascript 与寻呼机代码在同一页面中。
@David，我已经更新了我的问题。

标签： javascript asp.net-mvc asp.net-core razor-pages pagedlist

【解决方案1】：

从href 属性中删除 URL 并设置为 void 函数。

    <a data-ajax="true" data-ajax-method="Get" data-ajax-mode="replace" 
data-ajax-update="#targetContainer" href="javascript:void(0)" data-pageno="2" >2</a>

那么需要从事件函数中的data-pageno属性中获取页码：

$(document).on("click", "#contentPager a", function () {
    var pNo = this.data("pageno");
    alert(pNo);
});

【讨论】：

html 结果只是 Html.PagedListPager 的运行时输出，不能这样改变。