CodeZine(コードジン)

特集ページ一覧

ASP.NET Dynamic Dataのフィールドテンプレートのカスタマイズと検証機能

ASP.NET Dynamic Data活用編(3)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/01/18 14:00
目次

データフィールドをカスタマイズする

 第1回目でも触れたようにDynamic Dataをフル活用するにはカスタマイズがある程度必要です。特にデータフィールドはエンティティのデータを表示するユーザーコントロールなので、この表示や動作を変えることはそのままDynamic Dataの使い勝手に直結します。

 本稿では、Control Toolkitを使用したサーバーサイドのカスタマイズを紹介します。

[コラム]ASP.NET AJAX Control Toolkitとは?

 ASP.NET標準で搭載されているAJAX拡張コントロールや機能はASP.NET AJAXと言います。Control ToolkitはMicrosoftとコミュニティが共同で開発したASP.NET AJAXベースのコントロール群です。現在はCodePlexの専用サイトからダウンロードができます。

独自のDynamicコントロールを作成する

 今回は既存のデータフィールドをカスタマイズして独自のデータフィールドを作成します。完成図は図1~2のようになります。

図1 TextBoxWatermark Extenderの動作例
図1 TextBoxWatermark Extenderの動作例
図2 Calendar Extenderの動作例
図2 Calendar Extenderの動作例

 表示時は変わりありませんが、入力時に透かしによるアナウンス文とカレンダーコントロールによる入力補助の動作を付加しています。また、Dynamic DataにはjQueryが標準追加されているので、jQuery UIとの連携を検討しても良いでしょう。しかし、Dynamic Dataはクライアントサイドスクリプトを多用するよりも、サーバーサイドコントロールを上手く活用し、迅速に構築する方がおススメです(Dynamic Data自身が開発工数を削減して動的データアプリを作成するという目的があるため、簡単なカスタマイズ部分は本末転倒にならないようにしましょう)。

データフィールドコントロールの仕組みについて

 データフィールドコントロールはテンプレート内の既存の物を確認する事でどのように作られて、どのように動作するのかを知ることができます。データフィールド自身は大抵、表示用と編集用が用意されています(例えば、DateTime.ascx/DateTime_Edit.ascxなど)。表示部分は大抵リテラルによる表示とリンク、チェックボックスなどに収束されるので、ここでは編集と新規作成時に使用されるXXX_Edit.ascxに関する記述を見てみましょう。

 編集用のデータフィールドでは、通常の編集画面と同様な機能を実装します。

  • 既存データの表示(新規の場合は空で表示)
  • 入力値に対する検証

 検証部分はデータ型により変わるので、ここでは編集時に値を設定するためのコードに注目してみます。

DateTime_Edit.ascx内のコード
<%@ Control Language="C#" CodeBehind="DateTimeCT_Edit.ascx.cs" Inherits="CodeZine3.DynamicData.FieldTemplates.DataTimeCT_EditField" %>

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

 FieldValueEditStringプロパティは編集時のみ、該当行の列の値を取得し、表示します。ご覧のとおりこれはTextBoxコントロールのTextプロパティに埋め込みバインド式で記載されています。コードビハインド側では初期化並びに、検証に関する設定を記述します。

 それでは、Control Toolkitを使用したデータフィールドの作成に入ります。

Control Toolkitを利用したデータフィールドの作成

 配置場所となるFieldTemplatesフォルダ上で[追加]-[新しい項目]を選択して、[動的データ フィールド]の名前を「DateTimeCT.ascx」と名前を付けて追加します。追加されるユーザーコントロールは1つだけでなく、表示用と編集用が追加されます(DateTimeCT.ascx/DateTimeCT_Edit.ascx)。編集並びに、新規作成用は'_Edit'がベース名の後ろに自動的に付加されるので、表示用ユーザーコントロール自身の命名規則は特にありません。

 今回はDateTimeにカレンダー機能と透かし機能を入れるため、DateTime_Edit.ascxの内容をDateTime_Edit.ascxにコピーして利用します。内容をコピー後に、名前の整合性を取るために、DateTime/DateTime_Editと記載されていた部分をDateTimeCT/DateTimeCT_Editと変更してください。続いて、DateTimeCT_Edit.ascxファイルにあるTextBoxコントロールにフォーカスをあてると、図3のようなスマートタグが表示されます。

