データに基づくカスタム書式設定 (VB)

2025-05-05

GridView、DetailsView、または FormView の形式を、バインドされたデータに基づいて調整するには、複数の方法で実行できます。このチュートリアルでは、DataBound イベントハンドラーと RowDataBound イベントハンドラーを使用して、データバインド形式を実現する方法について説明します。

イントロダクション

GridView、DetailsView、および FormView コントロールの外観は、さまざまなスタイル関連のプロパティを使用してカスタマイズできます。 CssClass、Font、BorderWidth、BorderStyle、BorderColor、Width、Heightなどのプロパティは、レンダリングされたコントロールの一般的な外観を決定します。 HeaderStyle、RowStyle、AlternatingRowStyleなどのプロパティを使用すると、これらの同じスタイル設定を特定のセクションに適用できます。同様に、これらのスタイル設定はフィールドレベルで適用できます。

ただし、多くのシナリオでは、書式設定の要件は表示されるデータの値によって異なります。たとえば、在庫切れの製品に注意を引くために、製品情報を一覧表示するレポートでは、 UnitsInStock フィールドと UnitsOnOrder フィールドの両方が 0 である製品の背景色が黄色に設定される場合があります。より高価な製品を強調するために、75.00ドルを超える製品の価格を太字で表示することができます。

GridView、DetailsView、または FormView の形式を、バインドされたデータに基づいて調整するには、複数の方法で実行できます。このチュートリアルでは、 DataBound と RowDataBound イベントハンドラーを使用して、データバインド形式を実現する方法について説明します。次のチュートリアルでは、別の方法について説明します。

DetailsView コントロールの`DataBound`Event ハンドラーの使用

データがデータソースコントロールから、またはプログラムによってコントロールの DataSource プロパティにデータを割り当て、その DataBind() メソッドを呼び出すことによって DetailsView にバインドされると、次の一連の手順が実行されます。

データ Web コントロールの DataBinding イベントがトリガーされます。
データはデータ Web コントロールにバインドされます。
データ Web コントロールの DataBound イベントがトリガーされます。

カスタムロジックは、手順 1 と 3 の直後にイベントハンドラーを介して挿入できます。 DataBound イベントのイベントハンドラーを作成することで、データ Web コントロールにバインドされているデータをプログラムで決定し、必要に応じて書式設定を調整できます。これを説明するために、製品に関する一般的な情報を一覧表示する DetailsView を作成しますが、$75.00 を超える場合は、UnitPrice値が太字の斜体フォントで表示されます。

手順 1: DetailsView で製品情報を表示する

CustomColors.aspx フォルダー内のCustomFormatting ページを開き、ツールボックスからデザイナーに DetailsView コントロールをドラッグし、そのIDプロパティ値を ExpensiveProductsPriceInBoldItalic に設定して、ProductsBLL クラスのGetProducts() メソッドを呼び出す新しい ObjectDataSource コントロールにバインドします。前のチュートリアルで詳しく調べたので、簡潔にするために、これを行う詳細な手順はここでは省略します。

ObjectDataSource を DetailsView にバインドしたら、少し時間を取ってフィールドリストを変更します。 ProductID、SupplierID、CategoryID、UnitsInStock、UnitsOnOrder、ReorderLevel、Discontinued BoundFields を削除し、残りの BoundFields の名前を変更して再フォーマットしました。また、 Width と Height の設定もクリアしました。 DetailsView には 1 つのレコードのみが表示されるため、エンドユーザーがすべての製品を表示できるようにするには、ページングを有効にする必要があります。これを行うには、DetailsView のスマートタグの [ページングを有効にする] チェックボックスをオンにします。

図 1: 図 1: DetailsView のスマートタグの [ページングを有効にする] チェックボックスをオンにします (フルサイズの画像を表示するをクリックします)。

これらの変更後、DetailsView マークアップは次のようになります。

<asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="True"
    AutoGenerateRows="False" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <Fields>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
          ReadOnly="True" SortExpression="SupplierName" />
        <asp:BoundField DataField="QuantityPerUnit"
          HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
          HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Fields>
</asp:DetailsView>

しばらくお使いのブラウザーでこのページをテストしてください。

