方法 : Dynamic Data コントロールでデータ フィールドの外観と動作をカスタマイズする

  • [アーティクル]

更新 : 2007 年 11 月

ASP.NET Dynamic Data は、フィールド テンプレートを使用してテーブルの個々のデータ フィールドをレンダリングします。通常、フィールド テンプレートは、データベースのデータ型に基づいて共通言語ランタイム (CLR: Common Language Runtime) のデータ型に対応付けられるユーザー コントロール (.ascx ファイル) です。一般に、ASP.NET Dynamic Data には、それぞれの型のデータを表示するためのユーザー コントロールと、その型のデータを変更したり挿入したりするためのユーザー コントロールとが別々に用意されています。

このトピックでは、DynamicControl コントロールや DynamicField フィールドなどの Dynamic Data コントロールで、UIHint プロパティを設定することによってデータ フィールドの外観と動作をカスタマイズする方法を説明します。UIHint は、いずれかのオブジェクトによって特定のデータ フィールドがレンダリングされる際に、どのフィールド テンプレートを使用するかを指定するプロパティです。UIHint プロパティでは、標準のテンプレートを指定できるほか、独自に作成した新しいテンプレートを指定することもできます。このアプローチは、Dynamic Data で自動的に作成されたページは使用せず、データの表示と編集を行うカスタム Web ページを自分で作成する場合に役立ちます。

別の方法として、属性を使用することにより、アプリケーション全体でのデータ フィールドの表示と外観を変更することもできます。詳細については、「方法 : データ モデルのデータ フィールドの外観と動作をカスタマイズする」を参照してください。

データ バインド コントロールでデータ フィールドの外観と動作をカスタマイズするには

  1. 必要に応じて、データ モデル内の特定のデータ フィールドに対する UI を定義したカスタム フィールド テンプレートを作成します。詳細については、「方法 : データ モデルでデータ フィールドの表示をカスタマイズする」を参照してください。

  2. GridView コントロールまたは DetailsView コントロールを使用している場合は、DynamicField オブジェクトを追加し、その UIHint プロパティに、データ表示用のフィールド テンプレートの名前を設定します。

    次の例は、フィールドに DynamicField コントロールを使用し、RedText という名前のフィールド テンプレートを使って ProductName 列をレンダリングする方法を示しています。表示モードでは、RedText.ascx という名前のフィールド テンプレートによってデータが表示されます。編集モードまたは挿入モードでは、RedText_Edit.ascx という名前のフィールド テンプレートによってデータが表示されます。

    <asp:DynamicField
  UIHint="RedText"
  DataField="ProductName" />
    Cc488532.alert_note(ja-jp,VS.90).gifメモ :

    指定されたフィールド テンプレートが見つからない場合は、フォールバック機構が使用されます。詳細については、「ASP.NET Dynamic Data のフィールド テンプレートの概要」を参照してください。

  3. ListView コントロールや FormView コントロールなど、テンプレートまたはテンプレート フィールドを使うデータ バインド コントロールを使用している場合は、データを表示する DynamicControl コントロールを追加し、その UIHint プロパティに、表示するデータ フィールドの名前を設定します。

    次の例では、項目が編集モードの場合に、RedText という名前のフィールド テンプレートを使用して ProductName 列がレンダリングされます。実行時には、Dynamic Data によって RedText_Edit.ascx という名前のユーザー コントロールが検索されます。

    <EditItemTemplate>
  <asp:DynamicControl runat="server"
    Mode="Edit"
    UIHint="RedText"
    DataField="ProductName" />
</EditItemTemplate>

使用例

次の例は、GridView コントロールの DynamicField フィールドに UIHint プロパティを追加する方法を示しています。このプロパティを適切に設定して、データ フィールドにカスタム フィールド テンプレートを適用し、製造中止日を編集するための Calendar コントロールが表示されるようにします。2 つ目の例と 3 つ目の例は、日付を短い形式で表示する UI と、フィールドの編集用 UI を定義したフィールド テンプレートのユーザー コントロール コードです。

