チュートリアル : 既存の Web サイトへの Dynamic Data の追加

  • [アーティクル]

更新 : 2008 年 7 月

このチュートリアルでは、既存の ASP.NET Web サイトに Dynamic Data フレームワークの機能を追加する方法について説明します。また、Dynamic Data Web サイトをカスタマイズする方法も示します。チュートリアルの最後には、データ モデルを使用してデータベースと対話する、実際に動作する Web サイトが完成します。さらに、データ フィールドの表示用と編集用のレンダリング方法を定義するカスタム フィールド テンプレートも作成します。

ASP.NET Dynamic Data の最大の特徴は、データベースを表すデータ モデルから、データ フィールドの外観と動作を実行時に推論できることです。この情報をデータ コントロールで使用し、フィールド テンプレートの機能と組み合わせると、プレゼンテーション層で同じコードを何度も記述する必要がなくなります。

このチュートリアルでは、次の機能を最小限のコードで実現する手順を示します。

  • データ モデルとやり取りする。Dynamic Data には、作成 (Create)、読み取り (Read)、更新 (Update)、削除 (Delete) という CRUD 操作に対応したデータ ドリブン アプリケーションの作成を支援する機能があります。

  • フィールド テンプレートを作成することによって、データ フィールドの表示方法と編集方法をカスタマイズする。Dynamic Data は、データ モデルから推論された情報に基づいて、適切なフィールド テンプレートを選択します。

必要な手順は次のとおりです。

  • Web サイトを作成し、Dynamic Data をサポートするように変更します。この作業の主な目的は、Dynamic Data がデータベースと対話する際に使用するデータ モデルを作成することです。

  • フィールド テンプレートを作成します。フィールド テンプレートは、データを表示および編集するための UI を定義するユーザー コントロールです。

  • カスタム テーブルを作成してテーブルを表示します。このページを通じて、Dynamic Data がデータベースとやり取りするようすを確認できます。また、この作業は最小限のコードで実現できることがわかります。

  • Dynamic Data の統合をテストします。Dynamic Data の機能が Web サイトに統合されていることを確認します。データ モデルと対話したり、アプリケーションが期待したとおりに動作することを確認したりできます。この手順の一部には、エラーを意図的に発生させて対処する手順も含まれます。

前提条件

このトピックで紹介しているサンプルの要件を次に示します。

  • Microsoft Visual Studio 2008 Service Pack 1 または Visual Web Developer 2008 Express Edition Service Pack 1。

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

Dynamic Data Web サイトの作成

このセクションでは、Visual Studio で Dynamic Data Web サイトを作成します。最初に標準的な ASP.NET Web サイトを作成してから、Dynamic Data の機能をサポートするサイトに変換します。このために、次の操作を実行します。

  • ASP.NET Web サイトを作成します。

  • このサイトをデータベースに接続します。このデータベースに格納されているテーブルの列 (データ フィールド) が、カスタム表示とカスタム編集のためにアクセスされます。

  • サイトで Dynamic Data コントロールを使用するように構成します。これにより、Dynamic Data の機能を Web サイトに統合できます。

次に、実際に対話することになるデータ モデルを作成し、構成する必要があります。次の作業を実行します。

  • SQL Server データベースに基づいてデータ モデルのクラスを作成します。

  • データ モデルにメタデータを追加して、ユーザー入力のカスタム検証と、データ フィールドを変更するための Calendar コントロールを有効にします。

Dynamic Data 用 Web サイトの準備

ここでは、ASP.NET Web サイトを作成する方法、データベースを追加する方法、および Web サイトを構成して Dynamic Data の機能を統合する方法について説明します。