図 2: DetailsView コントロールが一度に 1 つの製品を表示する (フルサイズの画像を表示するをクリックします)

手順 2: DataBound イベントハンドラー内のデータの値をプログラムで決定する

UnitPrice値が $75.00 を超える製品の価格を太字の斜体フォントで表示するには、まずプログラムでUnitPrice値を決定できる必要があります。 DetailsView の場合、これは DataBound イベントハンドラーで実行できます。イベントハンドラーを作成するには、デザイナーで DetailsView をクリックし、[プロパティ] ウィンドウに移動します。表示されていない場合は F4 キーを押して表示するか、[表示] メニューに移動して [プロパティウィンドウ] メニューオプションを選択します。 [プロパティ] ウィンドウで、稲妻アイコンをクリックして DetailsView のイベントを一覧表示します。次に、 DataBound イベントをダブルクリックするか、作成するイベントハンドラーの名前を入力します。

DataBound イベントのイベントハンドラーを作成する

図 3: DataBound イベントのイベントハンドラーを作成する

注

ASP.NET ページのコード部分からイベントハンドラーを作成することもできます。ページの上部に 2 つのドロップダウンリストがあります。左側のドロップダウンリストからオブジェクトを選択し、右側のドロップダウンリストからハンドラーを作成するイベントを選択すると、Visual Studio によって適切なイベントハンドラーが自動的に作成されます。

これにより、イベントハンドラーが自動的に作成され、追加されたコード部分にアクセスします。この時点で、次の情報が表示されます。

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound
End Sub

DetailsView にバインドされたデータには、 DataItem プロパティを使用してアクセスできます。厳密に型指定された DataRow インスタンスのコレクションで構成される、厳密に型指定された DataTable にコントロールをバインドしていることを思い出してください。 DataTable が DetailsView にバインドされると、DataTable の最初の DataRow が DetailsView の DataItem プロパティに割り当てられます。具体的には、 DataItem プロパティには、 DataRowView オブジェクトが割り当てられます。 DataRowViewのRow プロパティを使用して、基になる DataRow オブジェクト (実際にはProductsRow インスタンス) にアクセスできます。この ProductsRow インスタンスを取得したら、オブジェクトのプロパティ値を調べることで決定を下すことができます。

次のコードは、DetailsView コントロールにバインドされた UnitPrice 値が $75.00 を超えるかどうかを判断する方法を示しています。

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(ExpensiveProductsPriceInBoldItalic.DataItem, _
            System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice > 75 Then
    End If
End Sub

注

UnitPriceデータベースにはNULL値を含めることができるため、まず、NULLのProductsRow プロパティにアクセスする前に、UnitPrice値を処理していないことを確認します。 UnitPrice値があるときにNULL プロパティにアクセスしようとすると、ProductsRow オブジェクトが StrongTypingException 例外をスローするため、このチェックは重要です。

手順 3: DetailsView で UnitPrice 値を書式設定する

この時点で、DetailsView にバインドされた UnitPrice 値の値が $75.00 を超えているかどうかを判断できますが、プログラムで DetailsView の書式をそれに応じて調整する方法はまだ分かっていません。 DetailsView の行全体の書式を変更するには、 DetailsViewID.Rows(index)を使用してプログラムで行にアクセスします。特定のセルを変更するには、 DetailsViewID.Rows(index).Cells(index)を使用します。行またはセルへの参照を取得したら、スタイル関連のプロパティを設定して外観を調整できます。

プログラムを使用して行にアクセスするには、行のインデックス (0 から始まる) を把握している必要があります。 UnitPrice行は DetailsView の 5 番目の行であり、インデックスは 4 になり、ExpensiveProductsPriceInBoldItalic.Rows(4)を使用してプログラムでアクセスできます。この時点で、次のコードを使用して、行のコンテンツ全体を太字の斜体のフォントで表示できます。

ExpensiveProductsPriceInBoldItalic.Rows(4).Font.Bold = True
ExpensiveProductsPriceInBoldItalic.Rows(4).Font.Italic = True

ただし、これにより、ラベル (Price) と値の両方が太字と斜体になります。値を太字と斜体にしたい場合は、行の 2 番目のセルにこの書式を適用する必要があります。これは、次を使用して行うことができます。

ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).Font.Bold = True
ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).Font.Italic = True

