2019年8月5日 星期一

[ASP.NET] ListView + DataPager + ObjectDataSource 實作分頁功能



ListView → 控制項可選取、排序、刪除、編輯和插入資料錄。是定義的樣板顯示資料來源的值。主要定義以下兩項屬性:
LayoutTemplate 顯示格式
ItemTemplate 資料連結
<asp:ListView runat="server" ID="ProductListView"
    ItemType="ProductForWebForm.Models.ProductModel"
    DataSourceID="ProductObjectDataSource"
    OnDataBound="ProductListView_DataBound">
    <LayoutTemplate>
        <table runat="server" class="table">
            <tr runat="server">
                <th runat="server" class="tableheader">產品名稱</th>
                <th runat="server" class="tableheader">照片</th>
                <th runat="server" class="tableheader">單價</th>
                <th runat="server" class="tableheader">數量</th>
                <th></th>
            </tr>
            <tr id="itemPlaceholder"></tr>
        </table>
    </LayoutTemplate>
    <ItemTemplate>
        <tr>
            <td><%#:Item.ProdName%></td>
            <td>
                <img style="max-width: 50px; max-height: 50px" src="<%#:Item.ImagePath%>" />
            </td>
            <td><%#:Item.Price%></td>
            <td><%#:Item.Count%></td>
            <td>
                <input type="button" class="btn btn-default" value="編輯" onclick="btnDelete(<%#:Item.ID%>);" />
                <input type="button" class="btn btn-danger" value="刪除" onclick="btnDelete(<%#:Item.ID%>);" />
            </td>
        </tr>
    </ItemTemplate>
</asp:ListView>
<asp:DataPager ID="ProductDataPager" runat="server" 
    PageSize="3" PagedControlID="ProductListView" QueryStringField="page">
    <Fields>
        <asp:NextPreviousPagerField ButtonType="Button" 
                ShowFirstPageButton="True" 
                ShowNextPageButton="False" 
                ShowPreviousPageButton="False" 
                ButtonCssClass="btn btn-info" />
        <asp:NumericPagerField ButtonCount="10" 
                NumericButtonCssClass="btn btn-default" 
                NextPreviousButtonCssClass="btn btn-primary" 
                CurrentPageLabelCssClass="btn btn-primary" />
        <asp:NextPreviousPagerField ButtonType="Button" 
                ShowLastPageButton="True" 
                ShowNextPageButton="False" 
                ShowPreviousPageButton="False" 
                ButtonCssClass="btn btn-info" />
    </Fields>
</asp:DataPager>
<asp:ObjectDataSource ID="ProductObjectDataSource" runat="server"
    TypeName="ProductForWebForm.Product"
    EnablePaging="True"
    StartRowIndexParameterName="rowIndex"
    MaximumRowsParameterName="pageSize"
    SelectMethod="GetProducts"
    SelectCountMethod="GetProductRowCount">
</asp:ObjectDataSource>
*此範例採取DataSourceID="資料控制項ID"去繫結ObjectDataSource資料控制項物件。(或可以使用DataSource="XXX"去繫結資料集合)
*資料顯示位置,需要在"LayoutTemplate"結構裡設置 id="itemPlaceholder"
<tr id="itemPlaceholder"></tr>
DataPager → 定義分頁。設置第一頁、最後一頁等等,某某某cssClass可設置css樣本。
*沒放置在ListView結構裡面,需設置 PagedControlID="ListViewID名稱"

ObjectDataSource → 資料繫結控制項。
TypeName 設置類別名稱(反射機制)
StartRowIndexParameterName
MaximumRowsParameterName
在Class的方法參數,名稱與參數需要一致
SelectMethod 擷取資料之方法或函式的名稱
        public IQueryable GetProducts(int rowIndex,int pageSize)
        {
            int CurrentPageRowCount = ((rowIndex + 1) * pageSize);
            var result = (from k in
                          (from s in this._DBContent.Product
                           orderby s.ID ascending
                           select s).Take(CurrentPageRowCount)
                      orderby k.ID descending
                      select k).Take(pageSize);
            return result;
        }
        public int GetProductRowCount()
        {
            return this._DBContent.Product.Count();
        }

沒有留言:

張貼留言