2019年8月5日 星期一

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



ListView → 控制項可選取、排序、刪除、編輯和插入資料錄。是定義的樣板顯示資料來源的值。主要定義以下兩項屬性:
LayoutTemplate 顯示格式
ItemTemplate 資料連結
  1. <asp:ListView runat="server" ID="ProductListView"
  2. ItemType="ProductForWebForm.Models.ProductModel"
  3. DataSourceID="ProductObjectDataSource"
  4. OnDataBound="ProductListView_DataBound">
  5. <LayoutTemplate>
  6. <table runat="server" class="table">
  7. <tr runat="server">
  8. <th runat="server" class="tableheader">產品名稱</th>
  9. <th runat="server" class="tableheader">照片</th>
  10. <th runat="server" class="tableheader">單價</th>
  11. <th runat="server" class="tableheader">數量</th>
  12. <th></th>
  13. </tr>
  14. <tr id="itemPlaceholder"></tr>
  15. </table>
  16. </LayoutTemplate>
  17. <ItemTemplate>
  18. <tr>
  19. <td><%#:Item.ProdName%></td>
  20. <td>
  21. <img style="max-width: 50px; max-height: 50px" src="<%#:Item.ImagePath%>" />
  22. </td>
  23. <td><%#:Item.Price%></td>
  24. <td><%#:Item.Count%></td>
  25. <td>
  26. <input type="button" class="btn btn-default" value="編輯" onclick="btnDelete(<%#:Item.ID%>);" />
  27. <input type="button" class="btn btn-danger" value="刪除" onclick="btnDelete(<%#:Item.ID%>);" />
  28. </td>
  29. </tr>
  30. </ItemTemplate>
  31. </asp:ListView>
  32. <asp:DataPager ID="ProductDataPager" runat="server"
  33. PageSize="3" PagedControlID="ProductListView" QueryStringField="page">
  34. <Fields>
  35. <asp:NextPreviousPagerField ButtonType="Button"
  36. ShowFirstPageButton="True"
  37. ShowNextPageButton="False"
  38. ShowPreviousPageButton="False"
  39. ButtonCssClass="btn btn-info" />
  40. <asp:NumericPagerField ButtonCount="10"
  41. NumericButtonCssClass="btn btn-default"
  42. NextPreviousButtonCssClass="btn btn-primary"
  43. CurrentPageLabelCssClass="btn btn-primary" />
  44. <asp:NextPreviousPagerField ButtonType="Button"
  45. ShowLastPageButton="True"
  46. ShowNextPageButton="False"
  47. ShowPreviousPageButton="False"
  48. ButtonCssClass="btn btn-info" />
  49. </Fields>
  50. </asp:DataPager>
  51. <asp:ObjectDataSource ID="ProductObjectDataSource" runat="server"
  52. TypeName="ProductForWebForm.Product"
  53. EnablePaging="True"
  54. StartRowIndexParameterName="rowIndex"
  55. MaximumRowsParameterName="pageSize"
  56. SelectMethod="GetProducts"
  57. SelectCountMethod="GetProductRowCount">
  58. </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();
        }

沒有留言:

張貼留言