Dynamic Data アプリケーションのカスタマイズ


3 月も 3 分の 1 を過ぎたというのにぜんぜん暖かくなりませんね。


これでも桜の開花予想は例年より早いというのだから不思議です。


・・・・。(すみません、とくにオチはありません。)


 


さて、今回は DynamicData で作成したアプリケーションをカスタマイズする方法について書きたいと思います。


DynamicData を使用したアプリケーションの作成方法については以下の記事に書いてますので、必要のある方はご覧ください。


【tech・Days フォローアップ】Dynamic Data について
http://blogs.msdn.com/osamum/archive/2009/02/20/tech-days-dynamic-data.aspx


 


DynamicData アプリケーションのカスタマイズ


DynamicData アプリケーションが既定で表示するのは、データベース内のテーブルの内容そのままなので、多くの場合、ユーザーに見せる情報としては適さない場合があります。


誰にだって見せたくないフィールドのひとつやふたつ、ありますよね?


他人にはもっと違うフィールド名で呼んでほしい、とか思うことがありますよね?


DynamicData ではメタデータクラスを定義することでこれらの機能を実現することができます。


"メタデータクラス"、と聞くと ??? と思われるかも知れませんが、ようするにテーブルに紐付けられたクラスの partial クラスを定義して、そこに MetadataType 属性を付けるだけです。


説明を読むよりも、実際に作って動かしてみた方がよくわかると思いますので、実際に作成してみましょう。


なお、以下の手順は、この記事の内容で作成された DynamicData アプリケーションを作業対象としています。


【tech・Days フォローアップ】Dynamic Data について


