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
- Default.aspx
- SiteMap.xml
- MasterPage.master (VB: MasterPage.master.vb)
- MasterPage.master.cs (VB: MasterPage.master.vb)
- Page2.aspx (VB: Page2.aspx)
Documentation
Example Code
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>
XML<?xml version="1.0" encoding="utf-8" ?>
<SiteMap>
<SitePage Name="Page1" Url="~/Default.aspx" />
<SitePage Name="Page2" Url="~/Page2.aspx" />
</SiteMap>
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>
<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>
</div>
</form>
</body>
</html>
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);
}
}
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>