ASP.NET 2.0 の GridView の例: GridView 列に画像を表示する

[アーティクル]
06/24/2011

ここをクリックして TOC に戻ります。

私が教える ASP.NET 1.xクラスでは、学生のためのコース長のプロジェクトは、オンラインフォトアルバムを作成することです。これは、訪問者が画像をアップロードし、説明、タイトルなどの画像に関するメタデータを提供することです。学生が通常使用するデータモデルは、次のフィールドを持つ Pictures テーブルで構成されます。

PictureID : 合成主キー。通常は 、IDENTITY として設定される整数フィールドです。
タイトル - 図の短いタイトル。
DateAdded - 画像がアップロードされた日付/時刻。
PictureUrl : アップロードされたイメージファイルへのパス。

ユーザーがフォトアルバムサイトに新しい画像を追加する場合は、ファイルアップロードコントロールを含む特定のページにアクセスし、他の情報を照会するフォーム入力フィールドにアクセスする必要があります。フォームを送信すると、コンピューター上の画像が Web サーバーのファイルシステムにアップロードされ、新しい行が Pictures テーブルに追加されます。 PictureUrl フィールドは、アップロードされたイメージファイルの仮想パスに設定されます。

DataGrid を使用してフォトアルバム内のすべての画像を一覧表示する追加ページがあります。 ASP.NET 1.x の DataGrid の列に画像を表示するには 、TemplateColumn 内の Image Web コントロールで TemplateColumn を使用する必要があります。 ASP.NET 2.0 では、 GridView には、 GridView の列に画像を表示するために使用できる ImageField が含まれています。

前に説明したデータモデルがあり、すべての画像を GridView に表示し、 PictureID、 Title、 DateAdded フィールドをそれぞれ列に表示し、実際の画像自体を追加の列に表示するとします。

これを実現するには、まずデータソースコントロールを使用してデータを取得し、そのデータソースコントロールにバインドされた GridView を追加します。この GridView には 4 つの BoundField 列があります。つまり、実際の画像を表示する代わりに、ブラウザーで GridView を表示するときに実際のイメージパスが表示されます。実際の画像を表示するには、 GridView の列を編集し、 PictureUrl BoundField を削除して ImageField に置き換える必要があります。 GridView の列を編集するには、GridView のスマートタグから [列の編集] リンクをクリックします。これにより、図 25 に示すようなダイアログボックスが表示されます。 PictureUrl BoundField を削除し、ImageField にを追加します。最後に、ImageField の DataImageUrlField を、イメージパス (PictureUrl) を含む DataSource フィールドの名前に設定します。

Aa479350.gridview_fg25(en-us,MSDN.10).gif

図 25

これにより、次の宣言構文を持つ GridView が生成されます。

<asp:GridView ID="GridView1" Runat="server" 
  DataSource='<%# GetData() %>' AutoGenerateColumns="False" 
  BorderWidth="1px" BackColor="White" CellPadding="3" BorderStyle="None" 
  BorderColor="#CCCCCC" Font-Names="Arial">
    <FooterStyle ForeColor="#000066" BackColor="White"></FooterStyle>
    <PagerStyle ForeColor="#000066" HorizontalAlign="Left" 
      BackColor="White"></PagerStyle>
    <HeaderStyle ForeColor="White" Font-Bold="True" 
      BackColor="#006699"></HeaderStyle>
    <Columns>
        <asp:BoundField HeaderText="Picutre ID" DataField="PictureID">
            <ItemStyle HorizontalAlign="Center" 
              VerticalAlign="Middle"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField HeaderText="Title" DataField="Title"></asp:BoundField>
        <asp:BoundField HeaderText="Date Added" DataField="DateAdded" 
          DataFormatString="{0:d}">
            <ItemStyle HorizontalAlign="Center"></ItemStyle>
        </asp:BoundField>
        <asp:ImageField DataImageUrlField="PictureURL"></asp:ImageField>
    </Columns>
    <SelectedRowStyle ForeColor="White" Font-Bold="True" 
       BackColor="#669999"></SelectedRowStyle>
    <RowStyle ForeColor="#000066"></RowStyle>
</asp:GridView>

Northwind データベースにはイメージパスを持つテーブルがないため、このデモの動作を確認するには、独自のデータモデルをプログラムで作成する必要があります。 ASP.NET ページの次のコードは、適切なスキーマを持つ DataTable を作成し、DataTable に 4 つのレコードを設定します。

プログラムによる DataTable の作成 (Visual Basic)