図3 Control Toolkitの使用
図3 Control Toolkitの使用

 エクステンダーの追加ボタンをクリックし、表示されるダイアログからCalendar Extenderと、TextBoxWaterMark Extenderを選択して[OK]を押します。各エクステンダーのプロパティ設定は次のとおりです。

Calendar ExtenderとTextBoxWatermark Extenderの設定
コントロール プロパティ 設定
Calender Extender DaysModeTitleFormat null
  Format "yyyy/MM/dd"
  TodaysDateFormat null
TextBoxWatermark Extender WatermarkText 年月日を選択してください

 ソースとしては以下のようになります。

DateTimeCT_Edit.ascx設定例
<%@ Control Language="C#" CodeBehind="DateTimeCT_Edit.ascx.cs" Inherits="CodeZine3.DynamicData.FieldTemplates.DataTimeCT_EditField" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

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

<asp:TextBoxWatermarkExtender ID="TextBox1_TextBoxWatermarkExtender" 
    runat="server" Enabled="True" TargetControlID="TextBox1" 
    WatermarkText="年月日を選択してください">
</asp:TextBoxWatermarkExtender>
<asp:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" 
    Enabled="True" TargetControlID="TextBox1" DaysModeTitleFormat="" 
    Format="yyyy/MM/dd" TodaysDateFormat="">
</asp:CalendarExtender>

<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" CssClass="DDControl DDValidator" ControlToValidate="TextBox1" Display="Static" Enabled="false" />
<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator1" CssClass="DDControl DDValidator" ControlToValidate="TextBox1" Display="Static" Enabled="false" />
<asp:DynamicValidator runat="server" ID="DynamicValidator1" CssClass="DDControl DDValidator" ControlToValidate="TextBox1" Display="Static" />
<asp:CustomValidator runat="server" ID="DateValidator" CssClass="DDControl DDValidator" ControlToValidate="TextBox1" Display="Static" EnableClientScript="false" Enabled="false" OnServerValidate="DateValidator_ServerValidate" />

 以上でお手軽ではありますが、カスタムデータフィールドの完成です。続いて、データとの関連付けを行います。

外観と動作を変更するUIHint属性

 データフィールドをデータと関連付ける為にはメタデータとUIHint属性を使用します。メタデータEDMのパーシャルクラスを作成し、属性クラスを指定します。メタデータにUIHint属性を使用して指定されたデータフィールドは、実行時に指定したデータを表示、並びに編集時にレンダリングされます。つまり、UIHint属性は、カスタムデータフィールドを作成した時に、必ず使用する属性です。実際に使用例を見てみましょう。

UIHint属性指定例
using System;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace CodeZine3
{
    // モデルクラスに関連付けるメタデータクラスの指定
    [MetadataType(typeof(MetaNorthWind))]
    public partial class Employees
    { 
    }

    // Employeesエンティティ型のプロパティを記載
    public class MetaNorthWind
    {

        [DisplayName("誕生日")]
        [UIHint("DateTimeCT")]
        public DateTime BirthDate { get; set; }

        [DisplayName("雇用日")]
        [UIHint("DateTimeCT")]
        public DateTime HireDate { get; set; }
    }
}

 UIHint属性の記載はデータフィールドの名前(_Edit前までの共通部分)を指定するだけです。DisplayName属性は見出し行または列の表示を上書きできます。

 以上の設定で実行すると図1~2のような動作が実現できます。データフィールドのカスタマイズはまさにWeb Formの開発生産性の高さを体感できる部分とも言えそうです。

 続いて、データを検証するための属性クラスのカスタマイズを紹介します。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ASP.NET Dynamic Data活用編

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト ナオキ(ナオキ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5