次の方法で共有


GridView コントロールで TemplateFields を使用する (C#)

Scott Mitchell によって

PDF をダウンロードする

柔軟性を提供するために、GridView にはテンプレートを使用してレンダリングする TemplateField が用意されています。 テンプレートには、静的 HTML、Web コントロール、およびデータ バインド構文の組み合わせを含めることができます。 このチュートリアルでは、TemplateField を使用して GridView コントロールでより高度なカスタマイズを実現する方法について説明します。

イントロダクション

GridView は、レンダリングされた出力に含める DataSource のプロパティとデータの表示方法を示す一連のフィールドで構成されます。 最も単純なフィールド型は BoundField で、データ値がテキストとして表示されます。 他のフィールド型では、代替 HTML 要素を使用してデータが表示されます。 たとえば、CheckBoxField は、チェックされた状態が指定されたデータ フィールドの値に依存するチェック ボックスとしてレンダリングされます。ImageField は、指定されたデータ フィールドに基づくイメージ ソースを持つイメージをレンダリングします。 基になるデータ フィールド値に依存する状態のハイパーリンクとボタンは、HyperLinkField フィールド型と ButtonField フィールド型を使用してレンダリングできます。

CheckBoxField、ImageField、HyperLinkField、ButtonField の各フィールド型では、データの代替ビューが可能ですが、書式設定に関してはまだかなり制限されています。 CheckBoxField では 1 つのチェック ボックスのみを表示できますが、ImageField では 1 つのイメージのみを表示できます。 特定のフィールドで、テキスト、チェック ボックス、 画像 をすべて異なるデータ フィールド値に基づいて表示する必要がある場合はどうなりますか? または、CheckBox、Image、HyperLink、または Button 以外の Web コントロールを使用してデータを表示する場合はどうでしょうか。 さらに、BoundField は表示を 1 つのデータ フィールドに制限します。 1 つの GridView 列に 2 つ以上のデータ フィールド値を表示する場合はどうしますか?

このレベルの柔軟性に対応するために、GridView にはテンプレートを使用してレンダリングされる TemplateField が用意されています。 テンプレートには、静的 HTML、Web コントロール、およびデータ バインド構文の組み合わせを含めることができます。 さらに、TemplateField には、さまざまな状況に合わせてレンダリングをカスタマイズするために使用できるさまざまなテンプレートがあります。 たとえば、 ItemTemplate は既定で各行のセルをレンダリングするために使用されますが、 EditItemTemplate テンプレートを使用して、データを編集するときにインターフェイスをカスタマイズできます。

このチュートリアルでは、TemplateField を使用して GridView コントロールでより高度なカスタマイズを実現する方法について説明します。 前の チュートリアル では、 DataBoundRowDataBound イベント ハンドラーを使用して、基になるデータに基づいて書式設定をカスタマイズする方法について説明しました。 基になるデータに基づいて書式設定をカスタマイズするもう 1 つの方法は、テンプレート内から書式設定メソッドを呼び出すことです。 このチュートリアルでは、この手法についても説明します。

このチュートリアルでは、TemplateFields を使用して、従業員の一覧の外観をカスタマイズします。 具体的には、すべての従業員を一覧表示しますが、従業員の姓と名を 1 つの列に表示し、その従業員の雇用日を予定表コントロールに表示し、会社で雇用された日数を示す状態列を表示します。

3 つの TemplateFields を使用して表示をカスタマイズする

図 1: 3 つの TemplateFields を使用してディスプレイをカスタマイズする (フルサイズの画像を表示する をクリックします)

手順 1: データを GridView にバインドする

TemplateFields を使用して外観をカスタマイズする必要があるレポートシナリオでは、まず BoundFields のみを含む GridView コントロールを作成してから、新しい TemplateField を追加するか、必要に応じて既存の BoundFields を TemplateFields に変換するのが最も簡単です。 そのため、デザイナーを使用してページに GridView を追加し、従業員の一覧を返す ObjectDataSource にバインドして、このチュートリアルを開始しましょう。 次の手順では、従業員フィールドごとに BoundFields を含む GridView を作成します。

GridViewTemplateField.aspx ページを開き、ツールボックスからデザイナーに GridView をドラッグします。 GridView のスマート タグから、 EmployeesBLL クラスの GetEmployees() メソッドを呼び出す新しい ObjectDataSource コントロールを追加することを選択します。

GetEmployees() メソッドを呼び出す新しい ObjectDataSource コントロールを追加する

図 2: GetEmployees() メソッドを呼び出す新しい ObjectDataSource コントロールを追加します (フルサイズの画像を表示する をクリックします)。

この方法で GridView をバインドすると、従業員の各プロパティ ( EmployeeIDLastNameFirstNameTitleHireDateReportsToCountry) の BoundField が自動的に追加されます。 このレポートでは、 EmployeeIDReportsTo、または Country プロパティの表示を気にしないようにしましょう。 これらの BoundFields を削除するには、次の手順を実行します。

  • [フィールド] ダイアログ ボックスを使用して、GridView のスマート タグから [列の編集] リンクをクリックして、このダイアログ ボックスを表示します。 次に、左下の一覧から BoundFields を選択し、赤い X ボタンをクリックして BoundField を削除します。
  • ソース ビューから GridView の宣言構文を手動で編集し、削除する BoundField の <asp:BoundField> 要素を削除します。

BoundFields の EmployeeIDReportsToCountry を削除すると、GridView のマークアップは次のようになります。

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:BoundField DataField="LastName" HeaderText="LastName"
            SortExpression="LastName" />
        <asp:BoundField DataField="FirstName" HeaderText="FirstName"
            SortExpression="FirstName" />
        <asp:BoundField DataField="Title" HeaderText="Title"
            SortExpression="Title" />
        <asp:BoundField DataField="HireDate" HeaderText="HireDate"
            SortExpression="HireDate" />
    </Columns>
</asp:GridView>

ブラウザーで進行状況を確認します。 この時点で、各従業員のレコードと 4 つの列を含むテーブルが表示されます。1 つは従業員の姓、1 つは名、1 つは役職、もう 1 つは雇用日です。

LastName、FirstName、Title、HireDate の各フィールドが従業員ごとに表示されます

図 3: 各従業員の LastNameFirstNameTitle、および HireDate フィールドが表示されます (フルサイズの画像を表示する をクリックします)。

手順 2: 1 つの列に姓と名を表示する

現在、各従業員の姓と名は別々の列に表示されます。 代わりに、それらを 1 つの列に結合すると便利な場合があります。 これを実現するには、TemplateField を使用する必要があります。 新しい TemplateField を追加し、必要なマークアップとデータ バインド構文を追加してから、 FirstName と boundFields LastName を削除するか、または FirstName BoundField を TemplateField に変換し、TemplateField を編集して LastName 値を含め、 LastName BoundField を削除することができます。

どちらの方法でも同じ結果が得られますが、可能であれば BoundFields を TemplateFields に変換するのが好きです。これは、変換によって、BoundField の外観と機能を模倣するために Web コントロールとデータ バインド構文を使用して ItemTemplateEditItemTemplate が自動的に追加されるためです。 この利点は、変換プロセスで一部の作業が実行されるため、TemplateField の作業を減らす必要があるということです。

既存の BoundField を TemplateField に変換するには、GridView のスマート タグから [列の編集] リンクをクリックし、[フィールド] ダイアログ ボックスを表示します。 左下隅のリストから変換する BoundField を選択し、右下隅にある [このフィールドを TemplateField に変換する] リンクをクリックします。

[フィールド] ダイアログ ボックスから BoundField を TemplateField に変換する

図 4: [フィールド] ダイアログ ボックスから BoundField を TemplateField に変換する (フルサイズの画像を表示する をクリックします)

次に進み、 FirstName BoundField を TemplateField に変換します。 この変更の後、デザイナーに知覚的な違いはありません。 これは、BoundField を TemplateField に変換すると、BoundField の外観を維持する TemplateField が作成されるためです。 デザイナーでは、この時点で視覚的な違いはありませんが、この変換プロセスは BoundField の宣言構文 ( <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> ) を次の TemplateField 構文に置き換えています。

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

ご覧のように、TemplateField は、ItemTemplate プロパティが Text データ フィールドの値に設定されている Label を持つFirstNameと、EditItemTemplate プロパティが Text データ フィールドにも設定されている TextBox コントロールを持つFirstNameで構成されています。 データ バインド構文 ( <%# Bind("fieldName") %> ) は、 fieldName データ フィールドが指定された Web コントロール プロパティにバインドされていることを示します。

この TemplateField に LastName データ フィールドの値を追加するには、 ItemTemplate に別の Label Web コントロールを追加し、その Text プロパティを LastNameにバインドする必要があります。 これは、手動またはデザイナーを使用して実行できます。 手動で行うには、 ItemTemplateに適切な宣言構文を追加するだけです。

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
        <asp:Label ID="Label2" runat="server"
            Text='<%# Bind("LastName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

デザイナーで追加するには、GridView のスマート タグから [テンプレートの編集] リンクをクリックします。 これにより、GridView のテンプレート編集インターフェイスが表示されます。 このインターフェイスのスマート タグは、GridView のテンプレートの一覧です。 現時点では TemplateField が 1 つしかないため、ドロップダウン リストに表示されるテンプレートは、 FirstName TemplateField のテンプレートと EmptyDataTemplatePagerTemplateだけです。 EmptyDataTemplate テンプレート (指定されている場合) は、GridView にバインドされたデータに結果がない場合に GridView の出力をレンダリングするために使用されます。PagerTemplate (指定されている場合) は、ページングをサポートする GridView のページング インターフェイスをレンダリングするために使用されます。

GridView のテンプレートはデザイナーを使用して編集できます

図 5: GridView のテンプレートはデザイナーを使用して編集できます (フルサイズの画像を表示する をクリックします)。

また、LastName TemplateField にFirstNameを表示するには、ツールボックスから GridView のテンプレート編集インターフェイスの FirstName TemplateField のItemTemplateに Label コントロールをドラッグします。

FirstName TemplateField の ItemTemplate にラベル Web コントロールを追加する

図 6: FirstName TemplateField の ItemTemplate にラベル Web コントロールを追加する (フルサイズの画像を表示する をクリックします)

この時点で、TemplateField に追加された Label Web コントロールの Text プロパティは "Label" に設定されます。 このプロパティが代わりに LastName データ フィールドの値にバインドされるように、これを変更する必要があります。 これを行うには、ラベル コントロールのスマート タグをクリックし、[DataBindings の編集] オプションを選択します。

ラベルのスマート タグから [DataBindings の編集] オプションを選択する

図 7: ラベルのスマート タグから DataBindings の編集オプションを選択します (フルサイズの画像を表示する をクリックします)。

これにより、[DataBindings] ダイアログ ボックスが表示されます。 ここから、左側のリストからデータ バインドに参加するプロパティを選択し、右側のドロップダウン リストからデータをバインドするフィールドを選択できます。 左側から Text プロパティを選択し、右側から LastName フィールドを選択し、[OK] をクリックします。

Text プロパティを LastName データ フィールドにバインドする

図 8: Text プロパティを LastName データ フィールドにバインドする (フルサイズの画像を表示する をクリックします)

[DataBindings] ダイアログ ボックスでは、双方向データ バインドを実行するかどうかを指定できます。 このチェック ボックスをオフのままにすると、<%# Eval("LastName")%>の代わりにデータ バインド構文<%# Bind("LastName")%>が使用されます。 このチュートリアルでは、どちらの方法でも問題ありません。 双方向データ バインドは、データを挿入および編集するときに重要になります。 ただし、単にデータを表示する場合は、どちらの方法も同様に機能します。 今後のチュートリアルでは、双方向データ バインドについて詳しく説明します。

ブラウザーを使用してこのページを表示します。 ご覧のように、GridView には引き続き 4 つの列が含まれています。ただし、FirstName列には、FirstNameLastNameのデータ フィールド値が一覧表示されます。

FirstName と LastName の両方の値が 1 つの列に表示されます

図 9: FirstNameLastName の両方の値が 1 つの列に表示されます (フルサイズの画像を表示する をクリックします)。

この最初の手順を完了するには、BoundField LastName を削除し、 FirstName TemplateField の HeaderText プロパティの名前を "Name" に変更します。 これらの変更後、GridView の宣言型マークアップは次のようになります。

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name" SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="Title"
            SortExpression="Title" />
        <asp:BoundField DataField="HireDate" HeaderText="HireDate"
            SortExpression="HireDate" />
    </Columns>
</asp:GridView>

各従業員の姓と名が 1 列に表示されます

図 10: 各従業員の姓と名が 1 つの列に表示されます (フルサイズの画像を表示する をクリックします)。

手順 3: 予定表コントロールを使用してHiredDateField を表示する

GridView でデータ フィールド値をテキストとして表示することは、BoundField を使用するのと同じくらい簡単です。 ただし、特定のシナリオでは、データはテキストだけでなく、特定の Web コントロールを使用して表現するのが最適です。 このようなデータの表示のカスタマイズは、TemplateFields を使用して可能です。 たとえば、従業員の採用日をテキストとして表示するのではなく、( カレンダー コントロールを使用して) 採用日が強調表示された予定表を表示できます。

これを実現するには、まず、 HiredDate BoundField を TemplateField に変換します。 GridView のスマート タグに移動し、[列の編集] リンクをクリックするだけで、[フィールド] ダイアログ ボックスが表示されます。 BoundField HiredDate を選択し、[このフィールドを TemplateField に変換する] をクリックします。

HiredDate BoundField を TemplateField に変換する

図 11: HiredDate BoundField を TemplateField に変換する (フルサイズの画像を表示する をクリックします)

手順 2 で見たように、BoundField は、ItemTemplateEditItemTemplate を含む TemplateField に置き換えられます。この TemplateField には、Label と TextBox が含まれ、Text プロパティがデータバインド構文 HiredDate<%# Bind("HiredDate")%> 値にバインドされます。

テキストを Calendar コントロールに置き換えるには、ラベルを削除して Calendar コントロールを追加してテンプレートを編集します。 デザイナーから、GridView のスマート タグから [テンプレートの編集] を選択し、ドロップダウン リストから HireDate TemplateField の ItemTemplate を選択します。 次に、ラベル コントロールを削除し、ツールボックスからテンプレート編集インターフェイスに Calendar コントロールをドラッグします。

HireDate TemplateField の ItemTemplate に予定表コントロールを追加する

図 12: HireDate TemplateField の ItemTemplate に予定表コントロールを追加する (フルサイズの画像を表示する をクリックします)。

この時点で、GridView の各行には、 HiredDate TemplateField に Calendar コントロールが含まれます。 ただし、従業員の実際の HiredDate 値は Calendar コントロールのどこにも設定されていないため、各 Calendar コントロールは既定で現在の月と日付を表示します。 これを解決するには、各従業員の HiredDate を予定表コントロールの SelectedDate プロパティと VisibleDate プロパティに割り当てる必要があります。

予定表コントロールのスマート タグで、[DataBinding の編集] を選択します。 次に、 SelectedDate プロパティと VisibleDate プロパティの両方を HiredDate データ フィールドにバインドします。

SelectedDate プロパティと VisibleDate プロパティを HiredDate データ フィールドにバインドする

図 13: SelectedDate プロパティと VisibleDate プロパティを HiredDate データ フィールドにバインドする (フルサイズの画像を表示する をクリックします)

予定表コントロールの選択した日付が必ずしも表示されている必要はありません。 たとえば、カレンダーでは、選択した日付として 1999 年 8 月 1を指定しても、現在の月と年が表示されている場合があります。 選択した日付と表示される日付は、Calendar コントロールの SelectedDate プロパティと VisibleDate プロパティによって指定されます。 従業員の HiredDate を選択し、それが表示されるようにするために、両方のプロパティを HireDate データフィールドにバインドする必要があります。

ブラウザーでページを表示すると、カレンダーに従業員の採用日の月が表示され、その特定の日付が選択されます。

従業員の採用日がカレンダーコントロールに表示される

図 14: 従業員の HiredDate が予定表コントロールに表示されます (フルサイズの画像を表示する をクリックします)。

これまでに見てきたすべての例とは対照的に、このチュートリアルでは、この GridView のプロパティEnableViewStateに設定false。 この決定の理由は、カレンダー コントロールの日付をクリックするとポストバックが発生し、カレンダーの選択した日付がクリックした日付に設定されるためです。 ただし、GridView のビューステートが無効になっている場合、各ポストバックで GridView のデータは基になるデータ ソースにリバインドされます。これにより、カレンダーの選択した日付が従業員のに戻HireDate、ユーザーが選択した日付が上書きされます。

このチュートリアルでは、ユーザーは従業員の HireDateを更新できないため、これは無意味な議論です。 カレンダー コントロールを構成して、日付を選択できないようにすることをお勧めします。 関係なく、このチュートリアルでは、状況によっては、特定の機能を提供するためにビューステートを有効にする必要があることを示します。

手順 4: 従業員が会社に勤務した日数を表示する

これまでに、TemplateFields の 2 つのアプリケーションを見てきました。

  • 2 つ以上のデータ フィールド値を 1 つの列に結合し、
  • テキストではなく Web コントロールを使用してデータ フィールド値を表現する

TemplateFields の 3 番目の用途は、GridView の基になるデータに関するメタデータを表示することです。 たとえば、従業員の雇用日を表示するだけでなく、その従業員がジョブに勤務した合計日数を表示する列を作成することもできます。

さらに、基になるデータを Web ページ レポートでデータベースに格納されている形式とは異なる方法で表示する必要があるシナリオでは、TemplateFields のもう 1 つの用途が発生します。 Employees テーブルに、従業員の性別を示す文字GenderまたはMを格納するF フィールドがあるとします。 この情報を Web ページに表示する場合は、"M" または "F" ではなく、性別を "男性" または "女性" として表示できます。

どちらのシナリオも、テンプレートから呼び出される ASP.NET ページの分離コード クラス (または、 メソッドとして実装された別のクラス ライブラリ) にstaticを作成することで処理できます。 このような書式設定メソッドは、前に説明したのと同じデータ バインド構文を使用してテンプレートから呼び出されます。 書式設定メソッドは、任意の数のパラメーターを受け取ることができますが、文字列を返す必要があります。 この返される文字列は、テンプレートに挿入される HTML です。

この概念を説明するために、チュートリアルを拡張して、従業員が職務に就いた合計日数を一覧表示する列を表示しましょう。 この書式設定メソッドは、 Northwind.EmployeesRow オブジェクトを受け取り、従業員が文字列として採用された日数を返します。 このメソッドは、ASP.NET ページの分離コード クラスに追加できますが、テンプレートからアクセスできるようにするには、またはprotectedとしてマークするpublic

protected string DisplayDaysOnJob(Northwind.EmployeesRow employee)
{
    // Make sure HiredDate is not null... if so, return "Unknown"
    if (employee.IsHireDateNull())
        return "Unknown";
    else
    {
        // Returns the number of days between the current
        // date/time and HireDate
        TimeSpan ts = DateTime.Now.Subtract(employee.HireDate);
        return ts.Days.ToString("#,##0");
    }
}

HiredDate フィールドにはデータベース値NULL含めることができるため、計算を続行する前に、まず値がNULLされていないことを確認する必要があります。 HiredDate値がNULLの場合は、文字列 "Unknown" を返します。NULLでない場合は、現在の時刻とHiredDate値の差を計算し、日数を返します。

このメソッドを利用するには、データ バインド構文を使用して GridView の TemplateField から呼び出す必要があります。 まず、GridView のスマート タグの [列の編集] リンクをクリックし、新しい TemplateField を追加して、GridView に新しい TemplateField を追加します。

GridView に新しい TemplateField を追加する

図 15: GridView に新しい TemplateField を追加する (フルサイズの画像を表示する をクリックします)

この新しい TemplateField の HeaderText プロパティを "ジョブの日" に設定し、その ItemStyleHorizontalAlign プロパティを Center に設定します。 テンプレートから DisplayDaysOnJob メソッドを呼び出すには、 ItemTemplate を追加し、次のデータ バインド構文を使用します。

<%# DisplayDaysOnJob((Northwind.EmployeesRow)
     ((System.Data.DataRowView) Container.DataItem).Row) %>

Container.DataItemは、DataRowViewにバインドされたDataSource レコードに対応するGridViewRow オブジェクトを返します。 その Row プロパティは、厳密に型指定された Northwind.EmployeesRowを返します。これは、 DisplayDaysOnJob メソッドに渡されます。 このデータ バインド構文は、(次の宣言構文に示すように) ItemTemplate に直接表示することも、Label Web コントロールの Text プロパティに割り当てることもできます。

または、EmployeesRowインスタンスを渡す代わりに、HireDateを使用して<%# DisplayDaysOnJob(Eval("HireDate")) %>値を渡すことができます。 ただし、Eval メソッドはobjectを返すので、代わりに DisplayDaysOnJob 型の入力パラメーターを受け入れるように、object メソッドシグネチャを変更する必要があります。 Eval("HireDate") テーブルのDateTime列にHireDate値を含めることができるため、Employees呼び出しをNULLに盲目的にキャストすることはできません。 そのため、object メソッドの入力パラメーターとしてDisplayDaysOnJobを受け入れ、データベース NULL値 (Convert.IsDBNull(objectToCheck) を使用して実現可能) があるかどうかを確認し、それに応じて続行する必要があります。

これらの微妙さのために、私は EmployeesRow インスタンス全体を渡すように選択しました。 次のチュートリアルでは、 Eval("columnName") 構文を使用して入力パラメーターを書式設定メソッドに渡すためのより適切な例を示します。

TemplateField が追加された後の GridView の宣言構文と、DisplayDaysOnJobから呼び出された ItemTemplate メソッドを次に示します。

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name" SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="Title"
            SortExpression="Title" />
        <asp:TemplateField HeaderText="HireDate"
            SortExpression="HireDate">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox2" runat="server"
                    Text='<%# Bind("HireDate") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Calendar ID="Calendar1" runat="server"
                    SelectedDate='<%# Bind("HireDate") %>'
                    VisibleDate='<%# Eval("HireDate") %>'>
            </asp:Calendar>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Days On The Job">
            <ItemTemplate>
                <%# DisplayDaysOnJob((Northwind.EmployeesRow)
                    ((System.Data.DataRowView) Container.DataItem).Row) %>
            </ItemTemplate>
            <ItemStyle HorizontalAlign="Center" />
        </asp:TemplateField>
    </Columns>