ここまでのチュートリアルでは、前述のように特定のスタイルプロパティを設定するのではなく、レンダリングされたマークアップとスタイル関連の情報を完全に分離するためにスタイルシートを使用してきました。代わりに CSS クラスを使用しましょう。 Styles.css スタイルシートを開き、次の定義で ExpensivePriceEmphasis という名前の新しい CSS クラスを追加します。

.ExpensivePriceEmphasis
{
    font-weight: bold;
    font-style: italic;
}

次に、 DataBound イベントハンドラーで、セルの CssClass プロパティを ExpensivePriceEmphasis に設定します。次のコードは、 DataBound イベントハンドラー全体を示しています。

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(ExpensiveProductsPriceInBoldItalic.DataItem, _
            System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice > 75 Then
       ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).CssClass = _
            "ExpensivePriceEmphasis"
    End If
End Sub

価格が $75.00 未満の Chai を表示すると、価格は通常のフォントで表示されます (図 4 を参照)。ただし、価格が $97.00 の Mishi Kobe Niku を表示すると、価格は太字で斜体のフォントで表示されます (図 5 を参照)。

図 4: $75.00 未満の価格が標準フォントで表示される (フルサイズの画像を表示するをクリックします)

図 5: 高価な製品の価格は太字、斜体のフォントで表示されます (フルサイズの画像を表示するをクリックします)。

FormView コントロールの`DataBound`Event ハンドラーの使用

FormView にバインドされている基になるデータを決定する手順は、DetailsView で DataBound イベントハンドラーを作成し、 DataItem プロパティをコントロールにバインドされた適切なオブジェクト型にキャストして、続行する方法を決定する手順と同じです。ただし、FormView と DetailsView は、ユーザーインターフェイスの外観の更新方法によって異なります。

FormView には BoundFields が含まれていないため、 Rows コレクションがありません。代わりに、FormView はテンプレートで構成され、静的な HTML、Web コントロール、およびデータバインド構文を組み合わせて含めることができます。通常、FormView のスタイルを調整するには、FormView のテンプレート内の 1 つ以上の Web コントロールのスタイルを調整する必要があります。

これを説明するために、FormView を使用して前の例のような製品を一覧表示しますが、今回は製品名と在庫単位のみを表示し、在庫単位が 10 以下の場合は赤いフォントで表示します。

手順 4: FormView で製品情報を表示する

DetailsView の下の CustomColors.aspx ページに FormView を追加し、その ID プロパティを LowStockedProductsInRedに設定します。前の手順で作成した ObjectDataSource コントロールに FormView をバインドします。これにより、FormView の ItemTemplate、 EditItemTemplate、および InsertItemTemplate が作成されます。 EditItemTemplateとInsertItemTemplateを削除し、ItemTemplateを簡略化して、ProductNameとUnitsInStockの値だけを、それぞれ適切な名前の Label コントロールに含めます。前の例の DetailsView と同様に、FormView のスマートタグの [ページングを有効にする] チェックボックスもオンにします。

これらの編集後、FormView のマークアップは次のようになります。

<asp:FormView ID="LowStockedProductsInRed" runat="server"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    AllowPaging="True" EnableViewState="False">
    <ItemTemplate>
        <b>Product:</b>
        <asp:Label ID="ProductNameLabel" runat="server"
         Text='<%# Bind("ProductName") %>'>
        </asp:Label><br />
        <b>Units In Stock:</b>
        <asp:Label ID="UnitsInStockLabel" runat="server"
          Text='<%# Bind("UnitsInStock") %>'>
        </asp:Label>
    </ItemTemplate>
</asp:FormView>

ItemTemplateには次のものが含まれていることに注意してください。

静的 HTML テキスト "Product:" と "Units In Stock:" と、 <br /> 要素と <b> 要素。
Web は 、 ProductNameLabel と UnitsInStockLabelの 2 つの Label コントロールを制御します。
データバインド構文 は、 <%# Bind("ProductName") %> 構文と <%# Bind("UnitsInStock") %> 構文です。これらのフィールドの値を Label コントロールの Text プロパティに割り当てます。

