Default Page Control

The Page Control displays content as a set of tabbed pages. Each page in the Page Control serves as a separate child control container allowing you to associate specific page content with each displayed tab. Page Control's tabs can be declared using the TabPages method.

Tab's methods:

Client Page Control's methods:

Use the Tab Control to only display tabs without associated content.

@(Html.DevExpress()
    .BootstrapPageControl("PageControlDefault")
    .TabPages(pages => {
        pages.Add()
            .Text("Home")
            .Content(@<text>
                ...
            </text>);
        pages.Add()
            .Text("Products")
            .Content(@<text>
                ...
            </text>);
        pages.Add()
            .Text("Support")
            .Content(@<text>
                ...
            </text>);
    }))

Tab Alignment

Use the TabAlign method to specify the alignment of tabs within the control. The following modes are supported: Justify, Left, Right.

@(Html.DevExpress()
    .BootstrapPageControl("TabAlignment")
    .TabAlign(TabAlign.Justify)
    .TabPages(pages => {
        ...
)

Badges

The Page Control can display supplementary information for any tab within a badge. A badge can display a text, an icon or both. Use the following API to set the contents of item badges:

Tab's methods:

The methods listed below allow you to manipulate badges on the client:

Note that the Badge property does not affect templated tabs.

@(Html.DevExpress()
    .BootstrapPageControl("pageControlWithBadges")
    .TabPages(pages => {
        ...
        pages.Add()
            .Text("Messages")
            .Badge(b => b.Text("1"))
            .Content(@<text>
                ...
            </text>);
    })
    .ClientSideEvents(events => events.TabClick("onTabWithBadgeClick"))
)
function onTabWithBadgeClick(s, e) {
    if(e.tab.GetBadgeText())
        e.tab.SetBadgeText("");
}

Load Content on Demand

The Page Control can obtain page contents from the server using AJAX requests when an end-user switches tabs. When this feature is enabled, only the content of the active page is sent to the client during the first request. The content of every other page is obtained from the server only once - when the page is first activated. To enable this feature, specify requests routing using the Routes method.

Note that in this demo the AJAX requests time is intentionally extended so that the loading indicator is visible during requests.

@(Html.DevExpress()
    .BootstrapPageControl("pageControlWithDynamicallyLoadedContent")
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("Layout")
            .Action("PageControlLoadContentOnDemand")))
    .TabPages(pages => {
        ...
    }))
using Microsoft.AspNetCore.Mvc;
using System;
using System.Threading;
namespace DevExpress.AspNetCore.Demos {
    public partial class LayoutController : Controller {
        public ActionResult PageControlLoadContentOnDemand() {
            if(Request.IsAjaxRequest())
                Thread.Sleep(1000);
            return PartialView("PageControl/PageControlLoadContentOnDemand");
        }
    }
}

Templates

The Page Control supports templates allowing you to customize control appearance and layout. A template can be applied to all tabs (using control level templates) or a specific tab (using item level templates). Moreover, templates can be specified for tabs in both active and inactive states. Use the following methods to specify templates.

Page Control methods:

Tab methods:

@(Html.DevExpress()
    .BootstrapPageControl("TemplatesPageControl")
    .TabPages(tabPages => {
        ...
        tabPages.Add()
            .Name("Messages")
            .Text("Messages")
            .ActiveTabTemplate(t => @<text>
                    <div class="dropdown">
                        <a href="javascript:;" class="nav-link active dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">@t.TabPage.Text</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="javascript:;">Inbox</a>
                            <a class="dropdown-item" href="javascript:;">Sent Items</a>
                            <a class="dropdown-item" href="javascript:;">Drafts</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="javascript:;">Spam</a>
                        </div>
                    </div>
                </text>)
            .TabIconCssClass("dropdown-toggle float-right")
            .Content(@<text>
                ...
                </text>);
    })
    .ClientSideEvents(events => {
         events.TabClick("onDropdownTabClick");
    })
    
)
function onDropdownTabClick(s, e) {
            if(e.tab.name == "Messages" && s.GetActiveTab() != e.tab) {
                $(".nav-link.dropdown-toggle").dropdown("toggle");
                e.htmlEvent.stopPropagation();
            }
        }

Client-Side Events

This demo illustrates the capabilities of the Page Control's client events and allows you to specify which client-side events you want to track. Interact with the tabbed interface to see the information about all tracked events raised in response to your actions in the event log.

Trace Events:
@(Html.DevExpress()
    .BootstrapPageControl("ClientSideEvents")
    .ClientSideEvents(events => events
        .Init("onInit")
        .TabClick("onTabClick")
        .ActiveTabChanging("onActiveTabChanging")
        .ActiveTabChanged("onActiveTabChanged"))
    .TabPages(pages => {
        ...
    }))
function onInit(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Init');
}
function onTabClick(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'TabClick');
}
function onActiveTabChanging(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'ActiveTabChanging');
}
function onActiveTabChanged(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'ActiveTabChanged');
}

Client-Side Functionality

The Page Control offers an advanced client-side API allowing you to manipulate the control and its elements.

The EnableClientSideAPI method specifies whether or not the client-side API is available. Note that the client-side API is automatically enabled if the ClientInstanceName method has been called or any client-side event available through the ClientSideEvents method is handled.

This demo allows you to interactively explore capabilities of the Page Control's client-side API.

BootstrapClientPageControl methods:

BootstrapClientTab methods:

@(Html.DevExpress()
    .BootstrapPageControl("pageControl")
    .EnableClientSideAPI(true)
    ...
)
Screen Size
Color Themes
Demo QR Code