使用 MultiView 控件的简单 ASP.NET 选项卡控件

• 下载源代码 - 14.1 Kb

引言

最近，我一直在使用 ASP.NET 2.0 编写一个小型 Web 抓取应用程序。在此期间，我试图研究 ASP.NET 2.0 中可用的一些新控件。我发现特别有趣的一个 2.0 控件是 MultiView 控件。新的 MultiView 控件与嵌入的 View 控件协同工作。每个 View 控件都充当内容容器，并且行为非常类似于 Panel 或 Canvas 区域。在运行时，MultiView 控件管理 View 控件，以确保一次只显示一个 View。我们可以使用 MultiView 控件的 ActiveViewIndex 属性来指定在任何特定时间应显示哪个 View。听起来有点像 Tab 控件，对吧？我想要做的是实现一个快速的选项卡控件，而不必购买商业组件。免责声明，商业组件更加健壮，可能值得购买，但如果您没有现金或者不需要“凯迪拉克”，那么以下代码提供了一个非常简单的解决方案。

关于该控件

当我开始编写我的简单选项卡控件时，我的脑海里一直有这篇文章，CSS 和圆角：构建可访问的菜单选项卡：一篇关于如何使用 CSS 技巧和图像制作选项卡控件的精彩文章。

我想做的是将这篇 CSS 文章中的想法与 ASP.NET Menu 和 MultiView 控件结合起来，创建一个相对漂亮的选项卡控件。这就是我想出来的

首先，我将一个 Menu 控件放在我的页面上。Menu 控件将呈现我的“选项卡”，并且也是 MultiView 控件的控制器。我将菜单设置为水平方向。同样，我给每个 MenuItem 一个指向我的选项卡图像的 ImageURL。请注意，您将必须根据需要实现自己的选项卡图像。以下是我的 Menu 控件规范

<asp:Menu
        ID="Menu1"
        Width="168px"
        runat="server"
        Orientation="Horizontal"
        StaticEnableDefaultPopOutImage="False"
        OnMenuItemClick="Menu1_MenuItemClick">
    <Items>
        <asp:MenuItem ImageUrl="~/selectedtab.GIF" 
                      Text=" " Value="0"></asp:MenuItem>
        <asp:MenuItem ImageUrl="~/unselectedtab.GIF" 
                      Text=" " Value="1"></asp:MenuItem>
        <asp:MenuItem ImageUrl="~/unselectedtab.GIF" 
                      Text=" " Value="2"></asp:MenuItem>
    </Items>
</asp:Menu>

接下来，我将我的 MultiView 控件放在我的页面上。请注意，每个 View 控件都包含一个带有 <td> 标签的表格，该标签将保存活动选项卡的所有内容。将 <td> 元素视为选项卡内容的占位符。我将这个 <td> 元素放在一个名为“TabArea”的 CSS 类中。这个类在内容周围放置一个边框。请参阅示例下载中的样式表。

<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">
                    <br />
                    <br />
                    TAB VIEW 1
                    INSERT YOUR CONENT IN HERE
                    CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
        </table>
     </asp:View>
    <asp:View ID="Tab2" runat="server">
        <table width="600px" height="400px" cellpadding=0 cellspacing=0>
            <tr valign="top">
                <td class="TabArea" style="width: 600px">
                <br />
                <br />
                    TAB VIEW 2
                    INSERT YOUR CONENT IN HERE
                    CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
        </table>
    </asp:View>
    <asp:View ID="Tab3" runat="server">
        <table width="600px" height="400px" cellpadding=0 cellspacing=0>
            <tr valign="top">
                <td class="TabArea" style="width: 600px">
                <br />
                <br />
                  TAB VIEW 3
                  INSERT YOUR CONENT IN HERE
                  CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
        </table>
    </asp:View>
</asp:MultiView>

最后，我将 Menu 控件的 MenuItemClick 事件连接到下面的方法

Protected Sub Menu1_MenuItemClick(ByVal sender As Object, _
          ByVal e As MenuEventArgs) Handles Menu1.MenuItemClick
    MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value)
    Dim i As Integer
    'Make the selected menu item reflect the correct imageurl
    For i = 0 To Menu1.Items.Count - 1
        If i = e.Item.Value Then
            Menu1.Items(i).ImageUrl = "selectedtab.gif"
        Else
            Menu1.Items(i).ImageUrl = "unselectedtab.gif"
        End If
    Next
End Sub

在此事件中，您可以看到我根据单击的选项卡（实际上是一个 MenuItem）设置了要显示的关联视图。同样，我为选定的 MenuItem 设置了正确的 ImageUrl。这基本上是交换选项卡的图像。这应该是您希望选定选项卡看起来的样子。在我的示例中，我有两个图像，一个选定的选项卡和一个未选定的选项卡。这就是我的示例在选择“选项卡 2”时的样子

此控件基本上依赖于一些基本的 CSS 样式以及 ASP.NET Menu 和 MultiView 控件。很简单，对吧？

希望您能找到一些用处。