手順 5: DataBound イベントハンドラー内のデータの値をプログラムで決定する

FormView のマークアップが完了したら、次の手順では、 UnitsInStock 値が 10 以下かどうかをプログラムで判断します。これは、DetailsView の場合とまったく同じ方法で FormView で実行されます。まず、FormView の DataBound イベントのイベントハンドラーを作成します。

DataBound イベントハンドラーを作成する

図 6: DataBound イベントハンドラーを作成する

イベントハンドラーでは、FormView の DataItem プロパティを ProductsRow インスタンスにキャストし、 UnitsInPrice 値が赤いフォントで表示する必要があるかどうかを判断します。

Protected Sub LowStockedProductsInRed_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles LowStockedProductsInRed.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(LowStockedProductsInRed.DataItem, System.Data.DataRowView).Row, _
            Northwind.ProductsRow)
    If Not product.IsUnitsInStockNull() AndAlso product.UnitsInStock <= 10 Then
        Dim unitsInStock As Label = _
            CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

        If unitsInStock IsNot Nothing Then
        End If
    End If
End Sub

手順 6: FormView の ItemTemplate で UnitsInStockLabel ラベルコントロールを書式設定する

最後の手順では、値が 10 以下の場合、表示される UnitsInStock 値を赤いフォントで書式設定します。これを実現するには、UnitsInStockLabelのItemTemplate コントロールにプログラムでアクセスし、テキストが赤で表示されるようにスタイルプロパティを設定する必要があります。テンプレート内の Web コントロールにアクセスするには、次のように FindControl("controlID") メソッドを使用します。

Dim someName As WebControlType = _
    CType(FormViewID.FindControl("controlID"), WebControlType)

この例では、 ID 値が UnitsInStockLabelされている Label コントロールにアクセスするため、次を使用します。

Dim unitsInStock As Label = _
    CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

Web コントロールへのプログラムによる参照を取得したら、必要に応じてスタイル関連のプロパティを変更できます。前の例と同様に、Styles.cssという名前の CSS クラスLowUnitsInStockEmphasis作成しました。このスタイルを Label Web コントロールに適用するには、それに応じてその CssClass プロパティを設定します。

Protected Sub LowStockedProductsInRed_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles LowStockedProductsInRed.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(LowStockedProductsInRed.DataItem, System.Data.DataRowView).Row, _
            Northwind.ProductsRow)
    If Not product.IsUnitsInStockNull() AndAlso product.UnitsInStock <= 10 Then
        Dim unitsInStock As Label = _
            CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

        If unitsInStock IsNot Nothing Then
            unitsInStock.CssClass = "LowUnitsInStockEmphasis"
        End If
    End If
End Sub

注

FindControl("controlID")を使用して Web コントロールにプログラムでアクセスし、そのスタイル関連のプロパティを設定するテンプレートを書式設定するための構文は、DetailsView コントロールまたは GridView コントロールで TemplateFields を使用する場合にも使用できます。次のチュートリアルでは、TemplateFields を調べます。

図 7 は、 UnitsInStock 値が 10 より大きい製品を表示する場合の FormView を示しています。図 8 の製品の値は 10 未満です。

図 7: 在庫が十分に大きい製品の場合、カスタム書式は適用されません (フルサイズの画像を表示するをクリックします)

図 8: 値が 10 以下の製品の在庫番号の単位が赤で表示されている (フルサイズの画像を表示するをクリックします)。

GridView の`RowDataBound`イベントを使用した書式設定

前に、DetailsView コントロールと FormView コントロールがデータバインド中に進行する一連の手順を調べました。これらの手順を復習としてもう一度見直してみましょう。

データ Web コントロールの DataBinding イベントがトリガーされます。
データはデータ Web コントロールにバインドされます。
データ Web コントロールの DataBound イベントがトリガーされます。

DetailsView と FormView には、1 つのレコードしか表示されないため、これら 3 つの簡単な手順で十分です。 (最初のレコードだけでなく) バインド されているすべての レコードを表示する GridView の場合、手順 2 はもう少し複雑です。

