ASP.NET 2.0 MultiView 控制項實作分頁式介面：搭配 Menu 控制項打造 Tab 效果完整範例

使用 ImageUrl 呈現圖形化 Tab，Value 對應 View 索引。

MultiView 控制項：三個 View 內容區

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
  <asp:View ID="Tab1" runat="server">
    <table width="600" height="400" cellpadding="0" cellspacing="0">
      <tr valign="top"><td class="TabArea" style="width: 600px">
        TAB VIEW 1 - 內容區域一
      </td></tr></table>
  </asp:View>
  <asp:View ID="Tab2" runat="server">
    <table width="600" height="400" cellpadding="0" cellspacing="0">
      <tr valign="top"><td class="TabArea" style="width: 600px">
        TAB VIEW 2 - 內容區域二
      </td></tr></table>
  </asp:View>
  <asp:View ID="Tab3" runat="server">
    <table width="600" height="400" cellpadding="0" cellspacing="0">
      <tr valign="top"><td class="TabArea" style="width: 600px">
        TAB VIEW 3 - 內容區域三
      </td></tr></table>
  </asp:View>
</asp:MultiView>

後置程式碼：MenuItemClick 事件處理

Protected Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs)
    ' 切換 MultiView 顯示對應 View
    MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value)
    
    ' 更新 Menu 圖示：選中項亮色、其他灰色
    For i As Integer = 0 To Menu1.Items.Count - 1
        If i = Int32.Parse(e.Item.Value) Then
            Menu1.Items(i).ImageUrl = "selectedtab.gif"
        Else
            Menu1.Items(i).ImageUrl = "unselectedtab.gif"
        End If
    Next
End Sub

C# 版本對應

protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
    MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value);
    for (int i = 0; i < Menu1.Items.Count; i++)
    {
        Menu1.Items[i].ImageUrl = (i == MultiView1.ActiveViewIndex) ? "selectedtab.gif" : "unselectedtab.gif";
    }
}

進階應用技巧

ViewState 保持各 View 狀態

MultiView 切換時，非作用中 View 的控制項狀態（文字方塊輸入、下拉選單選取）自動保留於 ViewState，切回即還原，無需額外程式碼。

程式化切換視圖

// 依條件切換
if (User.IsInRole("Admin"))
    MultiView1.SetActiveView(AdminView);
else
    MultiView1.SetActiveView(UserView);

Wizard 控制項替代方案

若需步驟式精靈流程（下一步/上一步/完成），建議使用 Wizard 控制項，內建導航按鈕、步驟驗證、側邊列指示器。

CSS 樣式化 Tab 外觀

<style>
  .tab-menu { display: flex; border-bottom: 2px solid #336699; }
  .tab-menu .staticMenuItem { padding: 8px 16px; cursor: pointer; background: #eee; border: 1px solid #ccc; border-bottom: none; margin-right: 2px; }
  .tab-menu .selected { background: #336699; color: white; font-weight: bold; }
  .view-content { border: 1px solid #336699; border-top: none; padding: 16px; min-height: 300px; }
</style>

配合 Menu CssClass、StaticMenuItemCssClass、StaticSelectedStyle-CssClass 套用。

最佳實務建議

• ActiveViewIndex 初始值設定預設顯示視圖，避免載入閃爍。
• 大量 View 內容考慮 UpdatePanel 部分更新，避免完整回傳。
• 無障礙支援：加入 role="tablist"、role="tab"、aria-selected 屬性。
• 行動裝置響應式：CSS Flexbox/Grid 配合媒體查詢調整 Tab 排版。

MultiView + Menu 組合以最少程式碼實現專業級 Tab 介面，是 ASP.NET 2.0 豐富單頁應用體驗的利器。