<%@ Page Language="VB" %>

<script runat="server">

  Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs)
    DynamicDataManager1.RegisterControl(ProductsGridView)
  End Sub

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>UIHint Property Sample</title>
    <link href="~/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>

  <form id="form1" runat="server">
    <div>
      <h2><%= ProductsDataSource.TableName%> table</h2>

      <asp:DynamicDataManager ID="DynamicDataManager1" runat="server"
        AutoLoadForeignKeys="true" />

      <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>

      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>        

          <asp:GridView ID="ProductsGridView" runat="server" DataSourceID="ProductsDataSource"
            AutoGenerateEditButton="true"
            AutoGenerateColumns="false"
            AllowSorting="true"
            AllowPaging="true">
            <Columns>
              <asp:DynamicField DataField="Name" />
              <asp:DynamicField DataField="ProductNumber" />
              <asp:DynamicField DataField="DiscontinuedDate" UIHint="DateCalendar" />
            </Columns>        
            <EmptyDataTemplate>
              There are currently no items in this table.
            </EmptyDataTemplate>
          </asp:GridView>

          <!-- This example uses Microsoft SQL Server and connects   -->
          <!-- to the AdventureWorksLT sample database.              -->
          <asp:LinqDataSource ID="ProductsDataSource" runat="server" 
            EnableUpdate="true"
            TableName="Products" 
            ContextTypeName="AdventureWorksLTDataContext" />

          </ContentTemplate>
        </asp:UpdatePanel>

    </div>
  </form>
</body>
</html>

<%@ Page Language="C#" %>

<script runat="server">

  protected void Page_Init(object sender, EventArgs e) 
  {
    DynamicDataManager1.RegisterControl(ProductsGridView);
  }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>UIHint Property Sample</title>
    <link href="~/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>

  <form id="form1" runat="server">
    <div>
      <h2><%= ProductsDataSource.TableName%> table</h2>

      <asp:DynamicDataManager ID="DynamicDataManager1" runat="server"
        AutoLoadForeignKeys="true" />

      <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>

      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>        

          <asp:GridView ID="ProductsGridView" runat="server" DataSourceID="ProductsDataSource"
            AutoGenerateEditButton="true"
            AutoGenerateColumns="false"
            AllowSorting="true"
            AllowPaging="true">
            <Columns>
              <asp:DynamicField DataField="Name" />
              <asp:DynamicField DataField="ProductNumber" />
              <asp:DynamicField DataField="DiscontinuedDate" UIHint="DateCalendar" />
            </Columns>        
            <EmptyDataTemplate>
              There are currently no items in this table.
            </EmptyDataTemplate>
          </asp:GridView>

          <asp:LinqDataSource ID="ProductsDataSource" runat="server" 
            EnableUpdate="true"
            TableName="Products" 
            ContextTypeName="AdventureWorksLTDataContext" />

          </ContentTemplate>
        </asp:UpdatePanel>

    </div>
  </form>
</body>
</html>

<%@ Control Language="VB" Inherits="System.Web.DynamicData.FieldTemplateUserControl" %>

<script runat="server">

  Function GetDateString() As String 
    If Not (FieldValue Is Nothing) Then
      Dim dt As DateTime = CType(FieldValue, DateTime)
      Return dt.ToShortDateString()
    Else
      Return String.Empty
    End If
  End Function
</script>

<%# GetDateString() %>

<%@ Control Language="C#" Inherits="System.Web.DynamicData.FieldTemplateUserControl" %>

<script runat="server">
    string GetDateString() 
    {
      if (FieldValue != null)
      {
        DateTime dt = (DateTime)FieldValue;
        return dt.ToShortDateString();
      }
      else
      {
        return string.Empty;
      }
    }
</script>

<%# GetDateString() %>

