Example E1308
Visible to All Users

Tab Control for ASP.NET Web Forms - How to use a tab control for site navigation

This example demonstrates how to bind a tab control to a sitemap file and use ContentPlaceHolder objects to navigate through multiple content pages.

Overview

Create a tab control and bind it to a sitemap file to navigate through multiple pages. Set the control's NavigateUrlField property to Url.

ASPx
<dx:ASPxTabControl ID="tcDemos" runat="server" NavigateUrlField="Url" TextField="Name" ClientInstanceName = "tcDemos" DataSourceID="XmlDataSource1" OnTabDataBound="tcDemos_TabDataBound" EnableClientSideAPI="True"> <!-- ... --> </dx:ASPxTabControl> <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/SiteMap.xml" XPath="//SitePage" /> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
XML
<SiteMap> <SitePage Name="Page1" Url="~/Default.aspx" /> <SitePage Name="Page2" Url="~/Page2.aspx" /> </SiteMap>

Use ContentPlaceHolder objects to create content pages. When a user clicks a tab, a content page is loaded into a place holder.

ASPx
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <dx:ASPxPanel ID="ASPxPanel1" runat="server" Height="100%" Width="100%" BackColor="Indigo"> <PanelCollection> <dx:PanelContent runat="server"> <dx:ASPxLabel runat="server" ID = "Page1Label" Text = "PAGE1" ForeColor="White" /> </dx:PanelContent> </PanelCollection> </dx:ASPxPanel> </asp:Content>

You can use this approach to create a dynamic page control.

Files to Review

Documentation

Example Code

WebSite14/Default.aspx
ASPx
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Page1" Title="Untitled Page" %> <%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dxp" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <dxp:ASPxPanel ID="ASPxPanel1" runat="server" Height="100%" Width="100%" BackColor="Indigo"> <PanelCollection> <dxp:PanelContent runat="server"> <asp:Label runat="server" ID = "Page1Label" Text = "PAGE1" ForeColor="White"></asp:Label> </dxp:PanelContent> </PanelCollection> </dxp:ASPxPanel> </asp:Content>
WebSite14/SiteMap.xml
XML
<?xml version="1.0" encoding="utf-8" ?> <SiteMap> <SitePage Name="Page1" Url="~/Default.aspx" /> <SitePage Name="Page2" Url="~/Page2.aspx" /> </SiteMap>
WebSite14/MasterPage.master
Code
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dxe" %> <%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dxtc" %> <%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" 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>
WebSite14/MasterPage.master.cs(vb)
C#
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using DevExpress.Web; public partial class MasterPage : System.Web.UI.MasterPage { protected void Page_Load(object sender, EventArgs e) { } protected void tcDemos_TabDataBound(object source, DevExpress.Web.TabControlEventArgs e) { Tab tab = e.Tab as Tab; if(tab == null) return; e.Tab.Name = ResolveClientUrl(tab.NavigateUrl); } }
WebSite14/Page2.aspx
ASPx
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Page2.aspx.cs" Inherits="Page2" Title="Untitled Page" %> <%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dxp" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <dxp:ASPxPanel ID="ASPxPanel2" runat="server" Height="100%" Width="100%" BackColor="White"> <PanelCollection> <dxp:PanelContent runat="server"> <asp:Label runat="server" ID = "Page2Label" Text = "PAGE2" ForeColor="Indigo"></asp:Label> </dxp:PanelContent> </PanelCollection> </dxp:ASPxPanel> </asp:Content>

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.