DropDownList 無 OnClientClick？隱藏 Button 代理實現客戶端邏輯

問題背景

GridView 分頁搭配 UpdatePanel 時，LinkButton 可用 OnClientClick 觸發前端邏輯（如顯示 UpdateProgress），但 DropDownList 無此屬性。

解決架構：隱藏 Button 代理模式

1. 前端：DropDownList 觸發隱藏 Button

<asp:DropDownList ID="ddlNeedPage" runat="server" 
    AutoPostBack="true" 
    onchange="return selectChange();"></asp:DropDownList>

<asp:Button ID="btn11" runat="server" 
    Style="display:none;" 
    OnClick="btn11_Click" 
    OnClientClick="return clearData2();" />

<input type="hidden" id="hidNeedPage" runat="server" />

2. JavaScript：寫入隱藏欄位並觸發 Button

function selectChange() {
    if ($("select option:selected").length) {
        $("#btn11").click(); // 觸發隱藏按鈕
    }
}

function clearData2() {
    var val = $("#<%=ddlNeedPage.ClientID%>").val();
    $("#hidNeedPage").val(val); // 傳遞分頁索引
    $("#<%=_gvGuest.ClientID%>").empty();
    $("#lblMessage").hide();
    return true; // 允許 PostBack
}

3. 後端：讀取隱藏欄位執行分頁

protected void btn11_Click(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(hidNeedPage.Value))
    {
        _gvGuest.PageIndex = Convert.ToInt32(hidNeedPage.Value);
        BindData();
    }
}

LinkButton 參考寫法

<asp:LinkButton ID="lnkFirstPage" runat="server" 
    OnClientClick="return clearData();" 
    CommandName="Page" CommandArgument="First">第一頁</asp:LinkButton>

function clearData() {
    $("#<%=_gvGuest.ClientID%>").empty();
    $("#lblMessage").hide();
    return true;
}

優缺點分析

此模式適用於「必須 PostBack 但需先跑前端邏輯」的情境，是 DropDownList 缺乏 OnClientClick 的實用替代方案。