ASP2.0によるクライアントコールバックの実装
かねてより、ボタンクリックのサーバーポストによるWeb Formのリロードが気になってましたが、
ASP2.0+VisualStudio2005によるクライアント・コールバックの実装によってこれを解決しました。
それでは、備忘録です。
ちょっと長いですが、お付き合い下さいマセ～
[目的]
異なるボタンクリックによって、埋め込みHTML画面を、画面全体のリロードすることなく切り換える
（異なるボタンとは、idが異なる複数のボタンです）
[各層での役割]
・サーバー層
①クリックされたImageButtonのidをクライアントコールバックで取得する
②ImageButtonクリック時、サーバーポストしないようにする
③取得したidによって、埋め込みHTMLのタグを生成する
（objectタグで埋め込みします）
④生成したタグをクライアントに通知する
・クライアント層
①埋め込みHTMLのタグを動的に表現する仕組みを作る
②サーバーからの通知を受信するスクリプトを作成する
[実装]
・サーバー層
クライアントコールバックを実現するには、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")
②ImageButtonクリック時、サーバーポストしないようにする
ImageButtonのプロパティ、OnClientClickに①で取得したスクリプトを定義します。
(例)
top_button.OnClientClick = ceRef & ";return false;"
#サーバーへのポストを回避するため、必ず";return false;"を追加してください
複数ボタンが存在する場合は、その数だけ、上記を繰り返す実装にします。
（当然、idは変えて下さいね）
③取得した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"
・
・
以下、省略
④生成したタグをクライアントに通知する
(例)
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としてください
②サーバーからの通知を受信するスクリプトを作成する
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］
皆様のご参考になれば幸いです。。