ObjectDataSourceとDataPagerを使って、ListViewにサーバーサイドページングを実装

以前に似たようなポスト（ObjectDataSourceを使って、GridViewにページングを実装）をしました。
今回はGridViewではなく、よりHTMLをコントロールできるListViewを使います。
説明する手順は以前とほぼ同じ。

0.今回のミソ

今回のポストのポイントは、サーバーサイドページングを実装しているところです。
ListView＋DataPagerでページングを実装すると、クライアントサイドでページングを実現するため、DBアクセスとかのコストがかかります。
（1ページに10件しか表示しないのに、ページングのたびに全件とってくるとか。よくある簡単なサンプルだと。）
DACの部分で適切な範囲に対してSQLを発行して、無駄なDBアクセスを減らそう。
そこがポイントです。
このポストを読むと…

• ちゃんと制御されたDBアクセスをする→主に、2と3のObjectDataSourceの使い方
• ちゃんと制御されたHTMLを出力させる→5と6

が、分かると思います。

完成系はこれです。

1.GridViewとObjectDataSourceとDataPagerを配置する。

ドラッグアンドドロップで、普通に配置します。
ちなみにDataPagerはListViewの外に配置します。
対応する部分だけ抽出するとこんな感じ。

<asp:ListView ID="ProductListView" runat="server" DataSourceID="ProductObjectDataSource">
...
</asp:ListView>

<asp:DataPager ID="ProductDataPager" ...>
...
</asp:DataPager>

<asp:ObjectDataSource ID="ProductObjectDataSource" ...>
...
</asp:ObjectDataSource>

2.DACでデータとデータ件数を取得するメソッドを実装する。

例としてProductLogic.csを実装します。

public int CountAllProducts() {...}

//offset：テーブル内のデータの取得位置
//limit：1ページあたりのデータ件数
public List<Product> LoadAllProductsWithPaging(int offset, int limit) {...}
 

3.ObjectDataSource（以降、ODS）を編集する

ObjectDataSource（以降、ODS）の設定を行います。
データソースの構成で、ビジネスオブジェクトには「ListViewSample.Code.ProductRepository」を選び、
データメソッドのSELECTには「LoadAllProductsWithPaging」を選びます。
パラメタの設定は行いません。

続いて、GUIのプロパティにてページングのための情報を記述します。

aspxのソース表示ではこのようになります。

<asp:ObjectDataSource 
    ID="ProductObjectDataSource" 
    runat="server" 
    EnablePaging="True"
    SelectCountMethod="CountAllProducts" 
    SelectMethod="LoadAllProductsWithPaging"
    TypeName="ListViewSample2.Code.ProductLogic"
    MaximumRowsParameterName="limit" 
    StartRowIndexParameterName="offset">
</asp:ObjectDataSource>

このあたりまでは、GridViewでの作成方法と何も変わりません。

4.ListViewのデータソースに前述のODSを選ぶ

データソースの選択で、上述のODSを選びます。

5.ListViewを編集する。

Productのリストを表示するために、ListViewを設定します。
ListViewはGUIの操作で、データソースに合わせたテンプレートを適用してくれます。
今回はリスト表示させるだけなので、自動で出力されたaspxうぃ手で編集して、スリムアップ。
この作業、毎回やるからめんどくさい。テンプレートを自分で作れないのかな？

<asp:ListView ID="ProductListView" 
    runat="server" 
    DataSourceID="ProductObjectDataSource">
      <LayoutTemplate>
          <table id="itemPlaceholderContainer" runat="server" class="productList">
              <tr> <th>Id</th> <th>Name</th> <th>UnitCost</th> <th>Description</th> </tr>
              <tr id="itemPlaceholder" runat="server"></tr>
          </table>
      </LayoutTemplate>
      <ItemTemplate>
          <tr>
              <td>
                  <asp:Label ID="IdLabel" 
                    runat="server" Text='<%# Eval("Id") %>' />
              </td>
              <td>
                  <asp:Label ID="NameLabel" 
                    runat="server" Text='<%# Eval("Name") %>' />
              </td>
              <td>
                  <asp:Label ID="UnitCostLabel" 
                    runat="server" Text='<%# Eval("UnitCost") %>' />
              </td>
              <td>
                  <asp:Label ID="DescriptionLabel" 
                    runat="server" Text='<%# Eval("Description") %>' />
              </td>
          </tr>
      </ItemTemplate>
      <EmptyDataTemplate>
           データは返されませんでした。
      </EmptyDataTemplate>
</asp:ListView>

ページングに関する設定は、DataPagerに任せます。
ここがGridViewのページングと違うところ。
ですので、ページングに関する設定は何も持たせません。

6.DataPagerを編集する。

おおざっぱなところはGUIで設定します。
1ページあたりのサイズ(PageSize)と、ページングするコントロールのID(PagedControlID)をセットします。

ソースコードは以下の通り。

<asp:DataPager 
    ID="ProductDataPager" 
    runat="server" 
    PageSize="5" 
    PagedControlID="ProductListView">
    <Fields>
        <asp:NumericPagerField
            CurrentPageLabelCssClass="this-page"
            NextPageText="Next >"
            PreviousPageText="< Prev." />
    </Fields>
</asp:DataPager>

Fieldsタグで、どのようにページングを表示するのかを決定しています。
「たぶん」ですけど、DataPagerのデフォルトのPageSizeは10件。
だからGUIのプロパティで10件と値が入っている場合は、
ソースコードには何も表示（反映）されません。

これでOK！！
F5で実行すると、ページングが実装されています。

7.おわりに

ややこしい。やっぱりASP.NET Webフォームはややこしい。
でも、分かってくると嫌いになれないですね。
綺麗なHTMLをはかせるには、どんなルールでaspxを書けば良いのかまだまだ修行がいりそうです。