iT邦幫忙

11

[ASP.NET 控制項實作 Day31] TBContextMenu 控制項三種不同模式的 Click 動作(續)

  • 分享至 

  • xImage
  •  

接續上一文
六、測試程式
在頁面拖曳 TBContextMenu,設定 Delete1、Delete2、Delete3 三個 TBMenuItem。其中 Delete1 設定 OnClientClick 屬性;Delete2 設定 AutoPostBack 屬性為 True,會以 PostBack 方法引發伺服端的 Click 事件;Delete3 設定 AutoCallBack 屬性為 True,會以 CallBack 方法引發伺服端的 Click 事件,並設定 ClientCallBack 屬性決定接收成功的伺服器事件結果的用戶端事件處理常式名稱。

        <bee:TBContextMenu ID="TBContextMenu1" runat="server" ControlID="Label1">
            <Items>
                <bee:TBMenuItem Key="open" Text="Open" ImageUrl="~/image/folder.png" OnClientClick="alert('open');" />
                <bee:TBMenuItem Key="email" Text="Email" ImageUrl="~/image/email.png" OnClientClick="alert('email');" />
                <bee:TBMenuItem Key="save" Text="Save" ImageUrl="~/image/disk.png" OnClientClick="alert('save');" />
                <bee:TBMenuItem Key="delete1" Text="Delete1" ImageUrl="~/image/cross.png" OnClientClick="alert('client click');" />
                <bee:TBMenuItem Key="delete2" Text="Delete2" ImageUrl="~/image/cross.png"  AutoPostBack="true" />
                <bee:TBMenuItem Key="delete3" Text="Delete3" ImageUrl="~/image/cross.png"  AutoCallBack="true" ClientCallBack="ReceiveServerData"/>
            </Items>
        </bee:TBContextMenu>

在伺服端 Click 事件撰寫測試程式碼,可以利用 Me.IsCallback 來判斷目前是否在 CallBack 狀態中。

    Protected Sub TBContextMenu1_Click(ByVal sender As Object, ByVal e As Bee.Web.WebControls.TBContextMenu.ClickEventArgs) Handles TBContextMenu1.Click
        If Not Me.IsCallback Then
            Me.ClientScript.RegisterStartupScript(Me.GetType, "alert", _
               String.Format("alert('PostBack Click: {0}');", e.Key), True)
        Else
            e.CallbackResult = e.Key
        End If
    End Sub

另外 Delete3 選單項目有設定 ClientCallBack="ReceiveServerData",所以 aspx 程式碼中會有 ReceiveServerData JavaScript 函式,來接收 CallBack 時由伺服端傳回的結果。

    <script type="text/javascript">
        function ReceiveServerData(rValue) {
            alert('CallBack Click: '+rValue);
        };
    </script>

執行程式,先選取 Delete1 選單項目,會執行在 OnClientClick 屬性指定的用戶端指令碼。

當選取 Delete2 選單項目時,會產生 PostBack 動作並引發伺服端的 Click 事件,在 Click 事件中會輸出要執行的用戶端指令碼。

當選取 Delete3 選單項目時,會產生 CallBack 動作並引發伺服端的 Click 事件,在 Click 事件中設定 e.CallbackResult 屬性值,並將 e.CallbackResult 的結果回傳給用戶端的 ReceiveServerData 函式來處理。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言