ページ付けされたテーブルの作成

このトピックでは、デザインビュー、ソースビュー、およびコードを使用してページ付けされたテーブルを作成する方法を説明します。このプロジェクトでは、C1Pager コントロールと一般的な ASP.NET グリッドコントロールを組み合わせます。このタスク別ヘルプでは、C:\Users\<ユーザー名>\Documents\ComponentOne Samples\Common ディレクトリにある Northwind データベース Nwind.mdb を使用します。

以下の手順を実行します。

ソリューションエクスプローラウィンドウで、App_Data フォルダを右クリックして、コンテキストメニューから［既存項目の追加］を選択します。
［既存項目の追加］ダイアログボックスで、Northwind データベースの格納場所（デフォルトではサンプルディレクトリ）に移動し、Nwind.mdb を選択します。そして〈追加〉をクリックし、ダイアログボックスを閉じて、ファイルをプロジェクトに追加します。
デザインビューで、C1Pagerコントロールをプロジェクトに追加します。
C1Pager プロパティの PageCount を「1」に設定します。

ソースビューに切り替え、以下のマークアップを <asp:Content> タグの２つめのセットに追加して、グリッドコントロールと C1Pager コントロールの両方のプロパティを設定します。

ソースビュー	コードのコピー
<asp:UpdatePanel runat="server" ID="UpdatePanel1"> <ContentTemplate> <cc1:C1Pager runat="server" AutoPostBack="true" Mode="NumericFirstLast" OnPageIndexChanged="C1Pager1_PageIndexChanged" /> <asp:GridView Width="100%" runat="server" DataSourceAllowPaging="True" CssClass="ui-widget" ondatabound="GridView1_DataBound"> <HeaderStyle CssClass="ui-widget-header" /> <RowStyle CssClass="ui-widget-content" /> <PagerSettings Visible="false" /> </asp:GridView> </ContentTemplate> <</asp:UpdatePanel>

ソースビュー

コードのコピー

<asp:UpdatePanel runat="server" ID="UpdatePanel1">
        <ContentTemplate>
           <cc1:C1Pager runat="server" AutoPostBack="true" Mode="NumericFirstLast"
                OnPageIndexChanged="C1Pager1_PageIndexChanged" />
    <asp:GridView Width="100%" runat="server" 
                DataSourceAllowPaging="True"
               CssClass="ui-widget" ondatabound="GridView1_DataBound">
               <HeaderStyle CssClass="ui-widget-header" />
               <RowStyle CssClass="ui-widget-content" />
               <PagerSettings Visible="false" />
           </asp:GridView>
        </ContentTemplate>
    <</asp:UpdatePanel>

次のマークアップを使用して、データソースとグリッドのコンテンツを設定します。

ソースビュー	コードのコピー
<asp:AccessDataSource runat="server" DataFile="~/App_Data/NWind.mdb" SelectCommand="SELECT [OrderID] AS 注文コード, [ProductID] AS 商品コード, [UnitPrice] AS 単価, [Quantity] AS 数量 FROM [Order Details]> </asp:AccessDataSource>

ソースビュー

コードのコピー

<asp:AccessDataSource runat="server" 
         DataFile="~/App_Data/NWind.mdb" 
         SelectCommand="SELECT [OrderID] AS 注文コード, [ProductID] AS 商品コード, [UnitPrice] AS 単価, [Quantity] AS 数量 FROM [Order Details]>
   </asp:AccessDataSource>

Default.aspx.cs ファイルに移動し、次のコードを挿入して C1Pager コントロールをグリッドにバインドします。

ソースビュー	コードのコピー
protected void C1Pager1_PageIndexChanged(object sender, EventArgs e) { GridView1.PageIndex = C1Pager1.PageIndex; GridView1.DataBind(); } protected void GridView1_DataBound(object sender, EventArgs e) { C1Pager1.PageCount = GridView1.PageCount; } } }

ソースビュー

コードのコピー

protected void C1Pager1_PageIndexChanged(object sender, EventArgs e)
        {
            GridView1.PageIndex = C1Pager1.PageIndex;
            GridView1.DataBind();
        }
        protected void GridView1_DataBound(object sender, EventArgs e)
        {
            C1Pager1.PageCount = GridView1.PageCount;
        }
    }
}

［F5］を押して、プログラムを実行します。ページ付けされたテーブルは、次の図のようになるはずです。

このトピックは、次のことを示します。

実行時に、C1Pager 要素によって制御されるテーブルが表示されます。