［ASP.NET AJAX］DragPanelコントロールのパネル位置を保存するには？［2.0のみ、C#、VB］

.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）に対して、以下のようにプロファイル・プロパティの登録を行っておく必要がある。

<?xml version="1.0"?>

<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">

  ……中略……

  <system. web>

    ……中略……

    <!--プロファイル・プロパティDragX、DragYを定義（サーバサイド）-->

    <profile enabled="true">

      <properties>

        <add name="DragX"

              type="System.Int32" defaultValue="100" />

        <add name="DragY"

              type="System.Int32" defaultValue="100"/>

      </properties>

   </profile>

  </system. web>

  ……中略……

  <system. web.extensions>

    <scripting>

      <webServices>

        ……中略……

        <!--ASP.NET AJAXからアクセス可能なプロファイル・プロパティを宣言-->

        <profileService enabled="true" 

          readAccessProperties="DragX,DragY"

          writeAccessProperties="DragX,DragY" />

      </webServices>

      ……中略……

    </scripting>

  </system. web.extensions>

  ……中略……

</configuration>

ASP.NET AJAXのプロファイル・サービスを有効にするコード（Web.config）

　ASP.NET AJAXによるプロファイル機能については、「TIPS：［ASP.NET AJAX］クライアントサイド・スクリプトからASP.NETのプロファイル機能を利用するには？」が詳しい。プロファイル連携に関する詳細は、併せてそちらのTIPSも参照いただきたい。

　ここでは、プロファイル機能をJavaScriptコードから利用するためには、サーバサイドで利用可能なプロファイル・プロパティの定義（<profile>要素）、クライアントサイドで利用可能なプロファイル・プロパティの定義（<profileService>要素）が、それぞれ必要であることを押さえておこう。

　<profileService>要素のreadAccessProperties／writeAccessProperties属性には、“*”（サーバサイドで有効化されたプロファイル・プロパティをすべて有効化）を指定することも可能であるが、意図しないプロファイル情報のクライアントサイドへの公開はセキュリティ・ホールの一因になる可能性もある。原則として、クライアントサイドに公開するプロファイル・プロパティは明示的に宣言するのが好ましい。

2. パネル位置を保存／設定するクライアントサイド・スクリプトを記述する

　次に、DragPanel.aspxにプロファイル情報にアクセスするためのクライアントサイド・スクリプトを追加しよう。

<script type="text/javascript">



// ページ・ロード時に、プロファイル情報からパネル位置を初期化

function pageLoad() {



  // DragPanelExtenderを取得

  var d = $find("dpe");



  // プロファイル情報をロード

  Sys.Services.ProfileService.load(

    null,

    // プロファイル情報のロードに成功した場合、パネル位置に

    // プロファイル情報のDragX／DragYプロパティを設定

    function() {

      d.set_location(

        {x:Sys.Services.ProfileService.properties.DragX,

         y:Sys.Services.ProfileService.properties.DragY}

      )

    }

  );

}



// ドラッグ・パネルのヘッダ部（pHeader）のmouseoutイベント発生時に

// その時点でのパネル位置をプロファイル情報に保存

$addHandler(

  $get("pHeader"),

  "mouseout",

  // mouseoutイベント・ハンドラを定義

  function(e) {



    // DragPanelExtenderを取得

    var d = $find("dpe");



    // 現在のパネル位置を取得

    var loc = d.get_location();



    // get_locationメソッドの戻り値がオブジェクトでない

    // （「x,y」の文字列である）場合、座標情報を取り出し、

    // それぞれプロファイルに保存

    if (typeof loc != "object") {

      var xy = loc.split(",");

      Sys.Services.ProfileService.properties.DragX = xy[0];

      Sys.Services.ProfileService.properties.DragY = xy[1];

      Sys.Services.ProfileService.save(

        null,

        function() {},

        function() {

          window.alert("プロファイル保存に失敗しました。");

        },

        null

      );

    }

   }

);

</script>

現在のパネル位置を保存／ロードするためのクライアントサイド・スクリプト（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関数の一般的な構文は、以下のとおりである。

$addHandler(要素, イベント名, イベント・ハンドラ)

　以上を理解したら、さっそく、作成したサンプル・プログラムを実行し、実際にプロファイル機能の動作を確かめてみよう。パネルを移動したうえでいったんページを閉じ、再びページにアクセスしたときに前回のパネル位置が維持されていれば成功である。

利用可能バージョン：.NET Framework 2.0のみ
カテゴリ：Webフォーム　処理対象：ASP.NET AJAX
使用ライブラリ：DragPanelコントロール
関連TIPS：［ASP.NET AJAX］DragPanelコントロールでドラッグ可能なパネルを定義するには？
関連TIPS：［ASP.NET AJAX］クライアントサイド・スクリプトからASP.NETのプロファイル機能を利用するには？

この記事と関連性の高い別の.NET TIPS

		［ASP.NET AJAX］クライアントサイド・スクリプトからASP.NETのプロファイル機能を利用するには？
		［ASP.NET］ユーザーごとのプロファイル情報を管理するには？
		［ASP.NET］匿名ユーザーごとのプロファイル情報を保存するには？
		［ASP.NET］メンバシップAPIでユーザー情報の編集を行うには？
		［ASP.NET AJAX］DragPanelコントロールでドラッグ可能なパネルを定義するには？

このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー）により自動抽出したものです。

generated by

「.NET TIPS」

Insider.NET フォーラム新着記事

第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える

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

注目のテーマ

Insider.NET 記事ランキング

本日月間

＠IT