ASP.NET 2.0 GridView サンプル - GridView の書式設定

[アーティクル]
10/27/2009

ASP.NET 2.0 GridView サンプル

目次に戻るには、こちらをクリックしてください。

ここまでのサンプルの GridView の出力は、単純で、あまり魅力的とは言えませんでした。たとえば、図 7 の GridView の出力には色が付いていません。各列のヘッダーのテキストは、DataSource フィールド名そのままであり、たとえば、ProductName (Product と Name の間にスペースはありません) というようになっています。この場合、Product Name、または単に Product と表示する方がわかりやすいでしょう。また、UnitPrice 列は、通貨として書式設定し、右詰めに配置する方が良いでしょう。列の順序を変更したり、データソースコントロールが戻す列の一部のみを表示するようにしたりする場合もあります。また、在庫がない場合は GridView の行の背景色を変えるなど、より高度な書式設定を導入することもあります。

これらのタスクは、GridView で簡単に実現できます。また、そのほとんどは、デザインビューから設定することができ、コードを記述する必要はありません。筆者のように芸術性に乏しい開発者のためには、GridView の外観を改良するのに便利なオートフォーマットウィザードも提供されています。このセクションでは、デザイナで設定できるプロパティによって GridView の書式を設定する方法、GridView に連結された実際のデータに基づいた書式設定をする方法、および GridView の外観にスキンを使用する方法を説明します。

GridView の外観に関するプロパティ

GridView には、ASP.NET 1.x の DataGrid と同様に、GridView の外観を飾るために設定するプロパティが豊富に用意されています。BackColor、Font、および ForeColor などのプロパティでは、GridView 全体の外観を設定することができます。また、HeaderStyle、RowStyle、AlternatingRowStyle、FooterStyle などのプロパティでは、GridView の特定の部分の外観を設定することができます。さらに、列ごとにスタイルを設定することも可能です。

エンドユーザーの目を楽しませる GridView を作成するために、さまざまな色やスタイルを独自に設定することができます。また、筆者のような開発者には、GridView にすでに設計されているスタイルを設定するオートフォーマットが便利です。オートフォーマットを使用するには、GridView のスマートタグの [オートフォーマット] リンクをクリックします。これにより、[オートフォーマット] ダイアログボックス (図 11 を参照) が表示されます。

Dd297767.gridview_fg11(ja-jp,MSDN.10).gif
図 11

オートフォーマットウィザードは、単に、さまざまな色のデザインを GridView に適用するだけです。データを通貨として書式設定したり、中央揃えで配置したりするなど、GridView の列の外観を調整する場合は、GridView のスマートタグの [列の編集] リンクをクリックします。クリックすると、GridView のすべての列を一覧するダイアログボックスが表示されます (図 12 を参照)。

Dd297767.gridview_fg12(ja-jp,MSDN.10).gif
図 12

左下のリストは、GridView にある列の一覧です。このダイアログボックスで、列の順序の調整、または列の削除および追加を行うことができます。GridView の列の順序を変更するには、上矢印、または下矢印をクリックして、列のリスト内で位置を調整します。GridView から列を削除するには、その列を選択し、[X] ボタンをクリックして削除します。

列の 1 つを選択すると、そのプロパティがペインの右側に表示されます。ItemStyle プロパティでは、データの水平方向の配置方法や、太字フォントで表示するかどうかなど、その列のアイテムの書式設定に関するプロパティを設定できます。列のヘッダーに表示されるテキストは、HeaderText プロパティで変更できます。列のデータの書式を設定するには、DataFormatString プロパティを使用し、そこに {0:format string} を設定します。たとえば、UnitPrice 列を通貨として書式設定する場合は、DataFormatString プロパティに {0:c} を設定します。

ノート 書式設定文字列として使用できるさまざまな値についての詳細は、.NET Framework 資料の型の書式設定 (英語) セクションを参照してください。

