ASP.NET AJAX 回呼機制實現 JSON 物件傳遞與反序列化

概述

在 ASP.NET Web Forms 早期，ICallbackEventHandler 介面提供了一種輕量級的伺服器回呼方式，配合 JSON 可在無 UpdatePanel 的情況下實現前後端物件互通。本文完整示範從前端發送 JSON 物件、伺服器反序列化處理、到回傳字串結果的完整流程。

前端頁面 (ASPX)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ASP.NETA_JAX.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AJAX JSON 物件回呼示範</title>
    <script type="text/javascript">
        function CallServer() {
            // 直接傳送 JSON 物件字串
            ServerSum("{name:'linyijia',age:'21'}");
        }
        function GetRegister(rg, context) {
            document.getElementById("TxtRegister").value = rg;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <br />
            用戶名:<input id="TxtNum1" type="text" />
            <br />
            服務器回傳:<input id="TxtRegister" type="text" /><br />
            <button id="SumBtn" type="button" onclick="CallServer()">送出</button>
        </div>
    </form>
</body>
</html>

後端代碼 (C#)

using System;
using System.Web.UI;
using System.Web.Script.Serialization;

public partial class _Default : System.Web.UI.Page, ICallbackEventHandler
{
    Users u = null;

    protected void Page_Load(object sender, EventArgs e)
    {
        // 取得客戶端回呼參考，指定回呼函數 GetRegister
        string CallBackFun = Page.ClientScript.GetCallbackEventReference(this, "arg", "GetRegister", "context");
        // 動態產生客戶端可呼叫的 ServerSum 函數
        string RegisterFun = string.Format("function ServerSum(arg,context){{{0};}}", CallBackFun);
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "ServerSum", RegisterFun, true);
    }

    string mssage = string.Empty;

    #region ICallbackEventHandler 成員
    public string GetCallbackResult()
    {
        // 回傳給前端的字串
        return "服務器:你好,你的用戶名為:" + u.Name + " 你的年齡為 " + u.Age;
    }

    public void RaiseCallbackEvent(string eventArgument)
    {
        // 反序列化前端傳來的 JSON 字串
        JavaScriptSerializer js = new JavaScriptSerializer();
        u = js.Deserialize<Users>(eventArgument);
    }
    #endregion
}

// 資料傳輸物件 (DTO)
public class Users
{
    public string Name { get; set; }
    public string Age { get; set; }
}

運作原理說明

1. 註冊回呼：GetCallbackEventReference 產生呼叫伺服器的 JavaScript 代碼，綁定 GetRegister 作為完成回呼。
2. 前端發送：呼叫 ServerSum(JSON字串)，瀏覽器發起非同步 POST 至同一頁面。
3. 伺服器處理：RaiseCallbackEvent 接收 eventArgument (JSON 字串)，使用 JavaScriptSerializer 反序列化為 Users 物件。
4. 回傳結果：GetCallbackResult 回傳字串，瀏覽器執行 GetRegister 顯示於輸入框。

優缺點與現代替代方案

建議：新專案請優先考慮 ASP.NET Core Web API + fetch/axios，或至少升級至 ASP.NET AJAX 4.0+ 的 PageMethods / ScriptService。