ASP.NET Dynamic Dataのエンティティテンプレートのカスタマイズと勘所

ASP.NET Dynamic Data活用編（4）

エンティティテンプレートのカスタマイズ

　本連載の中で何度も強調してきましたが、Dynamic Dataは大枠が既に完成されているプロジェクトテンプレートです。スタートページから閲覧したいテーブルの一覧を表示させ、そこから各レコードの値を確認、編集、削除、または新規追加などを実施します。この一連の流れで、可能な限り見方を変えたい。という要望も出てくるかもしれません。そんな時はエンティティテンプレートを使用しましょう（図3～5）。

図3 エンティティテンプレート使用前

図4 エンティティテンプレート使用後～詳細画面～

図5 エンティティテンプレート使用後～編集画面～

エンティティテンプレートとは？

　エンティティテンプレートはDynamic Dataにおける見た目を変えるユーザーコントロールのことです。ユーザーコントロール自身は、/DynamicData/EntityTemplatesフォルダ内に配置します。

　EntityTemplatesフォルダ内には、既定で使用される「詳細表示画面」「編集画面」「新規作成画面」の3種類のエンティティテンプレートが格納されています。この既定のテンプレートはレコードの各項目を1行ごとに表示する仕組みになっています。

　それでは実際にエンティティテンプレートの適用箇所をチェックしてみましょう。

　/PateTemplates/Details.aspxを展開してみると次のようなコードを確認できます。

/PageTemplates/Details.aspxファイルの一部

<asp:FormView runat="server" ID="FormView1" DataSourceID="DetailsDataSource" OnItemDeleted="FormView1_ItemDeleted" RenderOuterTable="false">
    <ItemTemplate>
        <table id="detailsTable" class="DDDetailsTable" cellpadding="6">
            <asp:DynamicEntity runat="server" />
            <tr class="td">
                <td colspan="2">
                    <asp:DynamicHyperLink runat="server" Action="Edit" Text="編集" />
                    <asp:LinkButton runat="server" CommandName="Delete" Text="削除"
                        OnClientClick='return confirm("この項目を削除しますか?");' />
                </td>
            </tr>
        </table>
    </ItemTemplate>
    <EmptyDataTemplate>
        <div class="DDNoItem">該当する項目がありません。</div>
    </EmptyDataTemplate>
</asp:FormView>

　太字で記載されているDynamicEntityサーバーコントロールがエンティティテンプレートで格納できるコンテナとなります。DynamicEntityサーバーコントロールで設定するプロパティとしてModeプロパティがあります。このModeは列挙型で指定しますが、主に編集するEditか、新規作成のInsertを選択することで、対応のエンティティテンプレートを適用する仕組みになっています。

　上記コードを見てお気づきだと思いますが、DynamicEntityサーバーコントロールは<table>タグに格納されていますので、基本的に<tr>／<td>タグで成形することになります。

　エンティティテンプレートの適用箇所でDynamicEntityサーバーコントロールのModeプロパティで適用されるテンプレートが変わることを確認できましたが、実際適用されるエンティティテンプレート側は以下のようになります。

/EntityTemplates/Default.ascxファイルの一部

<asp:EntityTemplate runat="server" ID="EntityTemplate1">
    <ItemTemplate>
        <tr class="td">
            <td class="DDLightHeader">
                <asp:Label runat="server" OnInit="Label_Init" />
            </td>
            <td>
                <asp:DynamicControl runat="server" OnInit="DynamicControl_Init" />
            </td>
        </tr>
    </ItemTemplate>
</asp:EntityTemplate>

　項目の表示を行うラベルと、DynamicControlになります。編集・新規作成も基本的に同じソースになります。差分としてあるのは、編集・新規作成時に発生するイベントハンドラ呼び出しの記載と、DynamicEntityコントロール同様のModeプロパティの記載です。ここで指定されたモードと、メタデータから推論された型により、実行時に表示されるコントロールが動的に変更されます。開発者が明示的にテキストボックスやドロップダウンリストなどのコントロールを切り貼りしなくても良い部分がDynamic Dataのスキャフォールディングによる恩恵だと言えるでしょう（逆に言うとここでは保守の面からもDynamicControl以外を使うべきではありません）。

　なお、エンティティテンプレートは各テーブルごとに適用させることもできます。その場合は以下の命名規則に従ってエンティティテンプレートの名前を付ける必要があります。

エンティティテンプレートの命名規則

機能	命名規則
詳細表示	テーブル名.ascx
編集	テーブル名_Edit.ascx
新規作成	テーブル名_Insert.ascx

　また、ユーザーコントロールと記載しましたが、継承元は"System.Web.DynamicData.EntityTemplateUserControl"になります。

　さて、少し長くなりましたのでエンティティテンプレートについて簡単にまとめます。

• エンティティテンプレートでできること

TR/TDを駆使して詳細表示・編集・新規作成の表示を変更する

• 全体の表示を変更したい場合

Default.ascx/Default_Edit.ascx/Default_Insert.ascxに直接手を加える（既定では1項目1行と縦長）

• テーブルごとに表示を変更したい場合

テーブル名のユーザーコントロールを追加して編集する（作成時は命名規則に注意）

• カスタマイズの際は基本的にラベルとDynamicControlをセットで扱う（テキストボックスやドロップダウンリストなどは使用しない）
• テーブルごとのカスタマイズの場合はコードビハインド側の処理が不要

　何となく特徴を押さえられたのではないでしょうか。それでは実際にエンティティテンプレートのカスタマイズをしてみましょう。本稿では、NorthWindのCustomersテーブルを例に実際にカスタマイズしてみます。