ASP.NET 2.0 Client Callback 實作 Ajax 無刷新回呼

Callback 與 Postback 差異

ICallbackEventHandler 介面實作

伺服器端控制項實作此介面即可處理客戶端回呼：

public interface ICallbackEventHandler {
    string GetCallbackResult();           // 回傳結果給客戶端
    void RaiseCallbackEvent(string eventArgument); // 處理客戶端傳來的參數
}

完整範例：即時驗證使用者名稱

public partial class CheckUser : Page, ICallbackEventHandler {
    private string _callbackResult;

    protected void Page_Load(object sender, EventArgs e) {
        // 註冊客戶端回呼參考
        string callbackRef = ClientScript.GetCallbackEventReference(
            this, "arg", "OnCallbackReturn", "context", "OnCallbackError", true);
        string script = $"function CheckUser(arg, context) {{{callbackRef};}}";
        ClientScript.RegisterClientScriptBlock(GetType(), "CheckUser", script, true);
    }

    public void RaiseCallbackEvent(string eventArgument) {
        // 模擬資料庫查詢
        bool exists = UserRepository.Exists(eventArgument);
        _callbackResult = exists ? "exists" : "available";
    }

    public string GetCallbackResult() {
        return _callbackResult;
    }
}

客戶端 JavaScript

<input type="text" id="txtUser" onblur="CheckUser(this.value, null)" />
<span id="msg"></span>

<script>
function OnCallbackReturn(result, context) {
    var msg = document.getElementById('msg');
    if (result === 'exists') {
        msg.innerHTML = '<span style="color:red">帳號已存在</span>';
    } else {
        msg.innerHTML = '<span style="color:green">帳號可用</span>';
    }
}
function OnCallbackError(error, context) {
    console.error('Callback 錯誤:', error);
}
</script>

GetCallbackEventReference 參數詳解

public string GetCallbackEventReference(
    Control control,           // 實作 ICallbackEventHandler 的控制項 (通常是 this)
    string argument,           // 客戶端傳遞的參數 (JS 變數名稱)
    string clientCallback,     // 成功時的 JS 函數名稱
    string context,            // 內容參數 (傳給回呼函數)
    string clientErrorCallback,// 錯誤時的 JS 函數名稱
    bool useAsync              // true=非同步, false=同步
)

GridView 內建 Callback 應用

GridView 的分頁與排序即使用 Callback 技術：

<asp:GridView ID="gvData" runat="server" 
    AllowPaging="true" AllowSorting="true"
    OnPageIndexChanging="gvData_PageIndexChanging"
    OnSorting="gvData_Sorting">
</asp:GridView>

設定 EnableSortingAndPagingCallbacks="true" 即可啟用無刷新分頁/排序（需瀏覽器支援）。

自訂控制項整合 Callback

public class AutoCompleteTextBox : TextBox, ICallbackEventHandler {
    protected override void OnPreRender(EventArgs e) {
        base.OnPreRender(e);
        string callbackRef = Page.ClientScript.GetCallbackEventReference(
            this, "arg", "AutoComplete_Receive", "context", "AutoComplete_Error", true);
        string script = $@"
            function AutoComplete_Request(arg, context) {{{callbackRef};}}
            function AutoComplete_Receive(result, context) {{ /* 更新下拉清單 */ }}
            function AutoComplete_Error(err, context) {{ console.error(err); }}";
        Page.ClientScript.RegisterClientScriptBlock(GetType(), "AutoComplete", script, true);
        
        // 綁定輸入事件
        Attributes["onkeyup"] = "AutoComplete_Request(this.value, null)";
    }

    public void RaiseCallbackEvent(string eventArgument) {
        _suggestions = SearchService.GetSuggestions(eventArgument);
    }

    public string GetCallbackResult() {
        return JsonSerializer.Serialize(_suggestions);
    }
}

效能與安全考量

• ViewState 大小：Callback 仍會傳送 ViewState，大型頁面請設定 ViewStateMode="Disabled"
• 驗證：Callback 繞過一般驗證控制項，伺服端需自行驗證輸入
• 錯誤處理：務必實作 clientErrorCallback 避免靜默失敗
• 替代方案：現代專案建議使用 ASP.NET AJAX (UpdatePanel) 或 Web API + fetch/axios

Callback vs 現代 Ajax 比較