更新日: 2010 年 2 月 12 日

Visual Basic の内容はこちらに掲載しています。10 行でズバリ!! データドリブン開発 - フィールドのカスタマイズ (フィールド テンプレート) (VB)

このコンテンツのポイント

  • Dynamic Data アプリケーションのフィールド テンプレート (.ascx) をカスタマイズする方法を理解します。
  • さらに、カスタマイズしたフィールド テンプレートを使用するためのメタデータ定義を作成します。

今回紹介するコード

DateTimeCalendar_Edit.ascx

<%@ Control Language="C#" CodeBehind="DateTimeCalendar_Edit.ascx.cs" Inherits="DynamicsWebSite.DateTimeCalendar_EditField" %>

<asp:TextBox ID="TextBox1" runat="server" CssClass="droplist"
    Text='<%# FieldValueEditString %>' Columns="20"></asp:TextBox>

<asp:Calendar ID="Calendar1" runat="server" BackColor="White"
    BorderColor="#999999" CellPadding="4" DayNameFormat="Shortest"
    Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="180px"
    Width="200px" onselectionchanged="Calendar1_SelectionChanged">
    <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
    <SelectorStyle BackColor="#CCCCCC" />
    <WeekendDayStyle BackColor="#FFFFCC" />
    <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
    <OtherMonthDayStyle ForeColor="#808080" />
    <NextPrevStyle VerticalAlign="Bottom" />
    <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
    <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
</asp:Calendar>

<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />
<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator1" CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />
<asp:DynamicValidator runat="server" ID="DynamicValidator1" CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" />

DateTimeCalendar_Edit.ascx.cs

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
    TextBox1.Text = Calendar1.SelectedDate.ToShortDateString();
}

Class1.cs

C#
using System;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace DynamicsWebSite
{
    public class CustomerAddressMetadata
    {
        [DisplayName("変更日")]
        [DisplayFormat(DataFormatString = "{0:yyyy年MM月dd日}")]
        [UIHint("DateTimeCalendar")]
        public object ModifiedDate {get; set;}
    }

    [MetadataType(typeof(DynamicsWebSite.CustomerAddressMetadata))]
    public partial class CustomerAddress
    {
    }
}
 

目次

  1. はじめに
  2. 作成した Dynamic Data アプリケーションの確認
  3. 日時データ用のフィールド テンプレートのカスタマイズ
  4. メタデータの定義
  5. 動作確認

1. はじめに

