ASP.NET 後端獲取前端 <a> 標籤 href 參數值的正確姿勢

場景

前端超連結 <a href="product-more.aspx?id=123">詳情</a>，後端需在 Page_Load 或目標頁面獲取 id 參數。

常見誤區

嘗試在 發起請求的頁面 後端直接讀取 a 標籤屬性 —— 不可能。瀏覽器點擊超連結發起新的 HTTP GET 請求，伺服器僅能在 目標頁面 (此例為 product-more.aspx) 的 Request.QueryString 中獲取參數。

正確做法

1. 目標頁面接收 (標準方式)

// product-more.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
    string id = Request.QueryString["id"]; // 獲取 "123"
    if (!string.IsNullOrEmpty(id)) { ... }
}

2. 同頁面無刷新獲取 (AJAX)

若需在當前頁面後端處理，必須改用 <button> + AJAX 或 __doPostBack：

<a id="lnkDetail" href="javascript:;" data-id="123" runat="server" onserverclick="lnkDetail_Click">詳情</a>

// 後端
protected void lnkDetail_Click(object sender, EventArgs e)
{
    string id = ((HtmlAnchor)sender).Attributes["data-id"];
}

或純前端 JS：

document.getElementById('lnkDetail').addEventListener('click', function(e) {
    e.preventDefault();
    fetch('Handler.ashx?id=' + this.dataset.id).then(...);
});

核心原則

• <a> 標籤天生導航，參數隨 URL 發送給 目標 URL。
• 若需當前頁面後端介入，必須阻止預設導航行為，改用 Postback/AJAX。
• runat="server" 讓標籤成為伺服器控制項，可在後端存取屬性，但仍需 Postback 觸發。