ASP.NET Ajax Toolkit TabStrip 控件

• 下载源码 - 599.6 Kb

引言

Microsoft ASP.NET Ajax Toolkit 提供了一个出色的标签控件，当每个视图一次呈现一个时，它可以在单个页面中组织多个视图。 使用此控件管理在不同页面之间拆分的任务更加困难。 本文介绍的 TabStrip 控件可用于在多个页面之间导航。

背景

TabStrip 控件改编自 ASP.NET Ajax Toolkit 标签控件。 它包含一组仅表示标题文本的 Tab 对象。 TabStrip 控件不包含用于定义页面内容的模板。 Tab 元素可以从 XML 文件填充，也可以在页面标记中定义。 页面 URL 可以与每个选项卡相关联，并具有指示它是否禁用的属性。 禁用的选项卡无法选择。 一个选项卡可以包含一个嵌套的超链接层，这些链接也在 XML 文件中定义。

该控件在服务器上触发 ActiveItemChanged 事件，并在客户端上触发 ClientActiveItemChanged 事件。 服务器端事件携带有关单击的选项卡的信息，例如 ID 和 URL。 客户端事件也包含当前选定选项卡的 ID，并允许取消选项卡更改。

使用代码

必须使用指令显式注册控件

<%@ Register Assembly="TabStrip" 
    Namespace="AjaxControlToolkit" TagPrefix="act" %>

控件的使用可以通过标记代码来说明

<act:TabStrip runat="server" ID="TabStrip1" DataFile="~/TabMap.xml"
        OnActiveItemChanged="OnActiveItemChanged1"
        OnClientActiveItemChanged="ClientActiveItemChanged" />

可以按如下代码所示初始化选项卡

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        TabStrip1.DataBind();
    }
}

数据 XML 文件具有以下格式

<ArrayOfTabMap>
  <TabMap Text="Tab #1" >
    <ArrayOfTabMap>
        <TabMap Url="Default.aspx" Text="Sub #1" />
        <TabMap Url="SubPage2.aspx" Text="Sub #2" />
        <TabMap Url="SubPage3.aspx" Text="Sub #3" Disabled="true" />
    </ArrayOfTabMap>
  </TabMap>
  <TabMap Url="Page2.aspx" Text="Tab #2" Disabled="true" />
  <TabMap Url="Page3.aspx" Text="Tab #3" />
  <TabMap Text="Tab #4" DefaultActiveSubItemIndex="1">
    <ArrayOfTabMap>
      <TabMap Url="SubPage4.aspx" Text="Sub #4" />
      <TabMap Url="SubPage5.aspx" Text="Sub #5" />
    </ArrayOfTabMap>
  </TabMap>
</ArrayOfTabMap>

在此示例中，第一层的 TabMap 元素定义了顶级导航选项卡。 可选的嵌套 TabMap 条目定义了当前选项卡中的导航链接元素。 如果 TabMap 条目有子元素，则它不应具有关联的页面 URL。 如果 TabMap 元素设置了 Disabled 属性，则后续的选项卡或链接控件将不可点击，并将以褪色的颜色呈现。 TabMap 元素可以定义 DefaultActiveSubItemIndex 属性。 在这种情况下，选择选项卡后，将选择具有相应索引的嵌套超链接。

当选择的选项卡更改时，可以触发服务器端 OnActiveTabChanged 事件。 它包含当前选定选项卡的 ID 和目标页面 URL。 该事件具有以下签名

protected void OnActiveItemChanged1(object sender, 
    ActiveItemChangedEventArgs e)
{
    Response.Redirect(e.Url);
}

但是，对于导航来说，处理此事件不是必需的。 该控件允许无代码数据绑定。 当客户端上的选项卡更改时，将生成事件 OnClientActiveItemChanged。 该事件携带选项卡 ID，并允许取消事件传播到服务器

<script type="text/javascript">
function ClientActiveItemChanged(sender, e) 
{
    var result = 
        confirm("You are about to switch to the tab with ID " + 
        e.get_id() + ".\nAre you sure?");
    if (!result)
       e.set_cancel(true);
}
</script>

要更改控件的默认外观，可以通过页面引用自定义 CSS 文件，并在页面加载时将新样式与控件关联

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
       TabStrip1.CssClass = "my_tab";
       TabStrip1.DataBind();
    }
}

历史

• 2007/01/06: 第一个版本