</asp:GridView>

図 16 は、ブラウザーを使用して表示した場合の、完成したチュートリアルを示しています。

従業員が業務を開始してからの経過日数が表示される

図 16: 従業員がジョブにいた日数が表示されます (フルサイズの画像を表示する をクリックします)。

概要

GridView コントロールの TemplateField を使用すると、他のフィールド コントロールよりも高い柔軟性でデータを表示できます。 TemplateFields は、次の状況に最適です。

  • 1 つの GridView 列に複数のデータ フィールドを表示する必要がある
  • データは、プレーン テキストではなく Web コントロールを使用して表現するのが最適です
  • 出力は、メタデータの表示やデータの再フォーマットなど、基になるデータに依存します

TemplateFields は、データの表示のカスタマイズに加えて、データの編集と挿入に使用されるユーザー インターフェイスのカスタマイズにも使用されます。これについては、今後のチュートリアルで説明します。

次の 2 つのチュートリアルでは、DetailsView での TemplateFields の使用から始めて、テンプレートの探索を続けます。 その後、フィールドの代わりにテンプレートを使用して、データのレイアウトと構造の柔軟性を高める FormView に目を向けます。

プログラミングに満足!

著者について

7 冊の ASP/ASP.NET 書籍の著者であり、4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジを使用しています。 Scott は、独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズ・ティーチ・セルフ ASP.NET 24時間で2.0です。 彼には mitchell@4GuysFromRolla.comで連絡できます。

特別な感謝

このチュートリアル シリーズは、多くの役に立つ校閲者によってレビューされました。 このチュートリアルのリード レビュー担当者は Dan Jagers でした。 今後の MSDN の記事を確認することに関心がありますか? その場合は、mitchell@4GuysFromRolla.comにご連絡ください。