更新日: 2010 年 2 月 5 日

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

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

Dynamic Data アプリケーションのマスター ページ、コンテンツ ページ、スタイルシート (CSS) をカスタマイズする方法を理解します。

今回紹介するコード

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
   <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" />

      <h2>Northwind テーブル リスト</h2>

      <br /><br />

      <asp:GridView ID="Menu1" runat="server" AutoGenerateColumns="false"
         CssClass="gridview" AlternatingRowStyle-CssClass="even" Width="300px">
         <Columns>
            <asp:TemplateField HeaderText="テーブル名" SortExpression="TableName">
               <ItemTemplate>
                  <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%#Eval("ListActionPath") %>'><%#Eval("DisplayName") %></asp:HyperLink>
               </ItemTemplate>
            </asp:TemplateField>
         </Columns>
      </asp:GridView>
</asp:Content>

目次

  1. はじめに
  2. 作成した Dynamic Data アプリケーションの確認
  3. トップページのカスタマイズ
  4. マスター ページのカスタマイズ
  5. スタイルシートのカスタマイズ
  6. まとめ

1. はじめに

10 行でズバリ !! データドリブンな Web アプリケーション開発 (ASP.NET Dynamic Data) (C#) で作成した Dynamic Data アプリケーションの各ページをカスタマイズする方法を解説します。Dynamic Data アプリケーションと言っても ASP.NET Web アプリケーションなので、ASP.NETをご存じの方ならカスタマイズを行う際に特別な技術は必要としません。唯一必要となるのは Dynamic Data アプリケーションの動作の仕組み (別の言い方をすれば、各ファイルの役割) を理解することです。

なお、ここで解説する手順は、10 行でズバリ !! データドリブンな Web アプリケーション開発 (ASP.NET Dynamic Data) (C#) で解説した Visual Studio プロジェクトが完成していることを前提としています。

ページのトップへ


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

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

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

図 1 既定のトップページ

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

図 2 既定の Address テーブル ページ

テーブルのデータが表示されます。編集や削除、さらには参照されている別テーブル データを表示することも可能であることを確認します。

ページのトップへ


3. トップページのカスタマイズ

上記の図 1 の既定のトップページ (Default.aspx) を見ると、テーブルの名前が [My テーブル] と表示されていたり、テーブル名のフォントが小さいと感じたり、テーブルが画面の横幅いっぱいに表示されていることに違和感のある方もいるのではないでしょうか? まずはこれらの解決をしましょう。手順に入る前に最も重要なプロジェクトの各ファイルの役割を簡単に理解しておきましょう。

[ソリューション エクスプローラ] で [DynamicData] フォルダーを展開します (図3)。このフォルダーは、10 行でズバリ !! データドリブンな Web アプリケーション開発 (ASP.NET Dynamic Data) (C#) で [動的データ エンティティ Web サイト] プロジェクト テンプレートによって自動的に作成されたフォルダーです。

[Content] フォルダーにはページングやデータのフィルタ機能を提供するためのユーザー コントロール (.ascx ファイル) や画像ファイルといったページの部品が保存されています。[FieldTemplate] フォルダーの内容もページの構成要素となるユーザー コントロールですが、中心機能ともいえる LINQ to SQL クラスや EDM から取得したデータ型によって実データを表示、入力するためのコントロールの定義です。(フィールド テンプレートの詳細やカスタマイズに関しては別の記事で解説します。) また、最後に、[PageTemplate] フォルダーの各ファイルの役割は次のようになります。

ファイル名 役割
Details.aspx 1 行のデータのみを詳細表示するためのページです。
Edit.aspx 1 行のデータを変更するための単票フォームです。
Insert.aspx 1 行のデータを追加するための単票フォームです。
List.aspx テーブル内のデータを一覧表示するためのページです。
ListDetails.aspx 上記の List.aspx と Details.aspx の役割を 1 ページにまとめたページです。このページの上部にはテーブル内のデータ一覧が表示され、下部には選択した行の詳細情報を表示します。

図 3 [Dynamic Data Web アプリケーション] プロジェクトの構成

また、プロジェクト内には Default.aspx ファイルがあります。アプリケーションを実行した際にはじめに表示されるテーブルの一覧ページです。このファイルを開き、次のコードを探します。

<h2>My テーブル</h2>

これを次のコードに変更します。 

<h2>Northwind テーブル リスト</h2>

すぐ下にある次のコードを確認します。 

 <asp:GridView ID="Menu1" runat="server" AutoGenerateColumns="false"
    CssClass="gridview" AlternatingRowStyle-CssClass="even">

ここに、テーブルの幅を固定長にするため Width 属性を追加します。GridView 要素は次のようになります。

<asp:GridView ID="Menu1" runat="server" AutoGenerateColumns="false"
      CssClass="gridview" AlternatingRowStyle-CssClass="even" Width="300px">

さらに、列ヘッダを変更するため、2 行下の次の行を見つけます。

 <asp:TemplateField HeaderText="Table Name" SortExpression="TableName">

HeaderText 属性の値を任意に設定します。ここでは「テーブル名」としたいので、次のようになります。 

<asp:TemplateField HeaderText="テーブル名" SortExpression="TableName">

ここまでの手順で、Default.aspx は次のようになります。

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
   <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" />

   <h2>Northwind テーブル リスト</h2>

   <br /><br />

   <asp:GridView ID="Menu1" runat="server" AutoGenerateColumns="false"
      CssClass="gridview" AlternatingRowStyle-CssClass="even" Width="300px">
      <Columns>
         <asp:TemplateField HeaderText="テーブル名" SortExpression="TableName">
            <ItemTemplate>
               <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%#Eval("ListActionPath") %>'><%#Eval("DisplayName") %></asp:HyperLink>
            </ItemTemplate>
         </asp:TemplateField>
      </Columns>
   </asp:GridView>
</asp:Content>

ページのトップへ


4. マスター ページのカスタマイズ

[ソリューション エクスプローラ] で Site.master をダブルクリックして [デザイン] ビューで開きます。

すべてのページの上部に表示される内容が定義されています。既定では「DYNAMIC DATA サイト」と表示されるため、これを「コードレシピ サンプル サイト」に変更します。

図 4 マスター ページのカスタマイズ

ページのトップへ


5. スタイルシートのカスタマイズ

[ソリューション エクスプローラ] で Site.css をダブルクリックします。

すでにサイト内で使用する多くの CSS クラスが定義されています。今回は、以下の手順で各ページのリスト内に表示されるデータのフォントの大きさと色を変更します。

Default.aspx や List.aspx を確認するとわかりますが、これらのページの GridView コントロールでは CSS 属性が定義されており "gridview" と設定されています。このため、Site.css 内で次のコードを探します。 

 body.template table.listview, table.gridview, table.detailstable
{
    border: 1px solid #dbddff;
    border-bottom: 3px solid #dbddff;
    border-collapse: collapse;
    font-family: MS Pゴシック, Arial, sans-serif;
    color: #666666;
    font-size: 95%;
 
}

次のコードのように、color と font-size の値を変更します。

body.template table.listview, table.gridview, table.detailstable
{
   border: 1px solid #dbddff;
   border-bottom: 3px solid #dbddff;
   border-collapse: collapse;
   font-family: MS Pゴシック, Arial, sans-serif;
   color: #000000;
   font-size:large;

}

[F5] キーを押して実行します。

トップページが表示されたら、変更内容が適用されていることを確認してください。GridView 内のフォントの色に関しては、Default.aspx では文字列データの表示がないため (すべてハイパーリンクのため) 確認できません。各テーブル名のリンクをクリックし、List.aspx 等で確認してください (Details.aspx や Edit.aspx でも確認できます)。

図 5 カスタマイズ結果の確認

ページのトップへ


6. まとめ

Dynamic Data アプリケーションは EDM や LINQ to SQL によって提供されるデータ モデルを元にページ内容が構成されています。EDM や LINQ to SQL はデータベースのスキーマとは異なる形式のデータの集合を定義し、扱うことができます。今回のサンプルは既存の EDM を使用したため、データベースの構造と同様のデータ モデルとなっていますが、実際には「どんな形式のデータを表示したいのか? 変更、追加したいのか?」というユーザーの要件を元に作成したデータベース構造とは異なるデータ モデルを使用し、データベースの構造は一切意識することなくデータの操作を行う Web アプリケーションを簡単に作成できます。

既定で作成される各ページはそのまま使用できるものではないかもしれませんが、ここで説明したように、簡単にカスタマイズが可能であることがご理解いただけるでしょう。

ページのトップへ


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

ページのトップへ