<%@ Control Language="VB" Inherits="System.Web.DynamicData.FieldTemplateUserControl" %>

<script runat="server">

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    TextBox1.ToolTip = Column.Description

    SetUpValidator(RequiredFieldValidator1)
    SetUpValidator(RegularExpressionValidator1)
    SetUpValidator(DynamicValidator1)
  End Sub

  Protected Overrides Sub ExtractValues(ByVal dictionary As IOrderedDictionary)
    dictionary(Column.Name) = ConvertEditedValue(TextBox1.Text)
  End Sub

  Public Overrides ReadOnly Property DataControl() As Control
    Get
      Return TextBox1
    End Get
  End Property

  Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
    TextBox1.Text = Calendar1.SelectedDate.ToString("d")
  End Sub

  Function GetDateString() As String
    If Not (FieldValue Is Nothing) Then
      Dim dt As DateTime = CType(FieldValue, DateTime)
      Return dt.ToShortDateString()
    Else
      Return String.Empty
    End If
  End Function

</script>

<asp:TextBox ID="TextBox1" runat="server" 
  Text='<%# GetDateString() %>' 
  MaxLength="10">
</asp:TextBox>

<asp:Calendar ID="Calendar1" runat="server" 
  VisibleDate='<%# IIf(FieldValue Is Nothing, DateTime.Now, FieldValue) %>'
  SelectedDate='<%# IIf(FieldValue Is Nothing, DateTime.Now, FieldValue) %>' 
  OnSelectionChanged="Calendar1_SelectionChanged" />

<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" />

<%@ Control Language="C#" Inherits="System.Web.DynamicData.FieldTemplateUserControl" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e) {
        TextBox1.ToolTip = Column.Description;

        SetUpValidator(RequiredFieldValidator1);
        SetUpValidator(RegularExpressionValidator1);
        SetUpValidator(DynamicValidator1);
    }

    protected override void ExtractValues(IOrderedDictionary dictionary) {
      dictionary[Column.Name] = ConvertEditedValue(TextBox1.Text);
    }

    public override Control DataControl
    {
      get
      {
        return TextBox1;
      }
    }  

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

    string GetDateString()
    {
      if (FieldValue != null)
      {
        DateTime dt = (DateTime)FieldValue;
        return dt.ToShortDateString();
      }
      else
      {
        return string.Empty;
      }
    }
</script>

<asp:TextBox ID="TextBox1" runat="server" 
  Text='<%# GetDateString() %>' 
  MaxLength="10">
</asp:TextBox>

<asp:Calendar ID="Calendar1" runat="server" 
  VisibleDate='<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
  SelectedDate='<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
  OnSelectionChanged="Calendar1_SelectionChanged" />

<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" />

コードのコンパイル方法

この例で必要な要素は次のとおりです。

  • Dynamic Data Web サイトまたは Dynamic Data Web アプリケーション。

  • AdventureWorks または AdventureWorksLT サンプル データベース。SQL Server のサンプルをダウンロードしてインストールする方法については、CodePlex サイトの「Microsoft SQL Server Product Samples: Database」を参照してください。実行している SQL Server のバージョン (SQL Server 2005 または SQL Server 2008) に対応した正しいバージョンのサンプル データベースをインストールしてください。

  • AdventureWorks または AdventureWorksLT データベースの Products テーブルにアクセスするように構成された LINQ to SQL クラス。

  • Global.asax ファイルで Dynamic Data 用に登録されたデータ コンテキスト オブジェクト。

堅牢性の高いプログラム

次の条件を満たす場合は、例外が発生する可能性があります。

  • データベースが使用できない場合

参照

処理手順

チュートリアル : スキャフォールディングを使用した新しい Dynamic Data Web サイトの作成

概念

ASP.NET Dynamic Data の概要

ASP.NET Dynamic Data のフィールド テンプレートの概要

参照

DynamicField.UIHint

DynamicControl.UIHint