TabControl
TabControl represents a navigation control made up of multiple tabs. It can be used to create tabbed interfaces that allow end-users to navigate through different pages.
To learn more about TabControl and see it in action, refer to its online demos.
#Implementation Details
TabControl is realized by the TabControlExtension class. Its instance can be accessed via the ExtensionsFactory.TabControl helper method, which is used to add a TabControl extension to a view. This method’s parameter provides access to the TabControl‘s settings implemented by the TabControlSettings class, allowing you to fully customize the extension.
TabControl‘s client counterpart is represented by the ASPxClientTabControl object.
#Declaration
TabControl can be added to a view in the following manner.
View code (ASPX):
<%
Html.DevExpress().TabControl(
settings =>
{
settings.Name = "tabControl";
settings.Width = 300;
settings.Height = 100;
settings.Tabs.Add("Tab1", "Tab1", "");
settings.Tabs.Add("Tab2", "Tab2", "");
settings.Tabs.Add("Tab3", "Tab3", "");
})
.Render();
%>
View code (Razor):
@Html.DevExpress().TabControl(
settings =>
{
settings.Name = "tabControl";
settings.Width = 300;
settings.Height = 100;
settings.Tabs.Add("Tab1", "Tab1", "");
settings.Tabs.Add("Tab2", "Tab2", "");
settings.Tabs.Add("Tab3", "Tab3", "");
}).GetHtml()
Note
The Partial View should contain only the extension’s code.
The result of the code is demonstrated by the image below.