10 行でズバリ !! データドリブン開発 - ページのカスタマイズ (ページ テンプレート) (C#) で作成した Dynamic Data アプリケーションの各ページで使用されるフィールド テンプレートをカスタマイズする方法を解説します。フィールド テンプレートは ASP.NET Web ユーザー コントロール (.ascx) として定義されているため、比較的簡単にカスタマイズができます。しかし、この方法では、特定のデータ型のデータの表示・編集の際にいつでもカスタマイズした表示が行われることになります。任意のページの特定のデータのみをカスタマイズするためにはメタデータの定義を理解する必要があります。

なお、ここで解説する手順は、10 行でズバリ !! データドリブン開発 - ページのカスタマイズ (ページ テンプレート) (C#) で解説した Visual Studio プロジェクトが完成していることを前提としています。(以降、実行結果の画面に一部違いがありますが、10 行でズバリ !! データドリブンな Web アプリケーション開発 (ASP.NET Dynamic Data) (C#) で作成したプロジェクトを使用することもできます。)

ページのトップへ


2. 作成した Dynamic Data アプリケーションの確認

10 行でズバリ !! データドリブン開発 - ページのカスタマイズ (ページ テンプレート) (C#) で作成した Visual Studio プロジェクト (手順通りであれば DynamicsWebSite プロジェクト) を開きます。 このプロジェクトは Dynamic Data アプリケーション標準の UI を使用して、EDM (Entity Data Model: 概念データ モデル) 経由でデータベースにアクセスする Web アプリケーションです。

[F5] キー (または、[Ctrl] + [F5] キー) を押して Web アプリケーションを実行します。

図 1 トップ ページ

データベース内の各テーブル名 (正確には EDM の各エンティティ) のリストを含んだトップ ページ (Default.aspx) が表示されます。

今回は、[CustomerAddress] テーブルのリンクをクリックします。

図 2 CustomerAddress テーブルの初期ページ

テーブルのデータが表示されます。

任意の行の [編集] リンクをクリックします。

図 3 CustomerAddress のエントリの編集 初期ページ

エントリの編集ページが表示されます。画面を確認すると、[ModifiedDate] フィールドは日付のデータが登録されていますが、日時 (DateTime) 表示 (時間も表示) になっています。また、カレンダー コントロールではなく、テキストボックス コントロールのため、値の変更が面倒であったり、間違った値を入力してしまう可能性もあります (日時として存在しない値を入力した場合、入力検査コントロールがエラーを表示します)。そこで、ここでは、以下の 2 点をカスタマイズします。

  • [ModifiedDate] フィールドのみ日時表示ではなく日付表示にする
  • エントリの編集画面で [ModifiedDate] フィールドのみカレンダー コントロールを表示する

ページのトップへ


3. 日時データ用のフィールド テンプレートのカスタマイズ

日時データを編集するためのフィールド テンプレートは [DynamicsWebSite] - [DynamicData] - [FieldTemplates] フォルダーにある、DateTime_Edit.ascx によって定義されています。前述したように、このファイルを直接編集してカスタマイズを行うことも可能ですが、その場合、この Web アプリケーション内のすべての日時データがカスタマイズした形式で使用されることになります。特定のデータのみ表示や編集ページをカスタマイズするには、ASP.NET Web ユーザー コントロール (.ascx) を新たに作成することになるのですが、ここでは既存の DateTime_Edit.ascx をコピーしてからクラス名を変更し、内容をカスタマイズすることにします。

[ソリューション エクスプローラー] で [DynamicsWebSite] - [DynamicData] - [FieldTemplates] フォルダーにある、DateTime_Edit.ascx をコピーします。

図 4 DateTime_Edit.ascx をコピーする

ファイル名を DateTimeCalendar_Edit.ascx に変更します。

[ソリューション エクスプローラー] でDateTimeCalendar_Edit.ascx を展開し、DateTimeCalendar_Edit.ascx.cs ファイルをダブルクリックします。DateTimeCalendar_Edit.ascx.cs ファイルがコード エディターで開きます。

クラス名を変更するため、以下のコードを探します。

public partial class DateTime_EditField : System.Web.DynamicData.FieldTemplateUserControl

クラス名を DataTimeCalendar_EditField に変更するため、上記コードを以下のように変更します。

public partial class DateTimeCalendar_EditField : System.Web.DynamicData.FieldTemplateUserControl

[ソリューション エクスプローラー] でDateTimeCalendar_Edit.ascx を展開し、DateTimeCalendar_Edit.ascx.designer.cs ファイルをダブルクリックします。DateTimeCalendar_Edit.ascx.designer.cs ファイルがコード エディターで開きます。

クラス名を変更するため、以下のコードを探します。

public partial class DateTime_EditField {

クラス名を DataTimeCalendar_EditField に変更するため、上記コードを以下のように変更します。

public partial class DateTimeCalendar_EditField {

[ソリューション エクスプローラー] で DateTimeCalendar_Edit.ascx ファイルをダブルクリックします。DateTimeCalendar_Edit.ascx ファイルが [ソース] 表示で開きます。

クラス名を変更するため、1 行目の以下のコードを探します。

Inherits="DynamicsWebSite.DateTime_EditField"

クラス名を DataTimeCalendar_EditField に変更するため、上記コードを以下のように変更します。

Inherits="DynamicsWebSite.DateTimeCalendar_EditField"

これで独自のフィールド テンプレートの定義ができました。ここに、以降の手順でカレンダー コントロールを追加するため、DateTimeCalendar_Edit.ascx ファイルを [デザイン] 表示で開きます。(なお、ここまでの手順で [エラー一覧] ウィンドウを表示していた場合、編集中のファイルに CssClass の参照エラー (警告) が表示されるかもしれませんが、すべて無視してください。これは CSS ファイル (Site.css) への参照ができないことが原因ですが、参照はマスター ページで定義されており、実行時には参照が解決され、エラーにはなりません。)

[ツール ボックス] から [Calendar] コントロールをドロップします。コントロールの右上に表示されるスマート タグ ([>] ボタン) をクリックし、[オートフォーマット] をクリックして任意のスタイルを選択します。

図 5 カレンダー コントロールを配置

ドロップしたカレンダー コントロールをダブルクリックします。

作成されたイベント プロシージャ (Calendar1_SelectionChanged) に以下のコードを追加します。

TextBox1.Text = Calendar1.SelectedDate.ToShortDateString();

これで、カレンダーで選択した日付がテキストボックスに表示されるようになりました。フィールド テンプレートのカスタマイズは完了です。ビルドしてエラーがないことを確認してください。

ページのトップへ


4. メタデータの定義

ここまでの手順で、フィールド テンプレートを作成しましたが、「作成したフィールド テンプレートをどのデータを表示するために使用するか?」については一切定義していません。そこで、メタデータの定義をおこないます。今回の場合、[CustomerAddress] テーブル (正確にはエンティティ) の [ModifiedDate] フィールドで使用するためのメタデータが必要になります。このため、CustomerAddress クラスの部分クラス (パーシャル クラス) を作成し、メタデータの定義と関連付けを行う必要があります。

[プロジェクト] メニューから [クラスの追加] をクリックします。

図 6 クラスの追加

[ファイル名] は既定のまま [追加] をクリックします。

Class1.cs 内のコードを次のように記述します。

C#
using System;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace DynamicsWebSite
{
    public class CustomerAddressMetadata
    {
        [DisplayName("変更日")]
        [DisplayFormat(DataFormatString = "{0:yyyy年MM月dd日}")]
        [UIHint("DateTimeCalendar")]
        public object ModifiedDate {get; set;}
    }

    [MetadataType(typeof(DynamicsWebSite.CustomerAddressMetadata))]
    public partial class CustomerAddress
    {
    }
}
 

上記では、CustomerAddressMetadata クラスのプロパティとして ModifiedDate を定義しています。そして、このプロパティの列ヘッダーと表示形式を DisplayName、DisplayFormat で指定しています。今回のポイントとなるのは UIHint 属性です。この値として「DateTimeCalendar」を指定することで、表示の際には DateTimeCalendar.ascx を参照し (見つからなかった場合、既定の DateTime.ascx を使用します)、編集の際には _Edit が付加された、DateTimeCalendar_Edit.ascx (今回作成したファイル) を参照します。

最後に、上記の CustomerAddress 部分クラス (パーシャル クラス) の MetadataType 属性によって、上記メタデータが [CustomerAddress] テーブルのデータに関連付けられます。

ページのトップへ


5. 動作確認

[F5] キーを押して実行すると、トップ ページのテーブルのリストが表示されるので、[CustomerAddress] テーブルのリンクをクリックします。

図 7 カスタマイズした CustomerAddress テーブル のページ

上図の通り、列ヘッダーが [変更日] と日本語表示になり、日付データの表示も年月日形式になっています。これは、上記のメタデータで指定したものです。

任意の行の [編集] リンクをクリックします。

図 8 カスタマイズした CustomerAddress のエントリの編集 ページ

[変更日] フィールドの編集にカレンダー コントロールが表示されます。(テキストボックスに表示されているデータは DB から取得した元のサンプル データなので日時形式となっています。) 任意の日付をクリックすると日時形式ではなく日付形式で [変更日] が設定されます。[更新] リンクをクリックし、正しく保存されることを確認します。

今回は他の日付型のデータはこのような表示にはなりません。特定のデータのみカスタマイズした表示になるようにメタデータを定義したためです。


Code Recipe .NET Framework デベロッパー センター

ページのトップへ