ASP.NET Web サイトを作成するには

  1. Visual Studio を起動します。

  2. [ファイル] メニューの [新規作成] をポイントし、[Web サイト] をクリックします。

    [新しい Web サイト] ダイアログ ボックスが表示されます。

  3. [Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。

  4. [場所] ボックスの一覧の [ファイル システム] をクリックし、その横のボックスに、Web サイトのページを格納するフォルダの名前を入力します。たとえば、フォルダ名として「C:\WebSites\DynamicDataWebSite」と入力します。

  5. [言語] ボックスで、作業に使用するプログラミング言語をクリックします。

  6. [OK] をクリックします。

    Visual Studio によって、ASP.NET Web サイトのフォルダとファイルが作成されます。

次の手順では、サイトにデータベースを追加します。このデータベースに格納されているテーブルの列 (データ フィールド) が、表示と編集のためにアクセスされます。

Web サイトにデータベースを追加するには

  1. ソリューション エクスプローラで、App_Data フォルダを右クリックし、[既存項目の追加] をクリックします。

  2. [既存項目の追加] ダイアログ ボックスで、AdventureWorksLT データベース ファイル (AdventureWorksLT.mdf) がインストールされている場所を入力し、[追加] をクリックします。

    これにより、プロジェクトにデータベース ファイルのコピーが作成されます。

これで、Dynamic Data の機能を統合するために必要な Web サイトの構成を行う準備が整いました。

Web サイトを構成するには

  1. ソリューション エクスプローラで、Web.config ファイルを開きます。

  2. 次のアセンブリへの参照を追加します。

    • System.Web.Routing

    • System.Web.DynamicData

    • System.ComponentModel.DataAnnotations

    アセンブリを追加する方法を次の例に示します。正しいバージョンのアセンブリを使用してください。

    <system.web>
  <compilation>
    <assemblies>

      <add assembly="System.Web.Routing, Version=3.5.0.0,            Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>      <add assembly="System.Web.DynamicData, Version=3.5.0.0,            Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>      <add assembly="System.ComponentModel.DataAnnotations,            Version=3.5.0.0,            Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
    </assemblies>
  </compilation>

  3. asp というタグ プレフィックスが System.Web.DynamicData 名前空間を参照するように構成します。次に例を示します。

    <system.web>
  <pages>
    <controls>

      <add tagPrefix="asp" namespace="System.Web.DynamicData"          assembly="System.Web.DynamicData, Version=3.5.0.0,          Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
    </controls>
  </pages>
</system.web>

  4. Web.config ファイルを保存して閉じます。

データ モデルの設定

ここでは、Web サイトに動的な動作を実現するための重要なコンポーネントであるデータ モデルの作成方法について説明します。このチュートリアルでは、LINQ to SQL データ モデルを使用します。ただし、データ モデルには ADO.NET Entity Framework を使用することもできます。このセクションでは、データ モデルにメタデータ情報を追加する方法も説明します。

データ モデルを作成するには

  1. ソリューション エクスプローラで、プロジェクト名を右クリックし、[ASP.NET フォルダの追加] をクリックして、[App_Code] をクリックします。

  2. App_Code フォルダを右クリックし、[新しい項目の追加] をクリックします。

  3. [Visual Studio にインストールされたテンプレート] の [LINQ to SQL クラス] をクリックします。

  4. [名前] ボックスに、データベース モデルの名前として「AdventureWorksLT.dbml」と入力します。

  5. [追加] をクリックします。

    オブジェクト リレーショナル デザイナ (O/R デザイナ) が表示されます。詳細については、「オブジェクト リレーショナル デザイナ (O/R デザイナ)」を参照してください。

  6. O/R デザイナで、[サーバー エクスプローラ] リンクをクリックします。

  7. サーバー エクスプローラで、[データ接続] の [AdventureWorksLT_Data.mdf] ノードを展開し、[テーブル] ノードを展開します。

  8. Customer テーブルを O/R デザイナ ウィンドウにドラッグします。

  9. AdventureWorksLT.dbml ファイルを保存して閉じます。

    これで、AdventureWorksLT データベースを表すデータ モデルが作成されました。

次の手順では、ユーザー入力のカスタム検証機能を追加する方法について説明します。また、DateTime データ フィールドの表示と編集を行うための UI を、Calendar コントロールを使用してレンダリングする方法についても説明します。

データ モデルにカスタム検証およびメタデータを追加するには

  1. ソリューション エクスプローラで、[App_Code] フォルダを右クリックし、[新しい項目の追加] をクリックします。

  2. [Visual Studio にインストールされたテンプレート] の [クラス] をクリックします。

  3. [名前] ボックスに、カスタム フィールド テンプレートで表示するデータが格納されているデータベース テーブルの名前 (データ モデルで定義されている名前) を入力します。このチュートリアルでは、Customer クラスを使用します。したがって、Customer.cs または Customer.vb という名前のクラス ファイルを作成します。このファイルには、データ フィールドに属性を適用するために後で作成する関連クラスも格納されます。

  4. Customer のクラス定義に Partial キーワード (Visual Basic の場合) または partial キーワード (Visual C# の場合) を追加して、部分クラスにします。

  5. Visual C# でクラスを作成する場合は、既定のコンストラクタを削除します。

    次の例は、更新後のクラス宣言を示しています。

    public partial class Customer {

}

    Partial Public Class Customer

End Class

  6. Imports キーワード (Visual Basic の場合) または using キーワード (Visual C# の場合) を使用して、System.Web.DynamicData 名前空間と System.ComponentModel.DataAnnotations 名前空間への参照を追加します。次に例を示します。

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

    Imports System.Web.DynamicData
Imports System.ComponentModel.DataAnnotations

  7. 同じファイル内に、関連メタデータ クラスとして機能する部分クラスを追加します。クラス名には、任意の名前を使用できます。このチュートリアルでは、次の例に示すように、CustomerMetadata というクラス名を使用します。

    public partial class CustomerMetadata
{

}

    Partial Public Class CustomerMetadata

End Class

  8. Customer 部分クラス定義に MetadataTypeAttribute 属性を適用します。属性のパラメータには、前の手順で作成した関連メタデータ クラスの名前 (CustomerMetadata) を指定します。

    次の例は、属性が適用された Customer 部分クラスを示しています。

    [MetadataType(typeof(CustomerMetadata))]
public partial class Customer {

}

    <MetadataType(GetType(CustomerMetadata))> _
Partial Public Class Customer

End Class

  9. メタデータ クラスに、ModifiedDate という名前のパブリック フィールドを Object 型として作成します。

    表示と編集の動作をカスタマイズするデータ フィールドごとに、対応するフィールドをメタデータ クラスに作成します。メタデータ クラス内のフィールド名には、変更対象となるデータ フィールドと同じ名前を使用します。

  10. ModifiedDate フィールドに UIHintAttribute 属性を適用します。パラメータには "DateCalendar" を指定します。これは、後で作成するフィールド テンプレートの名前です。

    Cc668188.alert_note(ja-jp,VS.90).gifメモ :

    Object は、メタデータ型において、データ フィールドを表すマーカーとして使用されます。実際の型は、Dynamic Data がデータ モデルから推論します。

    UIHintAttribute 属性が適用された例を次に示します。

    public partial class CustomerMetadata
{
    [UIHint("DateCalendar")]
    public object ModifiedDate;
}

    Partial Public Class CustomerMetadata
    <UIHint("DateCalendar")> _
    Public ModifiedDate As Object
End Class

  11. メタデータ クラスに、FirstName プロパティと LastName プロパティのパブリック フィールドを作成します。

  12. FirstName データ フィールドと LastName データ フィールドに RegularExpressionAttribute 属性を適用します。アルファベット文字、スペース、およびハイフンのみを許可し、名前の文字数を最大 40 文字に制限する正規表現パターンを指定します。検証に失敗した場合に表示するカスタム エラー メッセージも指定します。

    次の例は、属性が適用された状態の FirstName フィールドと LastName フィールドを示しています。

    [RegularExpression(@"^[a-zA-Z''-'\s]{1,40}$",     ErrorMessage="Entered characters are not allowed.")]
public object FirstName;

[RegularExpression(@"^[a-zA-Z''-'\s]{1,40}$",    ErrorMessage = "Entered characters are not allowed.")]
public object LastName; 

    <RegularExpression("^[a-zA-Z''-'\s]{1,40}$", _    ErrorMessage:="Entered characters are not allowed.")> _
Public FirstName As Object

<RegularExpression("^[a-zA-Z''-'\s]{1,40}$", _    ErrorMessage:="Entered characters are not allowed.")> _
Public LastName As Object

    各データ フィールドが、データ モデルで定義された Customer テーブルの列と一致している点に注目してください。これらのデータ フィールドは、メタデータ情報を追加するためにのみ使用されています。追加されたメタデータ情報は、Dynamic Data でデータ フィールドをレンダリングするときに使用されます。

    正規表現パターンにより、英大文字、英小文字、および英語圏の人名として一般的ないくつかの特殊文字が、最大で 40 文字まで許容されることになります。

  13. クラス ファイルを保存して閉じます。

次は、Dynamic Data がメタデータ情報にアクセスできるように、データ モデルのコンテキストを登録する必要があります。

データ モデルのコンテキストを登録するには

  1. ソリューション エクスプローラで、プロジェクト名を右クリックし、[新しい項目の追加] をクリックします。

  2. [Visual Studio にインストールされたテンプレート] の [グローバル アプリケーション クラス] を選択し、[追加] をクリックします。

    Global.asax ファイルがサイトに追加されます。

  3. 次の例に示すように、@ Import ディレクティブを追加し、System.Web.DynamicData 名前空間を参照する Namespace 属性を指定します。

    <%@ Import Namespace="System.Web.DynamicData" %>

  4. Application_Start メソッドで、次の例に示すように、スキャフォールディング オプションを無効にしながらデータ コンテキストを登録します。

    このように登録することで、使用するデータ モデルが Dynamic Data に通知されます。また、スキャフォールディング用にテーブルを公開しないように Dynamic Data に指示しています。この最後の手順は必須ではありませんが、Web サイトでスキャフォールディングが使用されないことを強調する目的で取り入れています。

    MetaModel model = new MetaModel();
model.RegisterContext(typeof(AdventureWorksLTDataContext), 
new ContextConfiguration() {ScaffoldAllTables = false });

    Dim model As MetaModel = New MetaModel()
model.RegisterContext(GetType( _
    AdventureWorksLTDataContext), _
    New ContextConfiguration() With { _
    .ScaffoldAllTables = False})

  5. Global.asax ファイルを保存して閉じます。

フィールド テンプレートの作成

フィールド テンプレートは、データ フィールドの表示用と編集用の UI を Dynamic Data でレンダリングするために使用されるユーザー コントロールです。Dynamic Data では、データ コンテキストで表現されるデータ フィールドの型ごとに、フィールド テンプレートが存在している必要があります。特定のデータ フィールドの型に対応するフィールド テンプレートが存在せず、フォールバック規則を使用してもフィールド テンプレートが見つからない場合は、Dynamic Data から例外がスローされます。

Dynamic Data Web サイトを作成すると、サイトには、標準的なデータベース データ型を表す一連のフィールド テンプレートが追加されます。これらは、ページ テンプレート、マスタ ページ、カスケード スタイルシート ファイルなどと一緒に作成されます。ただし、このチュートリアルの目的は、Dynamic Data の機能を既存のサイトに追加する方法を学習することです。そのため、ここでは、既定のフィールド テンプレートにはアクセスできないものと仮定します。

このチュートリアルでは、Dynamic Data Web サイトの既定のテンプレートに似たフィールド テンプレートを作成します。詳細については、「ASP.NET Dynamic Data のフィールド テンプレートの概要」を参照してください。Web サイトを作成したときに生成される既定のフィールド テンプレートには、スキャフォールディングが使用されます。詳細については、「チュートリアル : スキャフォールディングを使用した新しい Dynamic Data Web サイトの作成」を参照してください。

ここでは、次のテンプレートの作成方法について説明します。

  • String 型のデータ フィールドを表示および編集するための UI をレンダリングするフィールド テンプレート。

  • DateTime 型のデータ フィールドを表示および編集するための UI をレンダリングするフィールド テンプレート。

String データ用フィールド テンプレートの作成

ここでは、String データ フィールドを表示および編集するための UI をレンダリングするフィールド テンプレートの作成方法について説明します。

String データ フィールドを表示および編集するフィールド テンプレートを作成するには

  1. ソリューション エクスプローラで、プロジェクト名を右クリックし、[新しいフォルダ] をクリックします。

  2. 新しいフォルダの名前を「DynamicData」に変更します。

    Cc668188.alert_note(ja-jp,VS.90).gifメモ :

    各フォルダの名前には、必ずこの手順で指定されているフォルダ名を使用してください。これらの名前は、Dynamic Data で特別な意味を持っています。

  3. ソリューション エクスプローラで、DynamicData フォルダを右クリックし、[新しいフォルダ] をクリックします。

  4. 新しいフォルダの名前を「FieldTemplates」に変更します。

  5. ソリューション エクスプローラで、FieldTemplates フォルダを右クリックし、[新しい項目の追加] をクリックします。

  6. [Visual Studio にインストールされたテンプレート] の [Dynamic Data フィールド] をクリックします。

  7. [名前] ボックスに「Text.ascx」と入力します。[別のファイルにコードを書き込む] ボックスがオンになっていることを確認します。

  8. [追加] をクリックします。

    Text.ascx および Text_Edit.ascx という名前の 2 つのフィールド テンプレートが作成されました。1 つ目は、String データ フィールドを表示するための UI をレンダリングするコントロールです。2 つ目は、String データ フィールドを編集するための UI をレンダリングするコントロールです。

  9. Text_Edit.ascx ファイルを開き、@ Control ディレクティブの AutoEventWireup 属性を true に設定します。

  10. ユーザー コントロール ファイルを保存して閉じます。

    これで、String データ フィールドを表示および編集するための UI をレンダリングするフィールド テンプレートが完成しました。

DateTime フィールド テンプレートの作成

ここでは、DateTime データ フィールドを表示および編集するための UI をレンダリングするフィールド テンプレートの作成方法について説明します。表示用のフィールド テンプレートでは、時刻部分を除いた短い日付形式を使用します。編集用のフィールド テンプレートでは、Calendar コントロールを使用して、ユーザーが新しい値を入力できるようにします。

DateTime データ フィールドを表示および編集するフィールド テンプレートを作成するには

  1. ソリューション エクスプローラで、DynamicData\FieldTemplates フォルダを右クリックし、[新しい項目の追加] をクリックします。

  2. [Visual Studio にインストールされたテンプレート] の [Dynamic Data フィールド] をクリックします。

  3. [名前] ボックスに、「DateCalendar.ascx」と入力します。[別のファイルにコードを書き込む] ボックスがオンになっていることを確認します。

  4. [追加] をクリックします。

    DateCalendar.ascx および DateCalendar_Edit.ascx という名前の 2 つのフィールド テンプレートが作成されました。1 つ目は、DateTime データ フィールドを表示するための UI をレンダリングするコントロールです。2 つ目は、DateTime データ フィールドを編集するための UI をレンダリングするコントロールです。

  5. DateCalendar.ascx ファイルを開きます。

  6. Literal コントロールで、Text 属性に対する値 FieldValueString の割り当てを削除します。次に例を示します。

    <asp:Literal ID="Literal1" runat="server"/>

  7. ユーザー コントロール ファイルを保存して閉じます。

  8. フィールド テンプレート DateCalendar.ascx.vb または DateCalendar.ascx.cs の分離コード ファイルを開きます。

  9. 次の例に従って、ユーザー コントロールの OnDataBinding メソッドをオーバーライドし、DateTime 値の書式を表示用に変更して、時刻部分を除いた形式にします。フィールドの値は FieldValue で参照できます。

    protected override void OnDataBinding(EventArgs e)
{
  base.OnDataBinding(e);
  string shortDate = string.Empty;
  if (FieldValue != null)
  {
    DateTime dt = (DateTime)FieldValue;
    shortDate = dt.ToShortDateString();
  }
  Literal1.Text = shortDate;
}

    Protected Overloads Overrides Sub OnDataBinding( _
    ByVal e As EventArgs)
    MyBase.OnDataBinding(e)
    Dim shortDate As String = String.Empty
    If FieldValue IsNot Nothing Then
      Dim dt As DateTime = Format(CType(FieldValue, DateTime), "d")
      shortDate = dt.ToShortDateString()
    End If
    Literal1.Text = shortDate
End Sub

  10. 分離コード ファイルを保存して閉じます。

  11. DateCalendar_Edit.ascx ファイルを開きます。

  12. @ Control ディレクティブの AutoEventWireup 属性を true に設定します。

  13. TextBox コントロールで、次の例に示すように、Text 属性の FieldValueString 式をカスタムの GetDateString() メソッドに置き換えます。

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

  14. ファイルに次のマークアップを追加して、日付の編集用の UI をレンダリングする Calendar コントロールを定義します。これにより、カレンダーを使用した日付編集が可能になります。

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

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

  15. フィールド テンプレート ファイルを保存して閉じます。

  16. 分離コード ファイル DateCalendar_Edit.ascx.vb または DateCalendar_Edit.ascx.cs を開きます。

  17. GetDateString メソッドを追加します。このメソッドで TextBox コントロールからのユーザー入力を処理します。このメソッドでは、時刻部分を除いた短い形式を使用して日付の形式を設定します。

    その方法を次の例に示します。

    protected string GetDateString()
{
  if (FieldValue != null)
  {
    DateTime dt = (DateTime)FieldValue;
    return dt.ToShortDateString();
  }
  else
    return string.Empty;
}

    Protected Function GetDateString() As String
  If FieldValue <> Nothing Then
    Dim dt As DateTime = Format(CType(FieldValue, DateTime), "d")
      Return dt.ToShortDateString()
  Else
    Return String.Empty
  End If
End Function

  18. Calendar コントロールの SelectionChanged イベントにハンドラを追加します。

  19. このハンドラで、TextBox コントロールの Text プロパティをカレンダーで選択された日付に設定します。ここで設定する値は、形式を変更した後の日付です。これにより、ユーザーの現在の選択がテキスト ボックスに表示されます。

    ハンドラの例を次に示します。

    protected void Calendar1_SelectionChanged(
  object sender, EventArgs e)
{
  // Display value using the short date format.
  TextBox1.Text = 
  Calendar1.SelectedDate.ToString("d");
}

    Protected Sub Calendar1_SelectionChanged( _
    ByVal sender As Object, ByVal e As EventArgs)
    ' Display value using the short date format.
    TextBox1.Text = Calendar1.SelectedDate.ToString("d")
End Sub

  20. フィールド テンプレート ファイルを保存して閉じます。

    これで、DateTime 型のデータ フィールドを表示および編集するための UI をレンダリングするフィールド テンプレートが完成しました。Dynamic Data は、このフィールド テンプレートの指示に従って、適切な書式設定と検証を適用します。検証に失敗した場合も、フィールド テンプレートによって適切なエラー メッセージが表示されます。

Customer テーブルを表示するためのカスタム ページの作成

ここでは、カスタム ページの作成方法について説明します。このカスタム ページでは、動的な動作を備えた GridView コントロールを使用して、Customer テーブルを表示します。

コントロールの動的な動作を確立するには、次の作業を行います。

  • コントロールを DynamicDataManager コントロールに登録します。

  • 表示するデータ フィールドごとに、DynamicField 要素を Columns プロパティに追加します。

データベース テーブルには、String 型と DateTime 型のデータ フィールドが含まれています。したがって、動的な動作を備えた GridView コントロールを使用してテーブル データを表示すると、先ほど作成したカスタム フィールド テンプレートが Dynamic Data によって使用されます。

Customers テーブルを表示するカスタム ページを作成するには

  1. ソリューション エクスプローラで、プロジェクトの名前を右クリックし、[新しい項目の追加] をクリックします。

  2. [Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。

    [名前] ボックスに「Customers.aspx」と入力します。[別のファイルにコードを書き込む] がオンになっていることを確認します。

  3. @ Page ディレクティブの AutoEventWireup 属性を true に設定します。

  4. ソース ビューで、ページの本文に DynamicDataManager コントロールを追加します。次に例を示します。

    <body>

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

</body>

    DynamicDataManager コントロールは、ページ内のデータ コントロールをダイナミック コントロールとして処理するように Dynamic Data に指示します。

  5. ツールボックスの [データ] タブから、LinqDataSource コントロールをページに追加します。

  6. LinqDataSource コントロールの EnableUpdate プロパティを true に設定します。

    これにより、データ コントロールの更新操作が有効になります。

  7. LinqDataSource コントロールの TableName プロパティに、使用するテーブル (Customers) を設定します。

  8. 次の例に示すように、ContextTypeName プロパティにデータ コンテキスト クラス (AdventureWorksLTDataContext) を設定します。

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

  9. ツールボックスの [データ] タブから、GridView コントロールをページに追加します。

    このコントロールは、データ フィールドの表示および変更に使用されます。

  10. 次の例に示すように、GridView コントロールの DataSourceID プロパティに、LinqDataSource コントロールの ID を設定します。

    <form ID="Form1" runat="server" >

    <asp:GridView ID="GridView1"  runat="server" 
      DataSourceID="LinqDataSource1" >
    </asp:GridView>
</form>

  11. 次の例に示すように、GridView コントロールの AutoGenerateColumns プロパティを false に設定し、AutoGenerateEditButton プロパティを true に設定します。

    <asp:GridView ID="GridView1"  runat="server" 
  AutoGenerateEditButton="true"  AutoGenerateColumns="false" >
</asp:GridView>

    これにより、編集操作が有効になり、データベース テーブルに基づく列の自動生成が無効になります。代わりに、DynamicField コントロールを使用して、GridView コントロールのデータを設定します。

  12. 次の例に示すように、GridView コントロールの AllowPaging プロパティと AllowSorting プロパティを true に設定します。

    <asp:GridView ID="GridView1"  runat="server" 

  AllowPaging="true"  AllowSorting="true" >
</asp:GridView>

  13. Columns プロパティに 3 つの DynamicField コントロールを追加し、その DataField() プロパティを、それぞれ "FirstName"、"LastName"、および "ModifiedDate" に設定します。

    DynamicField コントロールは、ASP.NET Dynamic Data を使用して、データ モデルからデータを読み込み、適切なフィールド テンプレートを使って書式を設定します。データの読み取りや書式設定に関する情報を DynamicField コントロールに追加する必要はありません。これらの作業は、Dynamic Data によって自動的に処理されます。

    次の例は、DynamicField コントロールが追加された後の GridView コントロールのマークアップを示しています。

    <asp:GridView ID="GridView1"
 runat="server">

  <Columns>    <asp:DynamicField DataField="FirstName" />    <asp:DynamicField DataField="LastName" />    <asp:DynamicField DataField="ModifiedDate" />  </Columns>
</asp:GridView>
    Cc668188.alert_note(ja-jp,VS.90).gifメモ :

    ツールボックスには、DynamicField コントロールが存在しません。したがって、ソース ビューでマークアップとして追加する必要があります。

  14. Customers.aspx ファイルを保存して閉じます。

    これで、Customers テーブルにアクセスするためのカスタム ページが完成しました。

  15. Customers.aspx.cs または Customers.aspx.vb の分離コード ファイルを開きます。

  16. Imports キーワード (Visual Basicの場合) または using キーワード (Visual C#の場合) を使用して、System.Web.DynamicData 名前空間への参照を追加します。次に例を示します。

    using System.Web.DynamicData;

    Imports System.Web.DynamicData

  17. 次の例に示すように、Page_Init メソッドを作成します。

    protected void Page_Init(object sender, 
EventArgs e)
{    }

    Protected Sub Page_Init(ByVal sender As Object, _
ByVal e As EventArgs)

End Sub

  18. Page_Init メソッドで、GridView コントロールを DynamicDataManager に登録して、動的な動作を有効にします。

    その方法を次の例に示します。

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

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

  19. 分離コード ファイルを閉じます。

Dynamic Data のテスト

ここでは、Dynamic Data の機能が Web サイトに統合されていることを確認する方法について説明します。データ モデルを通じてデータベースを操作することで、正常に統合されているかどうかを検証できます。データの変更時に無効な値を入力すると、データベースから推論された情報に基づいて、Dynamic Data によってエラー メッセージが生成されます。

Dynamic Data の機能が統合されているかどうかをテストするには

  1. ソリューション エクスプローラで、Customers.aspx ページを右クリックし、[ブラウザで表示] をクリックします。

    Customers テーブルの選択された列を表示するページがブラウザに表示されます。

  2. 任意の行の [編集] をクリックし、名を削除します。

  3. 同じ行の [更新] をクリックします。

    FirstName データ フィールドに空の文字列は許可されないという内容のエラー メッセージが表示されます。

  4. 同じ行の [キャンセル] をクリックします。

  5. 任意の行の [編集] をクリックし、姓を変更します。

  6. 同じ行の [更新] をクリックします。

    Dynamic Data によってデータベースが更新されます。姓に有効な値が入力されたため、データが先ほど作成したフィールド テンプレートの検証コントロールをパスしたことがわかります。

  7. 任意の行の [編集] をクリックし、姓または名にアルファベット以外の文字を入力します。

  8. 同じ行の [更新] をクリックします。

    使用できない文字が入力されていることを警告するエラー メッセージが表示されます。これは、先ほど正規表現と一緒に指定したカスタム エラー メッセージです。

  9. 同じ行の [キャンセル] をクリックします。

  10. 任意の行の [編集] をクリックし、日付を削除します。

  11. 同じ行の [更新] をクリックします。

    ModifiedDate データ フィールドに空の文字列は許可されないという内容のエラー メッセージが表示されます。

  12. 同じ行の [キャンセル] をクリックします。

  13. 任意の行の [編集] をクリックし、Calendar コントロールを使用して日付を変更します。

  14. 同じ行の [更新] をクリックします。

    Dynamic Data によってデータベースが更新されます。日付に有効な値が入力されたため、データが先ほど作成したフィールド テンプレートの検証コントロールをパスしたことがわかります。

次の手順

このチュートリアルでは、ASP.NET Dynamic Data の基本的な原理と、Dynamic Data の機能を既存の ASP.NET Web サイトに追加する方法について説明しました。Dynamic Data の機能を既存の ASP.NET Web サイトに統合すると、次のことが可能となります。

  • 基になるデータベースとやり取りする。Dynamic Data には、CRUD 操作 (作成、読み取り、更新、削除) をはじめとする、データ ドリブン アプリケーションに必要な主要機能が備わっています。

  • データ フィールドを表示および編集する。Dynamic Data は、データベースから推論された情報に基づいて適切なフィールド テンプレートを選択します。

他の機能を試すこともできます。次に行う作業の例を示します。

一般的な情報については、以下を参考にしてください。

参照

概念

ASP.NET Dynamic Data モデルの概要

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

ASP.NET Dynamic Data スキャフォールディングとページ テンプレートの概要

ASP.NET Dynamic Data の概要

履歴の変更

日付

履歴

理由

2008 年 7 月

トピックを追加

SP1 機能変更