手順 2 では、GridView はデータソースを列挙し、レコードごとに GridViewRow インスタンスを作成し、現在のレコードをバインドします。 GridView に追加 GridViewRow ごとに、次の 2 つのイベントが発生します。

RowCreatedはGridViewRowが作成されたその後に発生する
RowDataBound は、現在のレコードが GridViewRowにバインドされた後に発生します。

GridView の場合、データバインディングは次の一連の手順によってより正確に記述されます。

GridView の DataBinding イベントが発生します。
データは GridView にバインドされます。

データソース内の各レコードについて
1. GridViewRow オブジェクトを作成します
2. RowCreated イベントを発生させる
3. レコードをGridViewRowにバインドします。
4. RowDataBound イベントを発生させる
5. GridViewRow コレクションにRowsを追加する
GridView の DataBound イベントが発生します。

GridView の個々のレコードの形式をカスタマイズするには、 RowDataBound イベントのイベントハンドラーを作成する必要があります。これを説明するために、各製品の名前、カテゴリ、価格を一覧表示する GridView を CustomColors.aspx ページに追加し、価格が 10.00 ドル未満の製品を黄色の背景色で強調表示します。

手順 7: GridView で製品情報を表示する

前の例の FormView の下に GridView を追加し、その ID プロパティを HighlightCheapProducts に設定します。ページ上のすべての製品を返す ObjectDataSource が既に存在するため、GridView をそのオブジェクトにバインドします。最後に、GridView の BoundFields を編集して、製品の名前、カテゴリ、価格のみを含めます。これらの編集後、GridView のマークアップは次のようになります。

<asp:GridView ID="HighlightCheapProducts" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False" runat="server">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
          HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

図 9 は、ブラウザーで表示したときのこの時点までの進行状況を示しています。

図 9: GridView は、各製品の名前、カテゴリ、および価格を一覧表示します (フルサイズの画像を表示するをクリックします)。

手順 8: RowDataBound イベントハンドラー内のデータの値をプログラムで決定する

ProductsDataTableが GridView にバインドされると、そのProductsRowインスタンスが列挙され、各ProductsRowに対してGridViewRowが作成されます。 GridViewRowのDataItem プロパティは、特定のProductRowに割り当てられ、その後、GridView のRowDataBound イベントハンドラーが発生します。 GridView にバインドされている各製品の UnitPrice 値を確認するには、GridView の RowDataBound イベントのイベントハンドラーを作成する必要があります。このイベントハンドラーでは、現在のUnitPriceのGridViewRow値を調べて、その行の書式設定を決定できます。

このイベントハンドラーは、FormView および DetailsView と同じ一連の手順を使用して作成できます。

GridView の RowDataBound イベントのイベントハンドラーを作成する

図 10: GridView の RowDataBound イベントのイベントハンドラーを作成する

この方法でイベントハンドラーを作成すると、次のコードが ASP.NET ページのコード部分に自動的に追加されます。

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

End Sub

RowDataBound イベントが発生すると、そのイベントハンドラーの 2 番目のパラメーターとして、GridViewRowEventArgsという名前のプロパティを持つRow型のオブジェクトが渡されます。このプロパティは、データバインドされた GridViewRow への参照を返します。 ProductsRowにバインドされたGridViewRowインスタンスにアクセスするには、次のようにDataItemプロパティを使用します。

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
    End If
End Sub

RowDataBound イベントハンドラーを使用する場合は、GridView がさまざまな種類の行で構成されていること、およびすべての行の種類に対してこのイベントが発生することを念頭に置く必要があります。 GridViewRowの型は、RowType プロパティによって決定でき、使用可能な値のいずれかを持つことができます。

DataRow GridView のレコードにバインドされている行 DataSource
EmptyDataRow GridView の DataSource が空の場合に表示される行
Footer フッター行;GridView の ShowFooter プロパティがに設定されている場合に表示されます。 True
Header ヘッダー行。GridView の ShowHeader プロパティが True に設定されている場合に表示されます (既定値)
Pager ページングを実装する GridView の場合は、ページングインターフェイスを表示する行
Separator GridView には使用されませんが、DataList コントロールと Repeater コントロールの RowType プロパティで使用されます。今後のチュートリアルで説明する 2 つのデータ Web コントロール