[作成手順]



  1. プロジェクトエクスプローラーで、プロジェクト名を右クリックし、表示されたショートカットメニューより [新しい項目の追加] を選択
     
  2. [新しい項目の追加] ダイアログボックスが表示されるので、[テンプレート] リストビューより "クラス" を選択し、[名前 (N)] テキストボックスを "employee.cs" として [追加] ボタンをクリック
     
  3. employee.cs をオープンし、内容を以下のコードに書き換え






    using System;
    using System.Web;
    using System.ComponentModel;
    using System.ComponentModel.DataAnnotations;


    [MetadataType(typeof(employee.employeeMetaData))]
    public partial class employee
    {


        public class employeeMetaData
        {
            //emp_id 列の表示名を定義
            [DisplayName("社員 ID")]
            public object emp_id { get; set; }


            //fname の表示名を定義
            [DisplayName("名")]
            public object fname { get; set; }


            //minit列の表示名を非表示に設定
            [ScaffoldColumn(false)]
            public object minit { get; set; }


            //lname 列の表示名を定義
            [DisplayName("姓")]
            public object lname { get; set; }


            //job_id 列を非表示に設定
            [ScaffoldColumn(false)]
            public object job_id { get; set; }


            //job_lvl 列を非表示に設定
            [DisplayName("ジョブレベル")]
            [System.ComponentModel.DataAnnotations.Range(1,300)]
            public object job_lvl { get; set; }


            //hire_date 列の表示名を定義
            [DisplayName("採用日")]
            [DisplayFormat(DataFormatString = "{0:yyyy年MM月dd日}")]
            public object hire_date { get; set; }


            //jobs 列の表示名を定義
            [DisplayName("役職")]
            public object jobs { get; set; }


            //publishers 列の表示名を定義
            [DisplayName("出版社")]
            public object publishers { get; set; }
        }


  4. [F5] キーを押下してプロジェクトを実行し、employee テーブルを表示

表示された employee テーブルの表には、以下のような変化が見られると思います。

  1. フィールド名が日本語に変更
  2. 以下のフィールドが非表示に

    • minit

    • job_id

    • job_lvl

  3. hire_date (採用日) フィールドの書式が変更

次に、適当なレコードの [編集] リンクをクリックして画面を編集用に切り替え、[ジョブレベル] フィールドに 40000 と入力し [更新] リンクをクリックしてみてください。


以下のような警告が表示されるようになっています。 



設定については、コード内のコメントを見れば一目了然だと思いますので、ここでの説明は MSDN ライブラリへのリンクに代えさせていただきます。


MetaTable.DisplayName プロパティ
http://msdn.microsoft.com/ja-jp/library/system.web.dynamicdata.metatable.displayname.aspx


DisplayFormatAttribute クラス
http://msdn.microsoft.com/ja-jp/library/system.componentmodel.dataannotations.displayformatattribute.aspx


MetaTable.SortColumn プロパティ
http://msdn.microsoft.com/ja-jp/library/system.web.dynamicdata.metatable.sortcolumn.aspx


 


DynamicData アプリケーションへのカスタムコントロールの適用


DynamicData アプリケーションにカスタムコントロールを追加することができます。


手順としては、用途に応じたフォルダ内にカスタムユーザーコントロール (ascx) を作成し、メタデータクラスで作成したユーザーコントロールを使用するように指定するだけです。


これも実際に作業したほうが良く分かりますので、手順を案内させていただきます


今回は手順の説明をするだけなので、簡単にテキストボックスの背景を変えただけのユーザーコントロールを追加してみたいと思いますが、いまいちパンチに欠ける、と思われる方は手順を追記しますので、以下の URL から ASP.NET AJAX Control Toolkit を入手していただき Visual Studio に追加してください。


『AJAX Control Toolkit - Release: 20820』
http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=16488


ASP.NET AJAX Control Toolkit のインストール方法はここで 紹介されています。


ここが知りたい! ASP.NET AJAX Control Toolkitを入れてみよう
http://www.microsoft.com/japan/seminar/msdn/webcast/bg/51.ajax.controlkit/play.aspx


DynamicData アプリケーションへのカスタムコントロールの適用手順は以下のとおりです。


[手順]



  1. ソリューションエクスプロ―ラー内、フォルダ [DynamicData] - [FieldTemplates] を展開
     
  2. Text_Edit.ascx を右クリックしてコピー(※)し、同じフォルダ内に貼り付け
    (※)独自に作成しても良いですが、今回は手順を短くするために既存のコントロールをコピーして使用します。
     
  3. コピーした *.ascx ファイルの名前を myText_Edit.ascx に変更
     
  4. myText_Edit.ascx をデザインビューで表示
     
  5. Web フォームデザイナ上に表示されているテキストボックスを選択
     
  6. プロパティ ウィンドウで [BackColor] に "Red" を指定

    ASP.NET AJAX Control Toolkit をインストールしていない方は 9 に進んでください。
     
  7. 再度テキストボックスを選択し、右上に表示されるタスクメニュー("[<]" の表示のボタン ) から [エクステンダの追加] を選択
     
  8. [エクステンダー ウィザード] が表示されるので "CalendarExtender" を選択して [OK] ボタンをクリック
     
  9. ソリューションエクスプロ―ラーから employee.cs (※) をオープン
    (※)デーブルの表示を変更する際に追加した"メタデータクラス"のファイル
     
  10. hire_date 列に対応したプロパティに、以下のように UIHint 属性を追加する
    UIHint 属性に指定する引数は、myText_Edit.ascx の _ (アンダーパー) までの部分です。





    //hire_date 列の表示名を定義
    [DisplayName("採用日")]
    [DisplayFormat(DataFormatString = "{0:yyyy年MM月dd日}")]
    [UIHint("myText")] //カスタムコントロールの指定
    public object hire_date { get; set; } 


  11. [F5] キーを押下してプロジェクトを実行し、employee テーブルを表示
     
  12. 任意のレコードの [編集] リンクをクリック

"採用日" フィールドの編集用テキストボックスの背景色が赤くなっていることが確認できると思います。



ASP.NET AJAX Control Toolkit を使用してカレンダーコントロールを指定した場合は、テキストボックスの中にカーソルを移動するとカレンダーが表示されます。



なお、今回は単純にカレンダーコントロールを追加しただけですので、表示の際の大きさなどが適切ではありませんが、実際に使用する際は CSS を適用するなどして美しく整形していただければと思います。


もっと深く DynamicData アプリケーションのカスタマイズをされたいという方は以下のドキュメントもご参照ください。


方法 : カスタム ページ テンプレートを使用して個々のテーブルのレイアウトをカスタマイズする
http://msdn.microsoft.com/ja-jp/library/cc488537.aspx


ASP.NET データ バインド コントロールへの動的な動作の追加
http://msdn.microsoft.com/ja-jp/library/cc488544.aspx


方法 : データ モデルでデータ フィールドの表示をカスタマイズする
http://msdn.microsoft.com/ja-jp/library/cc488522.aspx


方法 : ASP.NET Dynamic Data の既定のフィールド テンプレートをカスタマイズする
http://msdn.microsoft.com/ja-jp/library/cc488533.aspx

――― ・ ――― ・ ――― ・ ――― ・ ――― ・ ――― ・ ――― ・ ――― ・ ―――


おしらせ


同僚の辻さんが共同執筆した本が出版されました。


モバイルと SaaS の組み合わせという、"なるほど" と思わせる切り口で書かれています。


『モバイルSaaS/スマートフォンの衝撃 (単行本) 』
津田 邦和 (著), 辻 康博 (著), 中山 五輪男 (著), 齋藤 壽勝 (著), 徳納 尚成 (著


ちなみに辻さんは3章で S+S Azure をモバイルと事業者の切り口から執筆されています。


ご興味の湧いた方はぜひ、よろしくお願いいたします。


 


Real Time Analytics

Clicky

Skip to main content