Skip to content

DevExpress-Examples/asp-net-web-forms-tab-control-site-navigation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

<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" />
<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.

<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