図 13 には、Products テーブルのデータを表示する、書式設定済みの GridView のスクリーンショットを示します。ヘッダーのテキストが既定の値から変更され、よりわかりやすくなっていることがわかります。この GridView には、色を設定 (ここでは、[オートフォーマット] ダイアログボックスの [Brown Sugar] オプションを使用) し、Price/Unit 列および Units In Stock 列のデータは、右詰めにしています。また、Price/Unit 列のデータは、通貨として書式設定しています。

Dd297767.gridview_fg13(ja-jp,MSDN.10).gif
図 13

デザイナで GridView の外観に関するプロパティを単純に変更することにより、宣言構文に適切な値が設定されます。このページの完成した宣言構文を以下に示します。

                  
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <asp:SqlDataSource ID="productsDataSource" 
             Runat="server" 
             SelectCommand="SELECT [ProductID], [ProductName], 
               [QuantityPerUnit], [UnitPrice], [UnitsInStock] FROM 
               [Products]"
         ConnectionString="<%$ ConnectionStrings:NWConnectionString %>" 
         DataSourceMode="DataReader">
        </asp:SqlDataSource>
        <asp:GridView ID="productGridView" Runat="server" 
          DataSourceID="productsDataSource"
            DataKeyNames="ProductID" AutoGenerateColumns="False" 
             BorderWidth="1px" BackColor="#DEBA84" 
             CellPadding="3" CellSpacing="2" BorderStyle="None" 
             BorderColor="#DEBA84">
            <FooterStyle ForeColor="#8C4510" 
              BackColor="#F7DFB5"></FooterStyle>
            <PagerStyle ForeColor="#8C4510" 
              HorizontalAlign="Center"></PagerStyle>
            <HeaderStyle ForeColor="White" Font-Bold="True" 
              BackColor="#A55129"></HeaderStyle>
            <Columns>
                <asp:BoundField ReadOnly="True" HeaderText="ID" 
                  InsertVisible="False" DataField="ProductID"
                    SortExpression="ProductID">
                    <ItemStyle HorizontalAlign="Center"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField HeaderText="Name" 
                 DataField="ProductName" 
                 SortExpression="ProductName"></asp:BoundField>
                <asp:BoundField HeaderText="Qty/Unit" 
                 DataField="QuantityPerUnit" 
                 SortExpression="QuantityPerUnit"></asp:BoundField>
                <asp:BoundField HeaderText="Price/Unit" 
                DataField="UnitPrice" SortExpression="UnitPrice" 
                DataFormatString="{0:c}">
                    <ItemStyle HorizontalAlign="Right"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField HeaderText="Units In Stock" 
                  DataField="UnitsInStock" 
                  SortExpression="UnitsInStock" 
                   DataFormatString="{0:d}">
                    <ItemStyle HorizontalAlign="Right"></ItemStyle>
                </asp:BoundField>
            </Columns>
            <SelectedRowStyle ForeColor="White" Font-Bold="True" 
             BackColor="#738A9C"></SelectedRowStyle>
            <RowStyle ForeColor="#8C4510" 
               BackColor="#FFF7E7"></RowStyle>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

GridView のスキン

ASP.NET 2.0 には、テーマおよびスキンというすばらしい 2 つの新機能があります。スキン は、特定のコントロールの外観を定義するファイルです。GridView コントロール用のスキンファイルを作成し、GridView の外観を SkinID 別に定義することができまます。テーマは、スキンの集合です。

テーマを使用するには、まず、Web アプリケーションの /app_themes ディレクトリにフォルダを作成します。このディレクトリには、作成するテーマごとに新規フォルダを追加します。この記事で提供しているダウンロードでは、/app_themes ディレクトリ内に GridViewTheme というフォルダが 1 つあります。テーマにスキンを追加するのは簡単です。WebControlToBeSkinned.skin という名前の新規ファイル (GridView 用のスキンを指定する場合、ファイル名は GridView.skin となります) をそのテーマのディレクトリに追加します。スキンファイルには、GridView の外観のマークアップを、SkinID 別に指定する宣言構文を含めます。以下の GridView.skin ファイルが示すように、ここでは、既定のマークアップと、2 つの SkinID、Professional および Fun についてのマークアップを作成しました。

                  
<asp:GridView runat="server" Font-Name="Arial" />
<asp:GridView runat="server" SkinID="Professional" Font-Name="Verdana"
                Font-Size="10pt" Cellpadding="4"
            HeaderStyle-BackColor="#444444"
            HeaderStyle-ForeColor="White"
                AlternatingRowStyle-BackColor="#dddddd" />
