您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> 關於ASP.NET

ASP.NET MVC 2.0 結合 jQuery UI Tabs 實作非同步分頁

編輯：關於ASP.NET

Tab 介面廣泛應用於入口網站（如 Yahoo、MSN、博客園首頁），能在有限空間呈現更多內容。本文示範在 ASP.NET MVC 2.0 中整合 jQuery UI Tabs，並實作 Tab 內容區的非同步無刷新分頁功能。

技術架構

後端：ASP.NET MVC 2.0 Controller + PartialView
前端：jQuery UI Tabs + jQuery AJAX
分頁元件：自訂 HTML Helper 擴充方法（參考 MvcPager 概念）

步驟 1：引入 jQuery UI

從 jQuery UI 官網下載客製化套件（勾選 Tabs 元件），或使用 CDN：

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

步驟 2：Controller 準備分頁資料

public class ProductController : Controller
{
    private readonly IProductService _productService;

    public ProductController(IProductService productService)
    {
        _productService = productService;
    }

    // 主頁面：包含 Tabs 容器
    public ActionResult Index()
    {
        var categories = _productService.GetCategories();
        return View(categories);
    }

    // Tab 內容：透過 AJAX 載入的部分檢視
    public ActionResult CategoryProducts(int id, int page = 1, int pageSize = 10)
    {
        var pagedList = _productService.GetProductsByCategory(id, page, pageSize);
        return PartialView("_ProductList", pagedList);
    }
}

步驟 3：主檢視 - Tabs 容器與初始化

@model IEnumerable

<div id="productTabs">
    <ul>
        @foreach (var cat in Model)
        {
            <li><a href="@Url.Action("CategoryProducts", "Product", new { id = cat.Id })">@cat.Name</a></li>
        }
    </ul>
</div>

<script>
    $(function () {
        $("#productTabs").tabs({
            beforeLoad: function (event, ui) {
                ui.jqXHR.fail(function () {
                    ui.panel.html("載入失敗，請稍後再試。");
                });
            }
        });
    });
</script>

關鍵點：Tabs 的 `` 直接指向 Controller Action，jQuery UI 會自動透過 AJAX 載入回應的 HTML 片段填入對應面板。

步驟 4：部分檢視 - 產品清單與分頁

_ProductList.cshtml

@model PagedList

<table class="product-grid">
    <thead>
        <tr><th>產品名稱</th><th>價格</th><th>庫存</th></tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Name</td>
                <td>@item.Price.ToString("C")</td>
                <td>@item.Stock</td>
            </tr>
        }
    </tbody>
</table>

@* 分頁導航 *@
@if (Model.TotalPages > 1)
{
    <div class="pagination">
        @for (int i = 1; i <= Model.TotalPages; i++)
        {
            var url = Url.Action("CategoryProducts", "Product", new { id = Model.CategoryId, page = i });
            <a href="@url" class="@(i == Model.PageNumber ? "current" : "")">@i</a>
        }
    </div>
}

步驟 5：分頁連結非同步化（關鍵步驟）

預設分頁連結會導致整頁重新載入。需攔截分頁點擊事件，透過 AJAX 更新當前 Tab 面板：

<script>
    $(function () {
        $("#productTabs").tabs({
            beforeLoad: function (event, ui) {
                ui.jqXHR.fail(function () {
                    ui.panel.html("載入失敗，請稍後再試。");
                });
            }
        });

        // 事件委派：處理 Tab 面板內的分頁連結點擊
        $("#productTabs").on("click", ".pagination a", function (e) {
            e.preventDefault();
            var $link = $(this);
            var $panel = $link.closest(".ui-tabs-panel");
            $panel.load($link.attr("href"));
        });
    });
</script>

此處使用 .on() 事件委派，確保動態載入的分頁連結同樣生效。$panel.load() 會取代面板內容，達到無刷新分頁效果。