ASP.NET C# ListViewで画像一覧表示(Visual Studio)　※ページング付き

ASP.NET
2022.12.11

ASP.NET(.NET Framework 4.8.1)でListViewコントロールを使用して、データベースから画像のファイルパスを取得し、表示する方法をまとめました。

小生、ケツに毛が生えた程度のプログラマのため、小難しいことは説明しないのであしからず！

ListViewコントロールの配置やDB参照を知っている方はここをクリック

環境

  • Visual Studio 2022
  • SQL Server 2019(※SQL Serverのインストールの説明はなし)
  • ASP.NET (.NET Framework 4.8.1)

事前準備

  • 適当な画像を用意する(10枚程度)

画像ファイルの配置とテーブルの作成

プロジェクトフォルダ内に画像データを配置する。
ここではフォルダ名を「Image_Data」とし、その配下に用意した画像ファイルを配置

ツールバーの「表示」ー「SQL Server オブジェクト エクスプローラー」を選択

データベースの追加(YAKKO_DB)、テーブルの追加(dbo.IFP)する

テーブルを編集。画像のファイルパスは「Image_Data\”画像ファイル名”」

ListViewコントロールの配置

ListView.aspxを開き、「デザイン」をクリック

ツールバーの「表示」ー「ツールボックス」をクリック

「データ」ー「ListView」をフォームにドラッグ＆ドロップ

「新しいデータソース」をクリック

「SQL データベース」を選択し、OKをクリック

「新しい接続」をクリックして、「サーバー名」、「データベース名の選択または入力」にて先ほど追加したデータベースを選択。

特に後続の設定の必要はなし。「次へ」ー「次へ」ー「完了」を順にクリック

「ListViewの構成」をクリック

「並べて表示」ー「(書式設定なし)」ー「ページングを有効にする」を選択し、OKをクリック

ListViewにDBから取得したファイルパスを使用して画像を表示

ListView.aspxを開き、ソースに戻るとListViewコントロールのHTMLが追加されています。
各タグの意味合いは下記になるようです。他サイトから引用

タグ適用先
AlternatingItemTemplate連続する項目を区別できるように、交互の項目を異なるマークアップで表示します。
EditItemTemplate項目が編集モードの場合の表示を制御します。
EmptyDataTemplateListViewのデータソースがデータを返さない場合の表示を制御します。
EmptyItemTemplate空の項目の表示を制御します。
GroupTemplateコンテンツのテーブル行、div、またはspan要素など、コンテナオブジェクトを指定します。
InsertItemTemplateユーザーが項目を挿入したときにレンダリングするコンテンツを指定します。
ItemTemplate個々の項目に対して表示するコンテンツを制御します。
LayoutTemplateItemTemplateまたはGroupTemplateで定義されるコンテンツを囲む、table、div、またはspan要素などのコンテナオブジェクトを定義するルート要素を指定します。
SelectedItemTemplate現在選択されている項目に対して表示するコンテンツを指定します。

AlternatingItemTemplatタグはコメントアウトし、ItemTemplateタグを下記をように編集してください

<%--            <AlternatingItemTemplate>
                <td runat="server" style="">Id:
                    <asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' />
                    <br />FilePath:
                    <asp:Label ID="FilePathLabel" runat="server" Text='<%# Eval("FilePath") %>' />
                    <br /></td>
            </AlternatingItemTemplate>--%>
<ItemTemplate>
    <td runat="server" style="">Id:
        <asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' />
        <br />
        <img class="List_Image" src='<%# Eval("FilePath") %>' />
        <br />
    </td>
</ItemTemplate>

Site.cssに下記を追加　※Site.cssはContentフォルダ内にあります

.List_Image {
    width:150px;
    height:150px;
    object-fit:contain;
}

ListView.aspxにcssを反映する。下記のコードを記載する
多分どこでもいいはず。。。

<%--CSSの適用--%>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />

実行してみる

下記のように画像が表示されればOK