ListView に追加、削除、編集機能を追加する - ASP.NET

ASP.NETのListViewに追加、削除、編集の機能を追加する手順を紹介します。

概要

こちらの記事では、ListViewを用いてデータベースのテーブルのレコードを参照するアプリケーションを作成しました。ListViewにはデータソースへの追加や削除、編集機能が用意されており、設定を変更するだけで、レコードの追加や編集機能を追加できます。

設定手順

ListViewコンポーネントを選択し右上の[>]ボタンを押します。[ListViewタスク]メニューが表示されますので、[ListView の構成]リンクをクリックします。下図の[ListView の構成]ダイアログが表示されます。
ダイアログの左下の[オプション]欄の"編集を有効にする","挿入を有効にする","削除を有効にする"チェックボックスにチェックを付けるのですが、デフォルトの状態ではチェックボックスが無効化されています。

データソースの設定変更

データソースの設定を変更することで、データソースへの編集ができるようにします。ListViewコンポーネントを選択し、右上の[>]ボタンを押します。[ListViewタスク]メニューが表示されますので、[データソースの構成]リンクをクリックします。


[データソースの構成]ダイアログが表示されます。データ接続は現在の接続でよいため[次へ]ボタンを押して次に進みます。


[Select ステートメントの構成]ダイアログボックスが表示されます。ダイアログボックスの右側の[詳細設定]ボタンをクリックします。


[SQL 生成の詳細オプション]ダイアログが表示されます。


ダイアログの[INSERT、UPDATE、および DELETE ステートメントの生成]チェックボックスにチェックを付けます。チェック後[OK]ボタンを押してダイアログボックスを閉じます。


再び、[ListView の構成]ダイアログを表示します。[オプション]欄の"編集を有効にする","挿入を有効にする","削除を有効にする"チェックボックスにチェックができる状態になります。

編集

"編集を有効にする"チェックボックスにチェックをつけます。右側のプレビューエリアに各行の左端に[編集]ボタンが追加されます。


プロジェクトを実行します。Wwbブラウザが起動し下図の結果となります。[編集]ボタンが追加できました。


[編集]ボタンを押すと画面が下図の状態になり、レコードの編集ができるようになります。

挿入

[ListView の構成]ダイアログに戻り、"挿入を有効にする"チェックボックスにチェックを付けます。


プロジェクトを実行します。リストの下部にテキストボックスと挿入ボタンが表示されます。


テキストボックスに値を入力し[挿入]ボタンを押します。


レコードが追加されました。

削除

[ListView の構成]ダイアログに戻り、"削除を有効にする"チェックボックスにチェックを付けます。


プロジェクトを実行します。各行に[削除]ボタンが表示されます。


[削除]ボタンを押すとレコードが削除できます。

補足

すべてのオプションを有効にすると下図の外観となります。