.NET TIPS [ASP.NET AJAX]DragPanelコントロールのパネル位置を保存するには?[2.0のみ、C#、VB]山田 祥寛2007/12/27 |
![]() |
|
「TIPS:[ASP.NET AJAX]DragPanelコントロールでドラッグ可能なパネルを定義するには?」では、DragPanelコントロール(DragPanelExtender)を利用してドラッグ・パネルを定義する方法について紹介した。
もっとも、上のTIPSのように、ただ単にパネルをドラッグできるだけでは、あまり実用的でない。そこで本稿では、プロファイル機能と連携して、ドラッグしたパネル位置をプロファイル情報に保存してみることにしよう。この機能を利用することで、例えばパネルの配置を自由にカスタマイズ可能なパーソナライズ対応ページを作成することができる。
![]() |
現在のパネル位置を自動的にプロファイルに保存 |
2回目以降のアクセス時には、最後にアクセスしたときの位置にパネルが表示される。 |
それではさっそく、具体的な実装手順を追っていくことにしよう。なお前述したように、本サンプルを作成するに当たっては前掲したTIPSのDragPanel.aspxをベースにしている。DragPanelコントロールで利用可能なプロパティなども含め、DragPanel.aspxについての詳細はそちらで確認していただきたい。
1. プロファイル機能の準備を行う
プロファイル機能を利用するに当たっては、あらかじめアプリケーション構成ファイル(Web.config)に対して、以下のようにプロファイル・プロパティの登録を行っておく必要がある。
|
|
ASP.NET AJAXのプロファイル・サービスを有効にするコード(Web.config) |
ASP.NET AJAXによるプロファイル機能については、「TIPS:[ASP.NET AJAX]クライアントサイド・スクリプトからASP.NETのプロファイル機能を利用するには?」が詳しい。プロファイル連携に関する詳細は、併せてそちらのTIPSも参照いただきたい。
ここでは、プロファイル機能をJavaScriptコードから利用するためには、サーバサイドで利用可能なプロファイル・プロパティの定義(<profile>要素)、クライアントサイドで利用可能なプロファイル・プロパティの定義(<profileService>要素)が、それぞれ必要であることを押さえておこう。
<profileService>要素のreadAccessProperties/writeAccessProperties属性には、“*”(サーバサイドで有効化されたプロファイル・プロパティをすべて有効化)を指定することも可能であるが、意図しないプロファイル情報のクライアントサイドへの公開はセキュリティ・ホールの一因になる可能性もある。原則として、クライアントサイドに公開するプロファイル・プロパティは明示的に宣言するのが好ましい。
2. パネル位置を保存/設定するクライアントサイド・スクリプトを記述する
次に、DragPanel.aspxにプロファイル情報にアクセスするためのクライアントサイド・スクリプトを追加しよう。
|
|
現在のパネル位置を保存/ロードするためのクライアントサイド・スクリプト(DragPanel.aspx) |
Sys.Services.ProfileServiceクラスに関する詳細は、先述の「TIPS:[ASP.NET AJAX]クライアントサイド・スクリプトからASP.NETのプロファイル機能を利用するには?」を参照していただくとして、ここで注目していただきたいのは、DragPanelコントロール(正確にはDragPanelコントロールのクライアントサイド機能であるBehaviorオブジェクト)が公開しているlocationプロパティだ。
locationプロパティは、現在のパネル位置をx、yプロパティとして持つ無名オブジェクトとして表す。ここでは、ページ・ロード時に取得したプロファイル情報(DragX、DragY)をset_locationメソッドで設定し、mouseoutイベントのタイミングでその時点でのパネル位置をget_locationメソッドで取得したうえで、プロファイル情報に書き戻しているというわけだ。
もっとも、ここで注意していただきたいのは、get_locationメソッドがパネルを移動していない初期状態で無名オブジェクトを返すのに対して、パネルをいったん移動してしまうと「x ,y」の文字列形式で座標情報を返すという点だ。ここでは、移動した後のみ(つまり、get_locationメソッドの戻り値がオブジェクトでない場合のみ)プロファイル保存を行いたいので、typeof関数で戻り値型の判定を行っている。
[参考]pageLoad関数と$addHandlerショートカット関数 | |
サンプル内で登場しているpageLoad関数、$addHandler関数はいずれもMicrosoft AJAX Libraryであらかじめ定義されている関数である。pageLoad関数はページ・ロード時に呼び出される関数、そして、$addHandler関数は要素とイベント・ハンドラとをひも付けるための関数だ。 $addHandler関数の一般的な構文は、以下のとおりである。
|
以上を理解したら、さっそく、作成したサンプル・プログラムを実行し、実際にプロファイル機能の動作を確かめてみよう。パネルを移動したうえでいったんページを閉じ、再びページにアクセスしたときに前回のパネル位置が維持されていれば成功である。
利用可能バージョン:.NET Framework 2.0のみ カテゴリ:Webフォーム 処理対象:ASP.NET AJAX 使用ライブラリ:DragPanelコントロール 関連TIPS:[ASP.NET AJAX]DragPanelコントロールでドラッグ可能なパネルを定義するには? 関連TIPS:[ASP.NET AJAX]クライアントサイド・スクリプトからASP.NETのプロファイル機能を利用するには? |
![]() |
「.NET TIPS」 |
- 第2回 簡潔なコーディングのために (2017/7/26)
ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている - 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう - 第1回 明瞭なコーディングのために (2017/7/19)
C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える - Presentation Translator (2017/7/18)
Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
![]() |
|
|
|
![]() |