<asp:GridView runat="server" SkinID="Fun" Font-Name="Comic Sans MS"
                Font-Size="13pt" BackColor="Khaki"
                AlternatingRowStyle-BackColor="Tan"
            HeaderStyle-BackColor="SaddleBrown"
            HeaderStyle-ForeColor="White"
            HeaderStyle-Font-Bold="True"
            />

既定のマークアップは、最初にリストされているものです。これは、GridView を Arial フォントで表示するように指定しています。次の 2 つのセクションは、Professional および Fun という SkinID で使用されるマークアップを指定しています。Professional の場合、Verdana フォントが使用され、CellPadding は 4 に設定されます。また、ヘッダーは、背景色がダークグレーでテキストが白になります。交互に表示する行の背景色は、ライトグレーです。Fun の場合は、Comic Sans MS フォントが使用され、フォントのサイズは大きくなり、茶色がかった背景色になります。

最後に、GridView にスキンを適用するには、使用するテーマを @Page ディレクティブに追加し、GridView の SkinID を適切に設定します。以下のページは、@Page ディレクティブでテーマを指定し、3 つの GridView (SkinID の指定なし、Professional SkinID を指定、および Fun SkinID を指定の 3 つ）を表示します。

                  
<%@ Page Language="C#" StyleSheetTheme="GridViewTheme" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:SqlDataSource ID="productsSubsetDataSource" 
         Runat="server" SelectCommand="SELECT TOP 5 ProductID, 
           ProductName, UnitPrice FROM Products ORDER BY ProductName"
            ConnectionString=
             "<%$ ConnectionStrings:NWConnectionString %>">
        </asp:SqlDataSource>
        <h2>A GridViwe Without a Skin Specified</h2>
        <asp:GridView ID="GridView3" Runat="server" 
         DataSourceID="productsSubsetDataSource"
            DataKeyNames="ProductID" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField ReadOnly="True" 
                  HeaderText="ProductID" InsertVisible="False" 
                  DataField="ProductID"
                    SortExpression="ProductID"></asp:BoundField>
                <asp:BoundField HeaderText="ProductName" 
                  DataField="ProductName" SortExpression="ProductName">
                </asp:BoundField>
                <asp:BoundField HeaderText="UnitPrice" 
                  DataField="UnitPrice" SortExpression="UnitPrice">
                </asp:BoundField>
            </Columns>
        </asp:GridView>
        <h2>A GridViwe With the <i>Professional</i> Skin</h2>
        <asp:GridView ID="GridView1" Runat="server" 
           DataSourceID="productsSubsetDataSource"
            DataKeyNames="ProductID" AutoGenerateColumns="False" 
            SkinID="Professional">
            <Columns>
                <asp:BoundField ReadOnly="True" HeaderText="ProductID" 
                  InsertVisible="False" DataField="ProductID"
                    SortExpression="ProductID"></asp:BoundField>
                <asp:BoundField HeaderText="ProductName" 
                 DataField="ProductName" SortExpression="ProductName">
                </asp:BoundField>
                <asp:BoundField HeaderText="UnitPrice" 
                   DataField="UnitPrice" SortExpression="UnitPrice">
                </asp:BoundField>
            </Columns>
        </asp:GridView>
        <h2>A GridViwe With the <i>Fun</i> Skin</h2>
        <asp:GridView ID="GridView2" Runat="server" 
             DataSourceID="productsSubsetDataSource"
             DataKeyNames="ProductID" AutoGenerateColumns="False" 
             SkinID="Fun">
            <Columns>
                <asp:BoundField ReadOnly="True" HeaderText="ProductID" 
                   InsertVisible="False" DataField="ProductID"
                    SortExpression="ProductID"></asp:BoundField>
                <asp:BoundField HeaderText="ProductName" 
                  DataField="ProductName" SortExpression="ProductName">
                </asp:BoundField>
                <asp:BoundField HeaderText="UnitPrice" 
                  DataField="UnitPrice" SortExpression="UnitPrice">
                </asp:BoundField>
            </Columns>
        </asp:GridView>
    
    </div>
    </form>
</body>
</html>

図 14 は、このページをブラウザで表示した際のスクリーンショットです。3 つの GridView には外観の書式設定が適用されていますが、ASP.NET ページの宣言構文には該当する設定がないことに注意してください。つまり、この設定は、指定したテーマの GridView スキンファイルから、動的にインポートされています。

Dd297767.gridview_fg14(ja-jp,MSDN.10).gif
図 14

基本データに基づく GridView の書式設定

先の 2 つの例では、GridView の書式設定は静的に指定されていました。しかし、GridView のデータに基づいて書式設定を変更することもあります。たとえば、商品情報をリストする際、在庫のない商品を目立たせる必要があるとします。これを実現する方法として、Units In Stock の値が 0 の行の背景色を変えるという方法があります。

このためには、GridView の各行のデータを検査し、Units In Stock が 0 の場合には行の BackColor プロパティを変更する必要があります。GridView には、RowDataBound イベントがあります。このイベントは、1 行ごとに、行が作成され、その行がデータソースコントロールのデータの該当レコードに連結された後に発生します。このイベントのイベントハンドラを作成し、そこで、Units In Stock が 0 であるかをチェックし、0 である場合には GridView の行の BackColor プロパティを Yellow に設定します。

GridView の RowDataBound イベントのイベントハンドラを作成するには、デザインビューで GridView をクリックし、[プロパティ] ペインを表示します。[プロパティ] ペインをクリックすると、GridView のイベントの一覧が表示されます。ここで、RowDataBound 行に、作成するイベントハンドラの名前 (ここでのイベントハンドラは productsGridView_RowDataBound という名前にしました) を入力します。最後に、そのイベントハンドラに以下のコードを入力します。

productsGridView_RowDataBound イベントハンドラ (Visual Basic)

                  
Sub productsGridView_RowDataBound(ByVal sender As Object, _
  ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        ' UnitsInStock フィールドの値を判定
        Dim unitsInStock As Integer =  _
          Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, _
          "UnitsInStock"))
        If unitsInStock = 0 Then
            ' 行の背景色を yellow に設定
            e.Row.BackColor = Drawing.Color.Yellow
        End If
    End If
