Tweet

.NET TIPS ［ASP.NET AJAX］AJAX対応ページで［戻る］ボタンを有効にするには？（クライアントサイド編）［3.5、C#、VB］ 山田 祥寛 2009/06/18

　「TIPS：［ASP.NET AJAX］AJAX対応ページで［戻る］ボタンを有効にするには？（サーバサイド編）」で紹介したように、ASP.NET 3.5ではScriptManagerコントロールが履歴ポイントの管理に対応しており、Ajax対応ページでもブラウザの［戻る］ボタンを有効にできる。

　前述のTIPSでは、基本的にサーバサイドのイベント・ハンドラを実装することで、この機能を有効にしたが、ASP.NET AJAXでは同様の機能をクライアントサイド・スクリプトでも実装できるようになっている。本稿では、先のTIPSで実装した機能をクライアントサイド・スクリプトで書き換えてみよう。

　さっそく、具体的な手順を見ていく。なお、サンプルの挙動については、前述のTIPSの内容も併せてご参照いただきたい。

1. 新規のWebフォームを作成する

　まずは、履歴ポイントに対応していない――現在時刻と「こんにちは、●○さん！」というメッセージを表示するだけの機能を作成する。新規のWebフォーム（HistoryCli.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でコントロールを配置してほしい。

HitoryCli.aspxのフォーム・レイアウト

以下のコントロールを配置。

ScriptManagerコントロール（IDは「manager」）。   Div（IDは「lblTime」）。   Input（Text）（IDは「txtName」）。   Input（Button）（IDは「btnSubmit」）。   Div（IDは「lblResult」）。

　また、Input（Button）のvalueプロパティには、「登録」という値をセットしておく。Visual Studioによって自動生成されたコードは、次のとおりである。

2. イベント・ハンドラを追加する

　次に、ページ・ロード時に時刻を、ボタン・クリック時にメッセージを、それぞれ表示するためのクライアントサイド・スクリプトを追加する。

　pageLoadは、Microsoft AJAX Library（以降、MS AJAX Lib）で定義された予約関数で、ページのロード時に呼び出される（特にイベント・ハンドラの登録は必要ない）。ここでは、ページ・ロードのタイミングで現在時刻を表示するとともに、$addHandler関数でボタン・クリック時のイベント・ハンドラを登録しているわけだ*1。

　ここまでの手順を終えたら、サンプルを実行してみよう。以下の画面のように、［登録］ボタンをクリックしたタイミングで、対応するメッセージが表示されれば、とりあえずコードは正しく動作している。

［名前］を入力して［登録］ボタンをクリック

サンプルの途中結果（履歴機能を有効にしていない状態）

　この時点では、履歴機能を有効にしていないので、ボタン・クリックの後もブラウザの［戻る］ボタンは有効になっていない点に注目してほしい。

3. 履歴機能を有効化する

　履歴機能を有効にするには、ScriptManagerコントロールのEnableHistoryプロパティをTrue（デフォルトはFalse）に設定しておく必要がある。サーバサイド編でも同様に設定したが、クライアントサイド編でもこの設定は省略できないので注意されたい。

4. 履歴ポイント対応のコードを追加する

　あとは、履歴ポイントの登録と復元のためのコードを実装するだけだ。

function pageLoad() {   // ラベル「lblTime」に現在時刻を表示   $get('lblTime').innerHTML = new Date();   // ［登録］ボタンをクリックしたときの挙動を登録   $addHandler($get('btnSubmit'), 'click',     function() {       // テキストボックスの内容をラベル「lblResult」に反映       var msg = String.format('こんにちは、{0}さん！',         $get('txtName').value);       $get('lblResult').innerHTML = msg;       // 履歴ポイントを追加       Sys.Application.addHistoryPoint(         {           name: $get('txtName').value,           msg: msg         }, msg);     ……     }   );   // ［戻る］［進む］ボタン・クリック時の挙動を定義   Sys.Application.add_navigate(     function(sender, e) {       if (e.get_state().name != undefined) {         // キーnameの値が空でない場合に、         // テキストボックス／ラベルの値を設定         $get('txtName').value = e.get_state().name;         $get('lblResult').innerHTML = e.get_state().msg;       } else {         // キーnameの値が空である場合、         // テキストボックス／ラベルも空に         $get('txtName').value = '';         $get('lblResult').innerHTML = '';       }     }   );      …… }

履歴ポイントの登録と復元のためのコード（HistoryCli.aspx）

　履歴ポイントを登録するのは、Sys.ApplicationオブジェクトのaddHistoryPointメソッドの役割だ（）。これは、ScriptManagerコントロールのAddHistoryPointメソッドに相当するメソッドであると考えればよいだろう。引数には、先頭から履歴ポイントの情報（オブジェクト・リテラルの形式）、ページ・タイトルを指定できる（ページ・タイトルは省略可）。ここでは、name／msgというキーで、それぞれ入力された名前と整形済みのメッセージとを登録している。

　そして、履歴ポイントからページの状態を復元しているのがの部分である。add_navigateメソッドは、navigateイベントに対応するイベント・ハンドラを登録するためのメソッドだ。サーバサイドのNavigateイベント・ハンドラに相当するものと考えればよいだろう。

　navigateイベント・ハンドラで履歴ポイントの状態を取得するには、第2引数eから「e.get_state.キー名」のように記述すればよい。ここでは、履歴ポイントのnameキーが空でない場合に、あらかじめ退避しておいたname／msgキーの値をラベル、テキストボックスにセットし直しているわけだ。これによって、［戻る］［進む］ボタンをクリックしたタイミングで、元の状態を復元することができる。

　以上を理解できたら、もう一度、サンプルを実行してみよう。名前を入力し、［登録］ボタンをクリックすると、ブラウザに履歴が追加されること、［戻る］ボタンをクリックすると、ページが元の状態に戻ることを確認してほしい。

［戻る］ボタンをクリック

サンプルの最終的な結果

［戻る］［進む］ボタンによって、ページの状態が操作前（後）の状態に変化する。

　コードの見栄えは、サーバサイドで実装した場合と、クライアントサイドで実装した場合とで、ずいぶん違うように見えるかもしれない。しかし、コードを追っていけば分かるように、考え方自体は双方とも変わらないので、それぞれのコードを見比べながら理解を深めてほしい。

この記事と関連性の高い別の.NET TIPS ［ASP.NET AJAX］AJAX対応ページで［戻る］ボタンを有効にするには？（サーバサイド編） クラス・ライブラリ内部で呼び出されているメソッドを調べるには？ ［ASP.NET AJAX］Webサービス・ブリッジ機能により構造化データを受け渡しするには？（基本編） ［ASP.NET AJAX］クライアントサイド・スクリプトからASP.NETの認証機能を利用するには？ ［ASP.NET AJAX］クライアントサイド・スクリプトからASP.NETのプロファイル機能を利用するには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）