捨棄PostBack，採用CallBack(範例)

2015-01-09

411
0
2015-01-22

摘要:test

文章來源 http://blog.yam.com/jerrytung/article/3639749

由於PostBack 是透過 Submit 和 Reload，讓 Client 端和 Server 端互動，但當控制項一多時，一個頁面 PostBack 回去，再重新 Reload 回來，會造成畫面一閃一閃的，若頻寬不足，還會導致動作異常不流暢。

因此想要在不換頁的狀況下就可以更新 Client 端的網頁，可以採用 CallBack 的機制。

首先要讓頁面支援 CallBack，必須在 Page 實作 System.Web.UI.ICallbackEventHandler 這個 interface，
並且實作此 interface 的兩個方法：

string GetCallbackResult ()
void RaiseCallbackEvent (string EventArgument)

CallBack整個流程原理：
Step1.按下 HtmlButton

Step2.執行 CallBack 機制

Step3.CallBack 機制會在 Client 端背景呼叫 Server 端的 .aspx.cs 程式，此步並不會引發 PostBack(這時 Server 端的『RaiseCallbackEvent』會接收到 Client 端傳入的值[此例為 CallBackButtonArg]。接著，會透過『GetCallbackResult』將運算過的值回傳到 Client 端)

Step4.Server 端處理完之後，會回呼 Client 端的 JavaScript 函式『ReceiveServerData』，因此剛才透過『GetCallbackResult』回傳的值，會被『ReceiveServerData』接收到。

Step5.顯示結果，完成 CallBack 機制。

其中『ReceiveServerData(arg, context) 』內容的 CallBackButtonArg 為 server 回傳的資料(也就是從『GetCallbackResult』傳回的字串資料), 而 context 則是第二個變數, 這個變數是 for client side javascript 自己在完成 callback 時使用的, 也就是在上面看到的 'JerryTung' 這個部分, 這個變數注意是 client side 的(當然可以從 server side 生成後放入, 但不會在 callback runtime 時改變)。

完整的程式碼及註解如下：

----------------------------------Default.aspx--------------------------------------

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>未命名頁面</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <input id="CallBackButton" type="button" value="button" runat="server" /></div>
    </form>
</body>
</html>

===========================================================

----------------------------------Default.aspx.cs----------------------------------

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
string strCallback;

    //處理從 Client 端傳來的值，其中 eventArgument 為觸發事件的參數
    public void RaiseCallbackEvent(String eventArgument)
    {
        strCallback = eventArgument + " " + DateTime.Now.ToString("hh:mm:ss");
    }

    //處理要回傳給 Client 端的值
    public string GetCallbackResult()
    {
        return strCallback;
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        //建立一段可以觸發 CallBack 的 JavaScript 指令碼
        string cbReference = Page.ClientScript.GetCallbackEventReference(this, "'CallBackButtonArg'", "ReceiveServerData", "'JerryTung'");
        //將剛才建立好的 CallBack 的 JavaScript 程式碼，註冊到 HtmlButton 的 onclick 事件上
        CallBackButton.Attributes["onclick"] = cbReference;

        //產生一段 JavaScript 函式，用來接收並處理 CallBack 機制執行後從 Server 端傳來的回傳值
        string strScript = "function ReceiveServerData(arg, context){ document.getElementById('" + TextBox1.ClientID + "').value = '# ' + arg + ' @ ' + context; }";
        //在頁面上插入 strScript 的 JavaScript 程式碼
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "myscript", strScript, true);
    }
}

===========================================================

回首頁