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>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
            </text>);
        pages.Add()
            .Text("Products")
            .Content(@<text>
                <p>Quisque imperdiet risus quis nisl vulputate, a pharetra tortor ornare. Ut mi lectus, porttitor quis semper eu, lacinia id leo. Sed in nisl a neque consequat ultrices. Aliquam non sagittis nulla, nec tempus nibh. Cras aliquam nulla in elit iaculis accumsan. Ut eu lorem sagittis, volutpat arcu eu, mollis elit. Suspendisse aliquet magna diam, nec tristique mi cursus eu. Donec venenatis cursus ipsum, ut egestas turpis sodales vitae.</p>
            </text>);
        pages.Add()
            .Text("Support")
            .Content(@<text>
                <p>Aenean gravida tristique velit ac ornare. Maecenas ultricies metus sit amet ligula malesuada, in faucibus nulla cursus. Aenean sit amet vulputate lorem, commodo suscipit nulla. Nunc non vulputate nibh. Nam sapien magna, accumsan id dui sit amet, euismod rhoncus nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis feugiat augue. Sed turpis nibh, porta quis congue ut, mattis id purus. Donec auctor felis sit amet orci ornare, aliquet ultrices ipsum lacinia.</p>
            </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 => {
        pages.Add()
            .Text("Home")
            .Content(@<text>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
            </text>);
        pages.Add()
            .Text("Products")
            .Content(@<text>
                <p>Quisque imperdiet risus quis nisl vulputate, a pharetra tortor ornare. Ut mi lectus, porttitor quis semper eu, lacinia id leo. Sed in nisl a neque consequat ultrices. Aliquam non sagittis nulla, nec tempus nibh. Cras aliquam nulla in elit iaculis accumsan. Ut eu lorem sagittis, volutpat arcu eu, mollis elit. Suspendisse aliquet magna diam, nec tristique mi cursus eu. Donec venenatis cursus ipsum, ut egestas turpis sodales vitae.</p>
            </text>);
        pages.Add()
            .Text("Support")
            .Content(@<text>
                <p>Aenean gravida tristique velit ac ornare. Maecenas ultricies metus sit amet ligula malesuada, in faucibus nulla cursus. Aenean sit amet vulputate lorem, commodo suscipit nulla. Nunc non vulputate nibh. Nam sapien magna, accumsan id dui sit amet, euismod rhoncus nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis feugiat augue. Sed turpis nibh, porta quis congue ut, mattis id purus. Donec auctor felis sit amet orci ornare, aliquet ultrices ipsum lacinia.</p>
            </text>);
    })
)

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("Home")
            .Content(@<text>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
            </text>);
        pages.Add()
            .Text("Profile")
            .Content(@<text>
                <p>Quisque imperdiet risus quis nisl vulputate, a pharetra tortor ornare. Ut mi lectus, porttitor quis semper eu, lacinia id leo. Sed in nisl a neque consequat ultrices. Aliquam non sagittis nulla, nec tempus nibh. Cras aliquam nulla in elit iaculis accumsan. Ut eu lorem sagittis, volutpat arcu eu, mollis elit. Suspendisse aliquet magna diam, nec tristique mi cursus eu. Donec venenatis cursus ipsum, ut egestas turpis sodales vitae.</p>
            </text>);
        pages.Add()
            .Text("Messages")
            .Badge(b => b.Text("1"))
            .Content(@<text>
                <p>Aenean gravida tristique velit ac ornare. Maecenas ultricies metus sit amet ligula malesuada, in faucibus nulla cursus. Aenean sit amet vulputate lorem, commodo suscipit nulla. Nunc non vulputate nibh. Nam sapien magna, accumsan id dui sit amet, euismod rhoncus nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis feugiat augue. Sed turpis nibh, porta quis congue ut, mattis id purus. Donec auctor felis sit amet orci ornare, aliquet ultrices ipsum lacinia.</p>
            </text>);
    })
    .ClientSideEvents(events => events.TabClick("onTabWithBadgeClick"))
)
function onTabWithBadgeClick(args) {
    if(args.tab.getBadgeText())
        args.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 => {
        pages.Add()
            .Text("Home")
            .Content(@<text>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
            </text>);
        pages.Add()
            .Text("Products")
            .Content(@<text>
                <p>Quisque imperdiet risus quis nisl vulputate, a pharetra tortor ornare. Ut mi lectus, porttitor quis semper eu, lacinia id leo. Sed in nisl a neque consequat ultrices. Aliquam non sagittis nulla, nec tempus nibh. Cras aliquam nulla in elit iaculis accumsan. Ut eu lorem sagittis, volutpat arcu eu, mollis elit. Suspendisse aliquet magna diam, nec tristique mi cursus eu. Donec venenatis cursus ipsum, ut egestas turpis sodales vitae.</p>
            </text>);
        pages.Add()
            .Text("Support")
            .Content(@<text>
                <p>Aenean gravida tristique velit ac ornare. Maecenas ultricies metus sit amet ligula malesuada, in faucibus nulla cursus. Aenean sit amet vulputate lorem, commodo suscipit nulla. Nunc non vulputate nibh. Nam sapien magna, accumsan id dui sit amet, euismod rhoncus nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis feugiat augue. Sed turpis nibh, porta quis congue ut, mattis id purus. Donec auctor felis sit amet orci ornare, aliquet ultrices ipsum lacinia.</p>
            </text>);
    }))
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()
            .Text("Home")
            .Content(@<text>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
            </text>);
        tabPages.Add()
            .Text("Profile")
            .Content(@<text>
                <p>Quisque imperdiet risus quis nisl vulputate, a pharetra tortor ornare. Ut mi lectus, porttitor quis semper eu, lacinia id leo. Sed in nisl a neque consequat ultrices. Aliquam non sagittis nulla, nec tempus nibh. Cras aliquam nulla in elit iaculis accumsan. Ut eu lorem sagittis, volutpat arcu eu, mollis elit. Suspendisse aliquet magna diam, nec tristique mi cursus eu. Donec venenatis cursus ipsum, ut egestas turpis sodales vitae.</p>
            </text>);
        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>
                <p>Aenean gravida tristique velit ac ornare. Maecenas ultricies metus sit amet ligula malesuada, in faucibus nulla cursus. Aenean sit amet vulputate lorem, commodo suscipit nulla. Nunc non vulputate nibh. Nam sapien magna, accumsan id dui sit amet, euismod rhoncus nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis feugiat augue. Sed turpis nibh, porta quis congue ut, mattis id purus. Donec auctor felis sit amet orci ornare, aliquet ultrices ipsum lacinia.</p>
                </text>);
    })
    .ClientSideEvents(events => {
         events.TabClick("onDropdownTabClick");
    })
)
function onDropdownTabClick(args) {
    if(args.tab.name === "Messages" && this.getActiveTab() !== args.tab) {
        $(".nav-link.dropdown-toggle").dropdown("toggle");
        args.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 => {
        pages.Add()
            .Text("Home")
            .Content(@<text>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
            </text>);
        pages.Add()
            .Text("Products")
            .Content(@<text>
                <p>Quisque imperdiet risus quis nisl vulputate, a pharetra tortor ornare. Ut mi lectus, porttitor quis semper eu, lacinia id leo. Sed in nisl a neque consequat ultrices. Aliquam non sagittis nulla, nec tempus nibh. Cras aliquam nulla in elit iaculis accumsan. Ut eu lorem sagittis, volutpat arcu eu, mollis elit. Suspendisse aliquet magna diam, nec tristique mi cursus eu. Donec venenatis cursus ipsum, ut egestas turpis sodales vitae.</p>
            </text>);
        pages.Add()
            .Text("Support")
            .Content(@<text>
                <p>Aenean gravida tristique velit ac ornare. Maecenas ultricies metus sit amet ligula malesuada, in faucibus nulla cursus. Aenean sit amet vulputate lorem, commodo suscipit nulla. Nunc non vulputate nibh. Nam sapien magna, accumsan id dui sit amet, euismod rhoncus nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis feugiat augue. Sed turpis nibh, porta quis congue ut, mattis id purus. Donec auctor felis sit amet orci ornare, aliquet ultrices ipsum lacinia.</p>
            </text>);
    }))
