公開 2006-09-14 01:55 投稿者 mafactory
タグ

ASP2.0によるクライアントコールバックの実装

かねてより、ボタンクリックのサーバーポストによるWeb Formのリロードが気になってましたが、
ASP2.0+VisualStudio2005によるクライアント・コールバックの実装によってこれを解決しました。

それでは、備忘録です。
ちょっと長いですが、お付き合い下さいマセ〜

[目的]
異なるボタンクリックによって、埋め込みHTML画面を、画面全体のリロードすることなく切り換える
(異なるボタンとは、idが異なる複数のボタンです)

[各層での役割]
・サーバー層
@クリックされたImageButtonのidをクライアントコールバックで取得する
AImageButtonクリック時、サーバーポストしないようにする
B取得したidによって、埋め込みHTMLのタグを生成する
(objectタグで埋め込みします)
C生成したタグをクライアントに通知する

・クライアント層
@埋め込みHTMLのタグを動的に表現する仕組みを作る
Aサーバーからの通知を受信するスクリプトを作成する


[実装]
・サーバー層
クライアントコールバックを実現するには、ICallbackEventHandlerインターフェースを必ず実装します。

(例)

Prtial Class WebForm1
        Inherits System.Web.UI.Page
        Implements System.Web.UI.ICallbackEventHandler
        ' コールバック処理の結果を格納するためのプライベート変数
        Private result As String

#resultは、クライアントへの通知情報を格納する変数です


@クリックされたImageButtonのidをクライアントコールバックで取得する
GetCallbackEventReferenceにてImageButtonのidを取得するスクリプトを定義します。

(例)
#ここでは、ImageButtonのidをtop_buttonとしています
#cbResultとは、クライアント側でのサーバーからの通知を受信する関数名です

Dim ceRef As String
ceRef = Page.ClientScript.GetCallbackEventReference( _
        Me, _
        "document.getElementById('top_button').id", _
        "cbResult", _
        "null")

 

AImageButtonクリック時、サーバーポストしないようにする
ImageButtonのプロパティ、OnClientClickに@で取得したスクリプトを定義します。

(例)
top_button.OnClientClick = ceRef & ";return false;"
#サーバーへのポストを回避するため、必ず";return false;"を追加してください

複数ボタンが存在する場合は、その数だけ、上記を繰り返す実装にします。
(当然、idは変えて下さいね)

 

B取得したidによって、埋め込みHTMLのタグを生成する

(例)
Public Sub RaiseCallbackEvent(ByVal arg As String) Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent
    Select Case arg
         Case "top_button"
                    Me.result = ""
                    Me.result += "<object data='test.html'"
                    Me.result += " type='text/html' width='608' height='420'>"
                    Me.result += "有限会社 M.a.Factory トップ(TOP)ページを表示しています。"
                    Me.result += "</object>"
        Case "ennkaku_button"
   ・
   ・
  以下、省略


C生成したタグをクライアントに通知する

(例)
Public Function GetCallbackResult() As String Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult
    Return Me.result
End Function

 

・クライアント層
@埋め込みHTMLのタグを動的に表現する仕組みを作る
もともと、サーバー側でLiteralによる動的生成されていたタグを、
クライアントで実行するようにしなければいけません。

そこで、今回は、レイヤーを用いることにしました。

(例)
<div id="layer1" style="Z-INDEX: 10; DISPLAY: block;POSITION:absolute;LEFT:200;TOP:94;" class="open"></div>

#NN系で用いられるdocument.layerはIEでは非サポートなので使用しません
#今回は、NNとIE両方で使用できる<DIV>を使います
#レイヤーを表示させるには、DISPLAY: blockとしてください


Aサーバーからの通知を受信するスクリプトを作成する
WebForm1のソース画面で、以下のスクリプトを定義します。

(例)
<script language="javascript" type="text/javascript">
<!--
        function cbResult(result,context) {
            var objID=document.getElementById('layer1');
            objID.innerHTML=result;
        }
//-->
</script>

#resultがサーバーから通知されたタグ情報です
#それを、innerHTMLに流しこめば動的表示が可能になります


これで、ブラウザ上でボタンをクリックする毎に、上記のcbResult関数が動作することになり、
埋め込みHTMLを「Web Formをリロードすることなく」切り換えることが可能になりました。

それが、このページになります。

[参考ページ]
ページをリロードせずにサーバーとやり取りする方法
ページを再読み込みせずにサーバと通信を行うには?[2.0のみ、C#、VB]

皆様のご参考になれば幸いです。。

 

 

コメントの通知

この投稿にコメントが付いた場合にメールを受信するには、登録してください。ここ

また次のフィードから、お気に入りのRSSリーダーを使って最新の状態を知ることもできます。 コメントのRSSフィード

コメント

コメントはありません
どのような感想ですか?
(必須) 
(オプション)
(必須)