ASP.NET 分頁點擊觸發重複執行 ShowList() 的根因與修復

現象描述

在 ASP.NET 頁面中，點擊分頁碼觸發事件執行 ShowList() 方法，該方法通過 AJAX 獲取數據並追加到表格。但執行完畢後，頁面竟會自動跳轉至 $(function(){showList()}) 再次執行一遍，導致數據重複加載。

根本原因

分頁碼通常使用 <a> 標籤實現，默認帶有 href 屬性。當點擊時，若未阻止默認行為，瀏覽器會執行鏈接跳轉導致頁面刷新。頁面刷新後，$(document).ready() 或 $(function(){}) 中的初始化代碼再次執行，從而調用 ShowList()。

解決方案

方法一：阻止默認事件（推薦）

在點擊事件處理函數中返回 false 或調用 event.preventDefault()：

// jQuery 寫法
$('.page-link').click(function(e) {
    e.preventDefault(); // 阻止鏈接默認跳轉
    ShowList($(this).data('page'));
    return false; // 兼容舊版瀏覽器
});

方法二：修改 href 屬性

將分頁鏈接的 href 設置為無效值：

<a href="javascript:void(0);" class="page-link" data-page="2">2</a>
<a href="javascript:return false;" class="page-link" data-page="3">3</a>

方法三：使用 button 替代 a 標籤

語義更清晰，天然無跳轉行為：

<button type="button" class="page-btn" data-page="2">2</button>

最佳實踐建議

• 優先使用 button 或 <a href="javascript:void(0)"> 實現純前端交互元素。
• 事件綁定統一使用 e.preventDefault()，代碼更規範、可維護性更強。
• 檢查是否有多重綁定導致事件觸發多次，必要時使用 .off().on() 確保單一綁定。

總結

分頁點擊導致頁面刷新並重複執行初始化，本質是 <a> 標籤默認跳轉行為未被阻止。通過阻止默認事件或修改元素類型，即可徹底解決重複加載問題。