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

  • [アーティクル]

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

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

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

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

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

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

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

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

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

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

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

、ReportsTo、および Country BoundFields をEmployeeID削除すると、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: 各従業員の LastName、 FirstName、 Title、および HireDate フィールドが表示されます (フルサイズの画像を表示する をクリックします)

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

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

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

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

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

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

先に進み、BoundField を FirstName TemplateField に変換します。 この変更後、Designerに知覚的な違いはありません。 これは、BoundField を TemplateField に変換すると、BoundField の外観を維持する TemplateField が作成されるためです。 Designerのこの時点で視覚的な違いはありませんが、この変換プロセスでは 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 は、プロパティがデータ フィールドの値FirstNameに設定されている Label を持つ Text 2 つのテンプレート と、EditItemTemplateプロパティがデータ フィールドにも設定FirstNameされている TextBox コントロールを持つ Text 2 つのテンプレートItemTemplateで構成されています。 databinding 構文 - <%# Bind("fieldName") %> - データ フィールド fieldName が指定された Web コントロール プロパティにバインドされていることを示します。

この TemplateField に LastName データ フィールドの値を追加するには、 に ItemTemplate 別の Label Web コントロールを追加し、その Text プロパティを にバインドする LastName必要があります。 これは、手動で、またはDesignerを介して行うことができます。 手動で行うには、適切な宣言構文を に 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>

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

GridView のテンプレートは、Designerを使用して編集できます

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

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

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

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

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

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

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

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

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

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

注意

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

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

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

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

この最初の手順を完了するには、BoundField をLastName削除し、TemplateField の プロパティのHeaderText名前を FirstName "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: カレンダー コントロールを使用してフィールドを表示するHiredDate

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

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

HiredDate BoundField を TemplateField に変換する

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

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

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

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

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

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

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

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

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

注意

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

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

従業員の HiredDate が予定表コントロールに表示される

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

注意

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

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

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

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

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

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

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

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

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

Protected Function DisplayDaysOnJob(employee As Northwind.EmployeesRow) As String
    ' Make sure HiredDate is not NULL... if so, return "Unknown"
    If employee.IsHireDateNull() Then
        Return "Unknown"
    Else
        ' Returns the number of days between the current
        ' date/time and HireDate
        Dim ts As TimeSpan = DateTime.Now.Subtract(employee.HireDate)
        Return ts.Days.ToString("#,##0")
    End If
End Function

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

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

GridView に新しい TemplateField を追加する

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

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

<%# DisplayDaysOnJob(CType(CType(Container.DataItem, DataRowView).Row,
    Northwind.EmployeesRow)) %>

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

注意

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

これらの微妙さのために、私はインスタンス全体 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(CType(CType(Container.DataItem, DataRowView).Row,
                    Northwind.EmployeesRow)) %>
            </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 は、独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズは24時間で2.0 ASP.NET 自分自身を教えています。 にアクセスするか、ブログを使用して にアクセスmitchell@4GuysFromRolla.comできます。これは でhttp://ScottOnWriting.NET見つけることができます。

特別な感謝

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

前へ次へ