ListViewコントロールでのデータの編集
これまでの説明でお分かりのように、ListViewコントロールを使用してデータを表示することは比較的簡単です。さらに、ListView内のデータをユーザーに編集させることも可能です。サンプルWebサイトに「ListViewEditExample.aspx」という名前の新しいASP.NETページを追加し、そのコードをリスト2のように変更します。
<%@ Page Language="C#" %>
<script runat="server">
void deptsView_ItemUpdated(object sender,
ListViewUpdatedEventArgs e)
{
lblResult.Text = e.AffectedRows.ToString() +
" row(s) successfully updated";
}
void deptsView_PagePropertiesChanged(object sender, EventArgs e)
{
//Set the text to empty when navigating to a different page
lblResult.Text = "";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
<title>Editing Data using ListView Control</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView ID="ContactsListView" DataSourceID="deptSource"
DataKeyNames="DepartmentID" runat="server"
OnItemUpdated="deptsView_ItemUpdated"
OnPagePropertiesChanged="deptsView_PagePropertiesChanged">
<LayoutTemplate>
<table cellpadding="2" width="640px" border="1"
runat="server" id="tblProducts">
<tr id="row1" runat="server" class="header">
<th id="header2" runat="server">Name</th>
<th id="header3" runat="server">Group Name</th>
<th id="header1" runat="server">Action</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
<asp:DataPager runat="server" ID="deptsDataPager"
PageSize="3">
<Fields>
<asp:NextPreviousPagerField ShowFirstPageButton="True"
ShowLastPageButton="True" FirstPageText="|<< "
LastPageText=" >>|" NextPageText=" > "
PreviousPageText=" < " />
</Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
<tr id="row2" runat="server">
<td>
<asp:Label ID="lblName" runat="Server"
Text='<%#Eval("Name") %>' />
</td>
<td valign="top">
<asp:Label ID="lblGroupName" runat="Server"
Text='<%#Eval("GroupName") %>' />
</td>
<td>
<asp:LinkButton ID="btnEdit" runat="Server" Text="Edit"
CommandName="Edit" />
</td>
</tr>
</ItemTemplate>
<EditItemTemplate>
<tr style="background-color: #ADD8E6">
<td>
<asp:TextBox ID="txtName" runat="server"
Text='<%# Bind("Name") %>'
MaxLength="50" /><br />
</td>
<td>
<asp:TextBox ID="txtGroupName" runat="server" Text='<%#
Bind("GroupName") %>' MaxLength="50" /><br />
</td>
<td>
<asp:LinkButton ID="btnUpdate" runat="server"
CommandName="Update" Text="Update" />
<asp:LinkButton ID="btnCancel" runat="server"
CommandName="Cancel" Text="Cancel" />
</td>
</tr>
</EditItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="deptSource" runat="server"
ConnectionString="<%$ ConnectionStrings:AdventureWorks %>"
SelectCommand="SELECT [DepartmentID],[Name],[GroupName] FROM
HumanResources.Department" UpdateCommand="UPDATE
HumanResources.Department SET Name = @Name,
GroupName = @GroupName WHERE DepartmentID = @DepartmentID">
</asp:SqlDataSource>
<br /><br />
<asp:Label runat="server" ID="lblResult" Text=""
Font-Bold="true" />
</div>
</form>
</body>
</html>
リスト2のコードは、項目が編集モードの場合にEditItemTemplate要素を使用してコンテンツを生成する方法と、SqlDataSourceコントロールを通じてデータベースを更新する方法を示しています。
最初に、SqlDataSourceコントロールのUpdateCommandプロパティに、実行するSQL文を指定します。このSQL文が実行されると、ユーザー指定の最新の値でデータベースが更新されます。
<asp:SqlDataSource ID="deptSource" runat="server"
ConnectionString="<%$ ConnectionStrings:AdventureWorks %>"
SelectCommand="SELECT [DepartmentID],[Name],[GroupName] FROM
HumanResources.Department" UpdateCommand="UPDATE
HumanResources.Department SET Name = @Name,
GroupName = @GroupName WHERE DepartmentID = @DepartmentID">
</asp:SqlDataSource>
次に、ItemTemplate要素に、ユーザーが項目を編集するときにクリックするリンクを指定します。
<ItemTemplate>
----
----
<asp:LinkButton ID="btnEdit" runat="Server" Text="Edit"
CommandName="Edit" />
</td>
</tr>
</ItemTemplate>
続けて、EditItemTemplateを指定します。ここでは、更新後の部門のNameやGroupNameを入力するテキストボックスと、現在の操作をコミット（"Update"）またはキャンセル（"Cancel"）するためのリンクを定義します。
<EditItemTemplate>
<tr style="background-color: #ADD8E6">
<td>
<asp:TextBox ID="txtName" runat="server"
Text='<%# Bind("Name") %>'
MaxLength="50" /><br />
</td>
<td>
<asp:TextBox ID="txtGroupName" runat="server" Text='<%#
Bind("GroupName") %>' MaxLength="50" /><br />
</td>
<td>
<asp:LinkButton ID="btnUpdate" runat="server"
CommandName="Update" Text="Update" />
<asp:LinkButton ID="btnCancel" runat="server"
CommandName="Cancel" Text="Cancel" />
</td>
</tr>
</EditItemTemplate>
LinkButtonのアクションは、CommandNameプロパティを目的の値（表2を参照）に設定することにより定義します。
| 値 | 説明 |
| Cancel | 現在の操作をキャンセルします。 |
| Delete | 現在選択されている項目をデータソースから削除します。 |
| Edit | ListViewを編集モードに切り替え、EditItemTemplate要素で指定されるコンテンツを表示します。 |
| Insert | データソースコントロール内の値を新しいレコードとしてデータソースに保存します。 |
| Update | データソースコントロール内の値でデータソースを更新します。 |
更新の終了時に、ListViewコントロールはOnItemUpdatedイベントを発生します。このイベントを使用して、ユーザーに対して更新の状態を確認することができます。リスト2のコードでは、ListViewコントロールは2つのイベントを処理しています。
- OnItemUpdated ― 名前が示すとおり、このイベントでは、更新処理の最後にカスタムルーチンを実行できます。上記のコードでは、このイベントを使用して、影響を受けたレコード数をユーザーに通知しています。
- OnPagePropertiesChanged ― ListViewは、ページプロパティが変更されるときにこのイベントを発生します。リスト内のコードでは、このイベントを使用して、Labelコントロールに格納されているテキストを消去しています。
ListViewが設定された状態で、ブラウザを使ってこのページにアクセスすると、図2のような出力が得られます。
「Edit」ハイパーリンクをクリックすると、ListViewはEditItemTemplateを使用して図3のようなテキストボックスを表示します。ユーザーはこのテキストボックスで、選択されている項目を編集できます。
編集モードでは、右側の列に「Update」リンクと「Cancel」リンクが表示されます。「Update」リンクをクリックして変更をデータベースに保存すると、OnItemUpdatedイベントによって影響を受けたレコード数が表示されます（図4を参照）。
ListViewコントロールの主要な機能に関する説明はこれで終わりです。
本稿では、この機能を使用した例を2つ紹介しました。1つ目の例では、単純なデータドリブンのWebページを作成しました。2つ目の例では、適切な編集と確認のマークアップを指定して、コントロールの更新機能を宣言的に利用する複雑なページを作成しました。また、ListViewコントロールが生成するイベントの処理方法についても説明しました。
おわかりのように、ListViewの拡張的な特性を利用すると、実行時の動作を各自のニーズに合わせて簡単にカスタマイズできます。
