データテーブルにイメージフィールドを設定してGridViewに画像を表示させたいのですが

Question

いつもお世話になっております。今日は、データテーブルとGridViewの使い方で教えていただきたいことがあります。

 

以下のようなコードを書いてみました。

 

        Dim DT as DataTable = New DataTable

        With DT.Columns
            .Add("項目１", GetType(String))
            .Add("項目2", GetType(String))
            .Add("ロゴイメージ", GetType(ImageField))
        End With

        Dim dr As DataRow = DT.NewRow
        dr(0) = "加工後の項目1データ"

        dr(1) = "加工後の項目2データ"
        Dim imgimg As ImageField = New ImageField
        imgimg.DataImageUrlField = "..\img\image.gif
        imgimg.DataImageUrlFormatString = "{0}"
        dr(2) = imgimg
        

        DT.Rows.Add(dr)
       
        With GridView
            .DataSource = DT
            .DataBind()
        End With

画面デザイン時にはGridViewの項目は全く編集せず、データテーブルで様々なデータを編集した後、データテーブルを作成して、その内容をそのままGridViewにバインドして表示させたいと考えております。

 

画面デザイン時にGridViewの項目をあらかじめ編集しておくとうまくいくのですが、ランタイム時に設定して表示させるという方法がどうもうまくいきません。

http://msdn.microsoft.com/library/ja/default.asp?url=/library/ja/jpdnvs05/htm/ASP2.0/gridview/GridViewEx06.asp

この資料を見たり、いろいろ自分なりに調べてみたのですが、どうにも解決策が見つかりませんでした。

 

いつも、勉強不足だったり、変な質問だったりで大変恐縮ですが、もし、良い方法をご存じの方がいらっしゃいましたら、教えていただけますでしょうか？何卒よろしくお願いします。

Answer 1

以下のような感じで。

 

変更した点は、データテーブルのロゴイメージ列はStringで。（イメージのパスを格納します）

またAutoGenerateColumnではイメージフィールドを生成してくれないので、マニュアルで生成します。

そのイメージフィールドのDataImageUrlFieldにデータテーブルのイメージのパスが格納された列を指定します。

 

コード ブロック

Dim DT As DataTable = New DataTable

        With DT.Columns
            .Add("項目１", GetType(String))
            .Add("項目2", GetType(String))
            .Add("ロゴイメージ", GetType(String))
        End With

        Dim dr As DataRow = DT.NewRow
        dr(0) = "加工後の項目1データ"
        dr(1) = "加工後の項目2データ"
        dr(2) = ResolveUrl(".\img\img.gif")

        DT.Rows.Add(dr)

        With GridView1
            Dim f As New System.Web.UI.WebControls.ImageField()
            f.DataImageUrlField = "ロゴイメージ"
            .Columns.Add(f)

            .DataSource = DT
            .DataBind()
        End With

 

 

ただし、このままでは、パスも表示されます。

Answer 2

ImageFieldはGridViewの列です。したがってGridViewで自動生成された列に列を放り込むのはおかしな考えです。もし、その考え方に当てはめるのであれば、データテーブルの他の列も、StringではなくStringFieldになります。もちろん、StringFieldは実際にはありません。

 

さて、AutoGenerateColumns = True の状況でどのように対処するかを考えてみたのですが、とりあえず以下のテストコードを書いてみました。

 

コード ブロック

    Dim imageColumnIndex As Integer

 

    Protected Sub cbtn_bind_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cbtn_bind2.Click
        Dim DT As DataTable = New DataTable

        With DT.Columns
            .Add("項目１", GetType(String))
            .Add("項目2", GetType(String))
            .Add("ロゴイメージ", GetType(String))
        End With

        Dim dr As DataRow = DT.NewRow
        dr(0) = "加工後の項目1データ"
        dr(1) = "加工後の項目2データ"
        dr(2) = "<img src=""./image/hoge.gif"" />"

        DT.Rows.Add(dr)

 

        imageColumnIndex = 2

 

        With GridView1
            .DataSource = DT
            .DataBind()
        End With
    End Sub

 

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

 

       If e.Row.RowType = DataControlRowType.DataRow Then
            e.Row.Cells(imageColumnIndex).Text = Server.HtmlDecode(e.Row.Cells(imageColumnIndex).Text)
        End If
    End Sub  

 

 

 

Answer 3

投稿後に素早くご提案いただきまして誠にありがとうございます。出張に行ったり悩んだりしているうちにだいぶ時間が過ぎてしまいました。感謝を申し上げるとともにお詫び申し上げます。

 

Answer 4

投稿後に素早くご提案いただきまして誠にありがとうございます。出張に行ったり悩んだりしているうちにだいぶ時間が過ぎてしまいました。感謝を申し上げるとともにお詫び申し上げます。

 

 

また、見事な解決策をご提案いただき大変感謝しております。

 

この方法はシンプルで斬新かつ明快な方法だと思います。全く思いつかなかったというか理解不足というか、さらなる技術向上に努めたいと思います。

 

今回の件では大変お世話になりました。誠にありがとうございます。また、今後とも何卒よろしくお願いします。