Tab Control vs Page Control

  • 3 minutes to read

The ASPxTabControl Suite includes two components, allowing you to build tabbed interfaces within your web sites: ASPxTabControl and ASPxPageControl. The table below describes the differences between the controls.

Feature ASPxTabControl ASPxPageControl
Image tabcontrol-declaration.png pagecontrol-declaration.png
Consists of Tabs Tabs and tabbed pages
Purpose Navigation Layout
Data bound ability true false
Used for Navigating through different pages Displaying several tabbed pages within a control and navigating through them

ASPxTabControl

tabcontrol-declaration.png

ASPxTabControl is a navigation control made up of multiple tabs. It can be bound to a data source, e.g., a sitemap file. Use it to navigate through different pages.

Example

The example below utilizes an ASPxTabControl on a master page to navigate through pages.

View Example

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dxe" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxTabControl" TagPrefix="dxtc" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxClasses" tagprefix="dxw" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to use an ASPxTabControl for site navigation</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            &nbsp; &nbsp;
            <dxtc:ASPxTabControl ID="tcDemos" runat="server"  NavigateUrlField="Url" TextField="Name" ClientInstanceName = "tcDemos"
                DataSourceID="XmlDataSource1" OnTabDataBound="tcDemos_TabDataBound" EnableClientSideAPI="True">
                <ClientSideEvents TabClick = "function(s,e){
                document.location= e.tab.name;}" />

                <TabTemplate>
                    <dxe:aspxlabel id="Label1" runat="server" text="<%# Container.Tab.Text %>" font-names="Tahoma"
                        forecolor="#333333" font-size="8pt" />
                    &nbsp;
                </TabTemplate>
            </dxtc:ASPxTabControl>
            <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/SiteMap.xml" XPath="//SitePage">
            </asp:XmlDataSource>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>
<%--MasterPage.master--%>
<dxtc:ASPxTabControl ID="tcDemos" runat="server"  NavigateUrlField="Url" TextField="Name" ClientInstanceName = "tcDemos" DataSourceID="XmlDataSource1" OnTabDataBound="tcDemos_TabDataBound" EnableClientSideAPI="True">
     <ClientSideEvents TabClick = "function(s,e){
          document.location= e.tab.name;}" />
     <TabTemplate>
          <dxe:aspxlabel id="Label1" runat="server" text="<%# Container.Tab.Text %>" font-names="Tahoma" forecolor="#333333" font-size="8pt" />
     </TabTemplate>
</dxtc:ASPxTabControl>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/SiteMap.xml" XPath="//SitePage">
</asp:XmlDataSource>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<!--SiteMap.xml-->
<SiteMap>
  <SitePage Name="Page1" Url="~/Default.aspx" />
  <SitePage Name="Page2" Url="~/Page2.aspx" />
</SiteMap>
//MasterPage.master.cs
protected void tcDemos_TabDataBound(object source, DevExpress.Web.ASPxTabControl.TabControlEventArgs e) {
     Tab tab = e.Tab as Tab;
     if(tab == null) return;
     e.Tab.Name = ResolveClientUrl(tab.NavigateUrl);
}

ASPxPageControl

pagecontrol-declaration.png

ASPxPageControl is a layout control made up of multiple tabbed pages whose contents can be explicitly specified. Use the ASPxPageControl to display several tabs with different content on a page.

Example

The code sample below creates a page control with two tabbed pages.

<dxtc:ASPxPageControl ID="ASPxPageControl1" runat="server" ActiveTabIndex="0">
     <TabPages>
          <dxtc:TabPage>
               <ContentCollection>
                    <dxw:ContentControl runat="server" SupportsDisabledAttribute="True">
                         <asp:Label runat="server" ID = "Page1Label" Text = "PAGE1" ForeColor="White" BackColor="Indigo"></asp:Label>
                    </dxw:ContentControl>
               </ContentCollection>
          </dxtc:TabPage>
          <dxtc:TabPage>
               <ContentCollection>
                    <dxw:ContentControl runat="server" SupportsDisabledAttribute="True">
                         <asp:Label runat="server" ID = "Page2Label" Text = "PAGE2" ForeColor="Indigo"></asp:Label>
                    </dxw:ContentControl>
               </ContentCollection>
          </dxtc:TabPage>
     </TabPages>
</dxtc:ASPxPageControl>
See Also