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.