EmptyDataRow、Header、Footer、およびPagerの行はDataSource レコードに関連付けられていないため、Nothing プロパティの値は常にDataItemになります。このため、現在の GridViewRowの DataItem プロパティを操作する前に、まず、 DataRowを処理していることを確認する必要があります。これを行うには、次のように GridViewRowの RowType プロパティを確認します。

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
        If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
        End If
    End If
End Sub

手順 9: UnitPrice 値が $10.00 未満の場合に黄色の行を強調表示する

最後の手順では、その行のGridViewRow値が $10.00 未満の場合は、プログラムによってUnitPrice全体を強調表示します。 GridView の行またはセルにアクセスするための構文は、行全体にアクセスするための DetailsView GridViewID.Rows(index) と同じで、特定のセルにアクセス GridViewID.Rows(index).Cells(index) 。ただし、 RowDataBound イベントハンドラーが起動すると、 GridViewRow バインドされたデータはまだ GridView の Rows コレクションに追加されていません。したがって、Rows コレクションを使用して、GridViewRow イベントハンドラーから現在のRowDataBound インスタンスにアクセスすることはできません。

GridViewID.Rows(index)の代わりに、GridViewRowを使用して、RowDataBound イベントハンドラー内の現在のe.Row インスタンスを参照できます。つまり、GridViewRow イベントハンドラーから現在のRowDataBound インスタンスを強調表示するために使用します。

e.Row.BackColor = System.Drawing.Color.Yellow

GridViewRowのBackColorプロパティを直接設定するのではなく、CSS クラスの使用に取り組みましょう。背景色を黄色に設定する AffordablePriceEmphasis という名前のCSSクラスを作成しました。完了した RowDataBound イベントハンドラーは次のとおりです。

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
        If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
            e.Row.CssClass = "AffordablePriceEmphasis"
        End If
    End If
End Sub

図 11: 最も手頃な価格の製品は黄色で強調表示されています (フルサイズの画像を表示するをクリックします)。

概要

このチュートリアルでは、コントロールにバインドされたデータに基づいて GridView、DetailsView、および FormView の書式を設定する方法について説明しました。これを達成するために、DataBound イベントまたは RowDataBound イベントのイベントハンドラーを作成し、基になるデータを調査して必要に応じて書式を変更しました。 DetailsView または FormView にバインドされたデータにアクセスするには、DataItem イベントハンドラーのDataBound プロパティを使用します。GridView の場合、各GridViewRow インスタンスのDataItem プロパティには、RowDataBound イベントハンドラーで使用できる、その行にバインドされたデータが含まれます。

プログラムによってデータ Web コントロールの書式設定を調整するための構文は、Web コントロールと、書式設定するデータの表示方法によって異なります。 DetailsView コントロールと GridView コントロールの場合、行とセルには序数インデックスでアクセスできます。テンプレートを使用する FormView の場合、 FindControl("controlID") メソッドは、テンプレート内から Web コントロールを見つけるためによく使用されます。

次のチュートリアルでは、GridView と DetailsView でテンプレートを使用する方法について説明します。さらに、基になるデータに基づいて書式設定をカスタマイズするためのもう 1 つの手法が表示されます。

プログラミングに満足!

著者について

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

特別な感謝

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

前へ次へ

次の方法で共有

データに基づくカスタム書式設定 (VB)

イントロダクション

DetailsView コントロールのDataBoundEvent ハンドラーの使用

手順 1: DetailsView で製品情報を表示する

手順 2: DataBound イベント ハンドラー内のデータの値をプログラムで決定する

手順 3: DetailsView で UnitPrice 値を書式設定する

FormView コントロールのDataBoundEvent ハンドラーの使用

手順 4: FormView で製品情報を表示する

手順 5: DataBound イベント ハンドラー内のデータの値をプログラムで決定する

手順 6: FormView の ItemTemplate で UnitsInStockLabel ラベル コントロールを書式設定する

GridView のRowDataBoundイベントを使用した書式設定