PageControl

• Jul 09, 2021
• 2 minutes to read

PageControl represents a layout control made up of multiple tabbed pages whose content can be explicitly specified. This provides a web application with the functionality of tab-based navigation between several specific containers of child controls on a page.

To learn more about PageControl and see it in action, refer to its online demos.

Implementation Details

PageControl is realized by the PageControlExtension class. Its instance can be accessed via the ExtensionsFactory.PageControl helper method, which is used to add a PageControl extension to a view. This method’s parameter provides access to the PageControl‘s settings implemented by the PageControlSettings class, allowing you to fully customize the extension.

PageControl‘s client counterpart is represented by the MVCxClientPageControl object.

Declaration

PageControl can be added to a view in the following manner.

View code (ASPX):

C#

<% 
    Html.DevExpress().PageControl(
        settings =>
        {
            settings.Name = "pageControl";

            settings.Width = 300;
            settings.Height = 100;

            settings.TabPages.Add("Page1", "Page1").SetContent(() =>
            {%>
                <div>Page1 Content</div>
            <%});
            settings.TabPages.Add("Page2", "Page2").SetContent(() =>
            {%>
                <div>Page2 Content</div>
            <%});
            settings.TabPages.Add("Page3", "Page3").SetContent(() =>
            {%>
                <div>Page3 Content</div>
            <%});
        })
        .Render();
%>

View code (Razor):

C#

@Html.DevExpress().PageControl(
    settings =>    {
        settings.Name = "pageControl";

        settings.Width = 300;
        settings.Height = 100;

        settings.TabPages.Add("Page1", "Page1").SetContent(() =>
        {
            ViewContext.Writer.Write("<div>Page1 Content</div>");
        });
        settings.TabPages.Add("Page2", "Page2").SetContent(() =>
        {
            ViewContext.Writer.Write("<div>Page2 Content</div>");
        });
        settings.TabPages.Add("Page3", "Page3").SetContent(() =>
        {
            ViewContext.Writer.Write("<div>Page3 Content</div>");
        });
    }).GetHtml()

Note

The Partial View should contain only the extension’s code.

The result of this code is demonstrated by the image below.