ASP.NETのListViewコントロールを用いたデータの参照方法

ASP.NETでリスト（一覧表）を生成する際、利用できるコントロールがいくつか存在します。ListViewは、ASP.NETでリストを生成できるコントロールの1つです。
当記事では、ListViewの概要と、テータの参照方法を含めた基本的な使い方を解説していきます。

システム
エンジニア

ASP.NETでListViewを使ったリストを生成したいのですが、思うような操作が実現できません。

プロジェクト
マネージャー

ListViewコントロールは、テンプレートで定義した内容をそのまま出力してくれる、便利なコントロールです。表示方法やデータの編集方法などを身につけ、上手く活用できるようになりましょう。

ASP.NETのListViewコントロールとは

ListViewはリスト（一覧表）を生成するコントロールで、基本的なデータ操作機能を持っており、余計なタグを出力せずにリストを生成できます。

他にもASP.NETには、リスト生成用のコントロールがありますが、それぞれ性質が異なります。非定型なリストを生成したい場合は、多様なスタイルでのリスト生成が可能なListViewコントロールがおすすめです。

ASP.NETでListViewのテンプレートを利用してリストを表示する

早速、ASP.NETでリストを表示してみましょう。今回はWebフォームアプリケーションを作成する過程で、ListViewコントロールを使用します。

まずは、プロジェクトを新規作成し、Webフォーム（ListView.aspx）を追加します。
デザイナーの画面左のツールボックスより、ListViewコントロールを選択し、任意の位置に配置をします。

この時点では、表示するデータの指定がないため、ListViewコントロールは灰色のボックスとして表示されています。

次に表示するデータを指定して、ListViewコントロールでリストを表示します。
デザイナー画面で指定する場合は、ListViewコントロール右上の小さな矢印をクリックすると開く「タスクメニュー」から「データソース」の指定が可能です。

ここから、データベースをはじめとした、複数のデータソースを指定することができます。

今回は下記の簡単なテーブルを参照します。

先ほどのデータソース指定の画面で、データベースへの接続を指定します。

すでに接続が作成されている場合は、コンボボックスから任意の接続を選択します。今回は接続が作成されていないので、「新しい接続」を選択。
サーバー名の矢印をクリックすると、サーバー一覧の取得が始まります。

取得後、サーバ一覧が表示されるので、任意のサーバとデータベースを選択して「OK」をクリック。
次の画面でもそのまま「次へ」をクリックし、データベースからのデータの取得方法を設定します。

下段の「テーブルまたはビューから列を指定します」を選択し、今回は”すべての列を選択する”ため、「*」をチェックし「次へ」をクリック。

「クエリのテスト」で正常にテーブルのデータが表示されました。問題なければ、「完了」をクリックしデータソースの設定は完了です。
ここまで終えたら、次はListViewコントロールの表示を整えます。

ListViewコントロールでは、表示に際する定型的レイアウトが標準テンプレートとして用意されています。今回はその標準テンプレートを使って表示をします。
ListViewコントロールのタスクメニューを開き、「ListViewの構成」をクリック。

すると、レイアウトとスタイルの構成が、標準テンプレートの中から選択できます。

今回は、レイアウト：「箇条書き」、スタイル：「カラフル」を選択して表示します。
デザイナーの画面表示が変更されたことを確認した後、デバッグして動かします。

ブラウザに正常に表示されました。ListViewコントロールでのリストの生成は簡単ですね。

ASP.NETのListViewコントロールでデータの編集を行う

ListViewコントロールでのデータの編集は、特定のテンプレートを使うことで可能です。ただし、自身で編集用ボタンなどを配置する必要があるので、やり方をチェックしておきましょう。

今回は「編集」の他に、「挿入」「削除」の機能も追加していきます。
上記の機能ボタンを搭載させるため、再度ListViewコントロールのタスクメニューを開き、データソースの構成を変更します。
まず、データソースの構成画面で「詳細設定」をクリック。

「INSERT、UPDATE、およびDELETEステートメントの生成」にチェックを入れて、「OK」をクリックします。これでデータソース構成の設定は完了です。次に、ListViewの構成を変更します。

上記画面の左下に「編集・挿入・削除を有効にする」チェックボックスがあります。今回はすべて追加するので、全部にチェックを入れて「OK」をクリック。

すると、デザイナーの画面に「編集」「削除」ボタンが追加されました。なお、「挿入」は一番下に配置されています。
これで各種機能のボタンが追加できたので、実際に動かしてみて機能が正常に動くか確認してみます。今回は「編集」機能のみを確認します。

1行目の編集をクリックして、年齢を40に変更してみます。

更新を押すと……

40に変わりました。正常に動くことが確認できました。「削除」「挿入」も簡単な操作で処理が可能です。

システム
エンジニア

ListViewコントロールを使えば、表示も簡単で、データの編集操作も楽に追加できるのですね。

プロジェクト
マネージャー

はい。基本的に標準テンプレートを使えば複雑な操作は必要ありません。データの編集もチェックボックスにチェックを入れるだけで追加できるので、とても便利なんですよ。

ListViewコントロールは多様なリストの表示ができる

ASP.NETでのリスト表示は、ListViewコントロールを使うことで柔軟な表示方法が可能です。また、データの操作機能も簡単に追加できるため、開発側にもメリットがあります。
他にもデータをグループ化して表示することなども可能です。ListViewコントロールの使い方を習得して、多様なリスト表示の方法を実践してみましょう。

>>>ASP.NETの案件を探すならFEnet .NET Navi