ASP.NET TabBar 服务器控件

• 下载源代码 - 57 Kb

引言

很多我的客户要求在他们的 Web 应用程序中使用选项卡导航。我所做的应用程序大多是业务类型的，一个常用的导航方案是使用选项卡栏来表示高级别的类别，而子类别则用“子”选项卡栏来表示。因此，我开始开发一个控件，该控件可以提供选项卡栏的可视化表示，可以配置为感知页面或不感知页面，与内置的 ASP.NET 角色 API 集成，具有设计器支持，支持ViewState序列化，并且可以轻松地以编程方式操作。

将选项卡栏添加到页面

首先，添加对 GeminiSoftworks.Web.Navigation.dll 的引用。

接下来，将以下内容添加到您的 web.config 文件中，作为 <system.web> 的子节点。

<pages>
    <controls>
        <add tagPrefix="TabBar" 
             namespace="GeminiSoftworks.Web.Navigation" 
             assembly="GeminiSoftworks.Web.Navigation"/>
        <add tagPrefix="Tab" 
             namespace="GeminiSoftworks.Web.Navigation" 
             assembly="GeminiSoftworks.Web.Navigation"/>
    </controls>
</pages>

最后，将控件添加到页面。可以通过将控件添加到您的工具箱，然后将控件拖到页面上，或者直接以如下方式添加到 HTML 中来完成

<TabBar:TabBar ID="TabBar1" runat="server" Width="100%">
    <TabBar:Tab Link="~/default.aspx" Name="Home" PreserveFormOnTransfer="False" 
                Text="Home" ToolTip="Home" UseServerTransferMethod="False" 
                Visible="True" />
    <TabBar:Tab Link="" Name="Resources" PreserveFormOnTransfer="False" 
                Text="Resources" ToolTip="Resources" 
                UseServerTransferMethod="False" Visible="True" />
    <TabBar:Tab Link="" Name="Downloads" PreserveFormOnTransfer="False" 
                Text="Downloads" ToolTip="Downloads" 
                UseServerTransferMethod="False" Visible="True" />
</TabBar:TabBar>

现在，在浏览器中打开页面，您的页面应该像上面的示例图像一样呈现。

在代码中处理选项卡栏

protected void TabBar1_TabClick(object sender, 
          System.ComponentModel.CancelEventArgs ce)
{
    //basic tabbar operations...

    //example: get the tab that was clicked
    GeminiSoftworks.Web.Navigation.Tab t = 
           (GeminiSoftworks.Web.Navigation.Tab)sender;

    /* 
     * The following examples will modify the tabbar programmatically 
     * I will cancel the click event at the end of this function so that
     * the changes made will render
     * 
     * Typically, I will define constants for all the tab objects I need
     * and programmatically render the tabbar based on the circumstances.
     * The only case I declaritively set up tabs
     * is when they are basically static.
     * 
     * ** Remember **
     * If you are using the standard ASP.NET roles
     * configuration, secured tabs will be 
     * automatically suppressed for users that
     * don't have the appropriate authority to
     * use them. You can also create a derived
     * class and override the IsTabValidForRole
     * to implement custom security.
     * 
     * Roles = * (all users), ? (authenticated users),
     *            and any roles you define
     * 
     * ** Remember **
     * Tab authentication is based on the least secure role
     * (e.g. a tab with roles ("Admin","*") will render for all roles. 
     * 
     */

    //example: create a new tab
    GeminiSoftworks.Web.Navigation.Tab nt = 
    new GeminiSoftworks.Web.Navigation.Tab("NewTab", 
             "New Tab", "~/newpage.aspx", "New Tab");

    //example: set some pages that the tab should render 'active' for...
    nt.ActivePagesList = new string[] { "~/newsubpage1.aspx", 
                                        "~/newsubpage2.aspx" };

    //example: assign a role to view the tab
    //note: not assigning any roles means all users can view the tab, so
    //this example is the same as not setting the AllowRoles property
    nt.AllowRoles = new string[] { "*" };

    //example: add the new tab to the tabbar
    this.TabBar1.Tabs.Add(nt);

    //example: remove a tab by calling GetTab 
    //which accepts a tab name and returns a tab reference
    this.TabBar1.Tabs.Remove(this.TabBar1.Tabs.GetTab("Downloads"));

    /* cancel the click event to see the changes we made above */

    //example: cancel the event
    ce.Cancel = true;
}

您可以从源代码中学到的内容

• 设计器支持
• 嵌入 Web 资源
• ViewState 序列化
• 使用 HTML 渲染而不是复合控件渲染
• 支持事件

仍然需要做的事情

在某个时候，我会向选项卡栏添加一些更多的功能。具体来说，它需要 ADA section 508 支持，以及使用自定义图像代替文本作为选项卡的能力。总有一天，会有几个小时的空闲时间来完成这些，但我决定提交这篇文章，希望其他人会觉得它有用。所以请尽情享受吧...