asp.net 分頁如何實現前端分頁

在ASP.NET中，實現前端分頁通常涉及以下幾個步驟：

1. 后端處理：在后端代碼中處理分頁邏輯，包括查詢數據庫、計算總頁數等。

2. 前端顯示：在前端頁面中顯示分頁控件和分頁數據。

下面是一個簡單的示例，展示如何在ASP.NET中實現前端分頁。

后端處理

假設我們有一個Product表，并且我們希望實現分頁功能。

1. 創建一個數據訪問層（DAL）

public class ProductDAL
{
    public List<Product> GetProducts(int pageNumber, int pageSize)
    {
        // 這里可以連接數據庫并查詢數據
        // 例如：返回第pageNumber頁的數據，每頁pageSize條記錄
        int offset = (pageNumber - 1) * pageSize;
        var products = new List<Product>();
        // 模擬數據庫查詢
        for (int i = 0; i < offset + pageSize && i < 100; i++)
        {
            products.Add(new Product { Id = i + 1, Name = $"Product {i + 1}" });
        }
        return products;
    }
}

2. 創建一個控制器（Controller）

public class ProductController : Controller
{
    private readonly ProductDAL _productDAL;

    public ProductController()
    {
        _productDAL = new ProductDAL();
    }

    public ActionResult Index(int pageNumber = 1, int pageSize = 10)
    {
        var products = _productDAL.GetProducts(pageNumber, pageSize);
        var totalProducts = 100; // 模擬總記錄數
        var totalPages = (int)Math.Ceiling((double)totalProducts / pageSize);

        ViewBag.PageNumber = pageNumber;
        ViewBag.TotalPages = totalPages;
        ViewBag.PageSize = pageSize;

        return View(products);
    }
}

前端顯示

1. 創建一個視圖（View）

在Views/Product/Index.cshtml中創建分頁控件和顯示數據的區域。

@model List<Product>

@{
    ViewBag.Title = "Product List";
}

<h2>Product List</h2>

<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
    @foreach (var product in Model)
    {
        <tr>
            <td>@product.Id</td>
            <td>@product.Name</td>
        </tr>
    }
</table>

<div>
    <span>Page @ViewBag.PageNumber of @ViewBag.TotalPages</span>
    <ul class="pagination">
        <li class="page-item @(ViewBag.PageNumber == 1 ? "disabled" : "")">
            <a class="page-link" href="/Product?page=1">First</a>
        </li>
        <li class="page-item @(ViewBag.PageNumber == 1 ? "disabled" : "")">
            <a class="page-link" href="/Product?page=@(ViewBag.PageNumber - 1)">Previous</a>
        </li>
        @for (int i = 1; i <= ViewBag.TotalPages; i++)
        {
            <li class="page-item @(i == ViewBag.PageNumber ? "active" : "")">
                <a class="page-link" href="/Product?page=@i">@i</a>
            </li>
        </@for>
        <li class="page-item @(ViewBag.PageNumber == ViewBag.TotalPages ? "disabled" : "")">
            <a class="page-link" href="/Product?page=@(ViewBag.PageNumber + 1)">Next</a>
        </li>
        <li class="page-item @(ViewBag.PageNumber == ViewBag.TotalPages ? "disabled" : "")">
            <a class="page-link" href="/Product?page=@(ViewBag.TotalPages)">Last</a>
        </li>
    </ul>
</div>

總結

通過上述步驟，我們實現了ASP.NET中的前端分頁功能。后端負責處理分頁邏輯和查詢數據庫，前端則負責顯示分頁控件和分頁數據。這種方式可以提高用戶體驗，減少服務器的負擔。