ASP.NET WebForms 使用 MultiView + Button 模擬 TabControl 效果

| Web Design | 2 Reads

Copyright Notice: This article is an original work licensed under the CC 4.0 BY-NC-ND license. If you wish to repost this article, please include the original source link and this copyright notice.
Source link: https://v2know.com/article/1278

在 ASP.NET WebForms 中，並沒有像 WinForms 那樣現成的 TabControl 控制項。
不過，我們可以透過 MultiView 搭配一排 Button，很輕鬆地模擬出頁籤切換的效果。

基本概念

  • MultiView：裡面可以放多個 View，每個 View 就像是一個頁籤的內容。

  • ActiveViewIndex：控制目前顯示哪一個 View。

  • Button：當作頁籤的「標籤」，用來切換不同的 View。

具體做法

  1. 在 .aspx 設計頁面

    • 放一排 Button，每個按鈕對應一個 Tab。

    • 設定每個按鈕的 CommandArgument（例如 0、1、2…），代表對應的 View 索引。

    • OnClick 都指向同一個方法。

    <asp:Button ID="Button1" runat="server" Text="Tab1" CommandArgument="0" OnClick="Tab_Click" />
<asp:Button ID="Button2" runat="server" Text="Tab2" CommandArgument="1" OnClick="Tab_Click" />
<asp:Button ID="Button3" runat="server" Text="Tab3" CommandArgument="2" OnClick="Tab_Click" />

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
    <asp:View ID="View1" runat="server">
        <p>這是第一個頁籤的內容</p>
    </asp:View>
    <asp:View ID="View2" runat="server">
        <p>這是第二個頁籤的內容</p>
    </asp:View>
    <asp:View ID="View3" runat="server">
        <p>這是第三個頁籤的內容</p>
    </asp:View>
</asp:MultiView>

  2. 在 .vb 後台寫事件

    Protected Sub Tab_Click(sender As Object, e As EventArgs)
    Dim btn As Button = CType(sender, Button)   ' 找到點擊的按鈕
    Dim index As Integer = Convert.ToInt32(btn.CommandArgument)
    MultiView1.ActiveViewIndex = index          ' 切換頁籤
End Sub

執行效果

  • 點擊「Tab1」 → 顯示第一個 View。

  • 點擊「Tab2」 → 顯示第二個 View。

  • 點擊「Tab3」 → 顯示第三個 View。

這樣就能用最簡單的方式，實現類似 TabControl 的頁籤切換效果。

小結

  • ActiveViewIndex 是關鍵，控制哪個頁面顯示。

  • CommandArgument 就像「小紙條」，告訴後台「我要顯示第幾頁」。

  • 一個事件方法即可處理所有按鈕，簡潔又好維護。

This article was last edited at