単純なデータバインディングの例
ListViewコントロールがサポートするさまざまなテンプレートについて理解したところで、次に、新しいサンプルWebサイトを作ってみましょう。
このサンプルには「ListViewExample」という名前を付けます（ソースコードは本稿冒頭のリンクからダウンロードできます）。Webサイトを作成したら、メニューから［Website］→［Add New Item］を選択し、「SimpleListView.aspx」という名前の新しいASP.NETページを追加します（リスト1を参照）。このページでは、ListViewコントロールを使用して、AdventureWorksサンプルデータベース内のProductテーブルから製品データを表示します。
<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
<title>Simple Data Binding Example using ListView control</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView runat="server" ID="productsView"
DataSourceID="productSource" DataKeyNames="ProductID">
<LayoutTemplate>
<table cellpadding="2" runat="server" id="tblProducts"
style="width:460px">
<tr runat="server" id="itemPlaceholder">
</tr>
</table>
<asp:DataPager runat="server" ID="DataPager" PageSize="3">
<Fields>
<asp:NumericPagerField ButtonCount="10"
PreviousPageText="<--" NextPageText="-->" />
</Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
<tr id="row" style="height:72px" runat="server">
<td valign="top" class="ProductInfo">
Product ID : <asp:Label ID="lblProductID" runat="server"
Text='<%#Eval("ProductID") %>' />
<br />
Name : <asp:Label ID="lblName" runat="server"
Text='<%#Eval("Name") %>' />
<br />
Product Number : <asp:Label ID="lblProductNumber"
runat="server" Text='<%#Eval("ProductNumber") %>' />
</td>
</tr>
</ItemTemplate>
<ItemSeparatorTemplate>
<tr id="separator" style="height:10px" runat="server">
<td>--------------------------------------------------------
------------------</td>
</tr>
</ItemSeparatorTemplate>
<EmptyDataTemplate>
There are no products!
</EmptyDataTemplate>
</asp:ListView>
<asp:SqlDataSource id="productSource" runat="server"
DataSourceMode="DataSet"
ConnectionString="<%$ ConnectionStrings:AdventureWorks%>"
SelectCommand="SELECT ProductID,Name,ProductNumber,
Color,ListPrice FROM Production.Product">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
リスト1では、SqlDataSourceコントロールが、ConnectionStringプロパティとSelectCommandプロパティを適切な値に設定することにより、AdventureWorksデータベースのProductテーブルからデータを取得します。ConnectionStringプロパティは、ASP.NET式を通じて「web.config」ファイルから接続文字列を取得します。
筆者のテストマシンでは、接続文字列は「web.config」内で次のように定義されています。
<connectionStrings>
<add name="AdventureWorks"
connectionString="server=localhost;uid=sa;
pwd=thiru;database=AdventureWorks;"/>
</connectionStrings>
SqlDataSourceのプロパティを設定したら、次は、ListViewコントロールを通じてそのデータを表示します。LayoutTemplateに含まれるマークアップは次のとおりです。
<LayoutTemplate>
<table cellpadding="2" runat="server" id="tblProducts"
style="width:460px">
<tr runat="server" id="itemPlaceholder">
</tr>
</table>
<asp:DataPager runat="server" ID="DataPager" PageSize="3">
<Fields>
<asp:NumericPagerField ButtonCount="10"
PreviousPageText="<--" NextPageText="-->" />
</Fields>
</asp:DataPager>
</LayoutTemplate>
LayoutTemplateは、ListViewコントロールを通じて生成される出力のコンテナを定義します。LayoutTemplateコントロールは、ListViewコントロールの全体のレイアウトを定義するtableコントロールに加えて、<asp:DataPager>コントロールも定義します。このコントロールは、ListViewコントロールに対してページング機能を実現するものです。DataPagerコントロールを使用すると、データのページングが可能となり、IPageableItemContainerインターフェイスを実装するすべてのデータバインドコントロールに対して、ナビゲーションコントロールを表示できます（この処理はListViewコントロールが行います）。
DataPagerコントロールとデータバインドコントロールを関連付けるには、次の2つの方法があります。
- DataPagerコントロールの
PagedControlIDプロパティをデータバインドコントロールの名前に設定する。 - DataPagerコントロールをデータバインドコントロール階層内に配置する。ListViewコントロールの場合は、DataPagerコントロールをLayoutTemplate要素内に配置できます。
DataPagerのPageSizeプロパティを設定することで、各データページに表示される項目数を制御できます。QueryStringFieldプロパティを設定して、ページをサーバーに送信する方法を変更することもできます。
DataPagerコントロール内でNumericPageFieldテンプレートを指定すると、ユーザーは、ページ番号を選択することによって特定のページに移動できます。
<asp:NumericPagerField ButtonCount="10"
PreviousPageText="<--"
NextPageText="-->" />
ItemTemplate要素は、Eval()文を通じてデータソースコントロールからデータを取得することにより、各レコードの詳細にマークアップを適用します。
図1は、ブラウザ内でページに移動したときに生成される出力を示しています。
