Skip to main content

PageControl

  • 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):

<% 
    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):

@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.

pagecontrol-declaration.png