Function GetData() As DataTable
    ' This method creates a DataTable with four rows.  Each row has the
    ' following schema:
    '   PictureID      int
    '   PictureURL     string
    '   Title          string
    '   DateAdded      datetime
    Dim dt As New DataTable()
    ' define the table's schema
    dt.Columns.Add(New DataColumn("PictureID", GetType(Integer)))
    dt.Columns.Add(New DataColumn("PictureURL", GetType(String)))
    dt.Columns.Add(New DataColumn("Title", GetType(String)))
    dt.Columns.Add(New DataColumn("DateAdded", GetType(DateTime)))
    ' Create the four records
    Dim dr As DataRow = dt.NewRow()
    dr("PictureID") = 1
    dr("PictureURL") = ResolveUrl("~/DisplayingImages/Images/Blue hills.jpg")
    dr("Title") = "Blue Hills"
    dr("DateAdded") = New DateTime(2005, 1, 15)
    dt.Rows.Add(dr)
    dr = dt.NewRow()
    dr("PictureID") = 2
    dr("PictureURL") = ResolveUrl("~/DisplayingImages/Images/Sunset.jpg")
    dr("Title") = "Sunset"
    dr("DateAdded") = New DateTime(2005, 1, 21)
    dt.Rows.Add(dr)
    dr = dt.NewRow()
    dr("PictureID") = 3
    dr("PictureURL") = _
      ResolveUrl("~/DisplayingImages/Images/Water lilies.jpg")
    dr("Title") = "Water Lilies"
    dr("DateAdded") = New DateTime(2005, 2, 1)
    dt.Rows.Add(dr)
    dr = dt.NewRow()
    dr("PictureID") = 4
    dr("PictureURL") = ResolveUrl("~/DisplayingImages/Images/Winter.jpg")
    dr("Title") = "Winter"
    dr("DateAdded") = New DateTime(2005, 2, 18)
    dt.Rows.Add(dr)
    Return dt
End Function

プログラムによる DataTable の作成 (C#)

DataTable GetData()
{
    // This method creates a DataTable with four rows.  Each row has the
    // following schema:
    //   PictureID      int
    //   PictureURL     string
    //   Title          string
    //   DateAdded      datetime
    DataTable dt = new DataTable();
    // define the table's schema
    dt.Columns.Add(new DataColumn("PictureID", typeof(int)));
    dt.Columns.Add(new DataColumn("PictureURL", typeof(string)));
    dt.Columns.Add(new DataColumn("Title", typeof(string)));
    dt.Columns.Add(new DataColumn("DateAdded", typeof(DateTime)));
    // Create the four records
    DataRow dr = dt.NewRow();
    dr["PictureID"] = 1;
    dr["PictureURL"] = ResolveUrl("~/DisplayingImages/Images/Blue hills.jpg");
    dr["Title"] = "Blue Hills";
    dr["DateAdded"] = new DateTime(2005, 1, 15);
    dt.Rows.Add(dr);
    dr = dt.NewRow();
    dr["PictureID"] = 2;
    dr["PictureURL"] = ResolveUrl("~/DisplayingImages/Images/Sunset.jpg");
    dr["Title"] = "Sunset";
    dr["DateAdded"] = new DateTime(2005, 1, 21);
    dt.Rows.Add(dr);
    dr = dt.NewRow();
    dr["PictureID"] = 3;
    dr["PictureURL"] = 
      ResolveUrl("~/DisplayingImages/Images/Water lilies.jpg");
    dr["Title"] = "Water Lilies";
    dr["DateAdded"] = new DateTime(2005, 2, 1);
    dt.Rows.Add(dr);
    dr = dt.NewRow();
    dr["PictureID"] = 4;
    dr["PictureURL"] = ResolveUrl("~/DisplayingImages/Images/Winter.jpg");
    dr["Title"] = "Winter";
    dr["DateAdded"] = new DateTime(2005, 2, 18);
    dt.Rows.Add(dr);
    return dt;
}

このデータを GridView にバインドするには、 GridView の DataSource プロパティを GetData() メソッドに次のように設定します。

<asp:GridView Runat="server" DataSource='<%# GetData() %>' ...>
  ...
</asp:GridView>

最後に、GridView の DataSource をバインドするには、Page_Load イベントハンドラーで Page.DataBind() を呼び出す必要があります。

Page_Load イベントハンドラー (Visual Basic)

Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
    Page.DataBind()
End Sub
Page_Load Event Handler (C#)
void Page_Load(object sender, EventArgs e)
{
    Page.DataBind();
}

最終的な結果は、PictureUrl パスによって参照されるイメージを示す GridView です (図 26 を参照)。

Aa479350.gridview_fg26(en-us,MSDN.10).gif

図 26

この例のコードの長さに気を付けないでください。長さは、イメージパスフィールドを持つテーブルを使用してデータモデルを合成的に作成する必要があったという事実によるものです。 Northwind データベースにこのようなテーブルがある場合、この例は前の例と同様に、コードをなめる必要はなかったでしょう。

次のセクション: TemplateFields の操作

ASP.NET 2.0 の GridView の例: GridView 列に画像を表示する

その他のリソース