function onInit(args) {
    dxbsDemo.eventMonitor.trace(this, args, 'Init');
}
function onTabClick(args) {
    dxbsDemo.eventMonitor.trace(this, args, 'TabClick');
}
function onActiveTabChanging(args) {
    dxbsDemo.eventMonitor.trace(this, args, 'ActiveTabChanging');
}
function onActiveTabChanged(args) {
    dxbsDemo.eventMonitor.trace(this, args, '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 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.

BootstrapPageControl methods:

BootstrapTab methods:

@(Html.DevExpress()
    .BootstrapPageControl("pageControl")
    .EnableClientSideAPI(true)
    .TabPages(tabPages => {
        tabPages.Add()
            .Text("Tab 1")
            .ActiveTabIconCssClass("fa fa-check")
            .Content(@<text>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
            </text>);
        tabPages.Add()
            .Text("Tab 2")
            .ActiveTabIconCssClass("fa fa-check")
            .Content(@<text>
                <p>Quisque imperdiet risus quis nisl vulputate, a pharetra tortor ornare. Ut mi lectus, porttitor quis semper eu, lacinia id leo. Sed in nisl a neque consequat ultrices. Aliquam non sagittis nulla, nec tempus nibh. Cras aliquam nulla in elit iaculis accumsan. Ut eu lorem sagittis, volutpat arcu eu, mollis elit. Suspendisse aliquet magna diam, nec tristique mi cursus eu. Donec venenatis cursus ipsum, ut egestas turpis sodales vitae.</p>
            </text>);
        tabPages.Add()
            .Text("Tab 3")
            .ActiveTabIconCssClass("fa fa-check")
            .Content(@<text>
                <p>Aenean gravida tristique velit ac ornare. Maecenas ultricies metus sit amet ligula malesuada, in faucibus nulla cursus. Aenean sit amet vulputate lorem, commodo suscipit nulla. Nunc non vulputate nibh. Nam sapien magna, accumsan id dui sit amet, euismod rhoncus nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis feugiat augue. Sed turpis nibh, porta quis congue ut, mattis id purus. Donec auctor felis sit amet orci ornare, aliquet ultrices ipsum lacinia.</p>
            </text>);
    })
)
Screen Size
Color Themes
Demo QR Code