End Sub
productsGridView_RowDataBound イベント ハンドラ (C#)
void productsGridView_RowDataBound(object sender, 
  GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // UnitsInStock フィールドの値を判定
        int unitsInStock = 
         Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, 
         "UnitsInStock"));
        if (unitsInStock == 0)
            //  行の背景色を yellow に設定
            e.Row.BackColor = Color.Yellow;
    }
}

イベントハンドラの最初では、DataRow を処理しているかどうかをチェックします。GridView の RowDataBound イベントハンドラは、HeaderRow を含む各行が作成されるごとに発生することに注意してください。しかし、HeaderRow の Units In Stock 列にはデータが関連付けられていないので、DataRows のみを処理する必要があります。GridView 行に連結されたデータの UnitsInStock フィールドは、DataBinder.Eval() 呼び出しで、GridView の行に連結されたデータ (e.Row.DataItem)、および検査する値のフィールド名を渡して取得します。取得したら、在庫がゼロであるかどうかをチェックします。ゼロの場合には、行の BackColor プロパティを、Yellow に設定します。

図 15 は、この例をブラウザで表示した際のスクリーンショットです。在庫が 0 である行は黄色で表示されていることがわかります。

Dd297767.gridview_fg15(ja-jp,MSDN.10).gif
図 15

次のセクション: GridView でのマスタ/詳細データの表示

ASP.NET 2.0 GridView サンプル - GridView の書式設定