TabControl

in namespace DotVVM.BusinessPack.Controls

Renders a collection of tabs with specific contents.

Usage & Scenarios

Renders a container with tabs that are defined in the markup, or generated from a collection in the viewmodel.

Sample 1: Basic Usage

The tabs can be defined inside the <bp:TabControl> individually. Each tab can have a different content in this case.

Alternatively, the tabs can be generated using the DataSource property bound to a collection in the viewmodel. In this case, the TabHeaderTemplate and TabContentTemplate properties are used to specify the header and content of the tabs.

If the tab header contains only a text value, you can use the HeaderText property instead of the HeaderTemplate.

<%-- Hardcoded tabs --%>
<bp:TabControl>
    <bp:TabItem HeaderText="Tab 1">
        <ContentTemplate>
            <p>Tab 1 description</p>
        </ContentTemplate>
    </bp:TabItem>
    <bp:TabItem>
        <HeaderTemplate>
            <i>Tab 2</i>
        </HeaderTemplate>
        <ContentTemplate>
            <p>Tab 2 description</p>
        </ContentTemplate>
    </bp:TabItem>
</bp:TabControl>

<%-- Templated tabs --%>
<bp:TabControl DataSource="{value: Countries}"
               TabIsActiveBinding="{value: IsSelected}"
               TabKeyBinding="{value: Id}">
    <TabHeaderTemplate>
        {{value: Name}}
    </TabHeaderTemplate>
    <TabContentTemplate>
        <ul>
            <dot:Repeater DataSource="{value: Cities}">
                <ItemTemplate>
                    <li>{{value: _this}}</li>
                </ItemTemplate>
            </dot:Repeater>
        </ul>
    </TabContentTemplate>
</bp:TabControl>

using System.Collections.Generic;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public List<Country> Countries { get; set; } = new List<Country> {
            new Country { Id = 1, Name = "Czech Republic", Cities = new List<string> { "Praha", "Brno" } },
            new Country { Id = 2, Name = "Slovakia", Cities = new List<string> { "Bratislava", "Košice" } },
            new Country { Id = 3, Name = "United States", Cities = new List<string> { "Washington", "New York" } }
        };
    }
}

using System.Collections.Generic;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample1
{
    public class Country
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<string> Cities { get; set; } = new List<string>();
        public bool IsSelected { get; set; }
    }
}

Sample 2: Tab Key

The ActiveTabKey property specifies a key of the tab which is currently selected. The key of a tab is automatically generated by default. But you can override it by setting the Key property. The data-binding works in both ways, so it is possible to switch the tabs by changing the viewmodel property bound to ActiveTabKey.

The ActiveTabChanged event specifies a command in the viewmodel which is triggered when the user switches the tab.

page.dothtml
ViewModel.cs

<bp:TabControl ActiveTabKey="{value: ActiveTabKey}"
               ActiveTabChanged="{command: TabChanged()}">
    <bp:TabItem HeaderText="Tab 1">
        <ContentTemplate>
            <p>Tab 1 description</p>
            <bp:Button Text="Go to Tab 2"
                       Click="{command: ActiveTabKey = "Other"}" />
        </ContentTemplate>
    </bp:TabItem>
    <bp:TabItem Key="Other" HeaderText="Tab 2">
        <ContentTemplate>
            <p>Tab 2 description</p>
            <bp:Button Text="Go to Tab 1"
                       Click="{command: ActiveTabKey = "Tab 1"}" />
        </ContentTemplate>
    </bp:TabItem>
</bp:TabControl>

<p>Active tab has changed {{value: ChangeCount}} times.</p>

using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample2
{
    public class ViewModel : DotvvmViewModelBase
    {
        public int ChangeCount { get; set; }

        public string ActiveTabKey { get; set; } = "Other";

        public void TabChanged()
        {
            ChangeCount++;
        }
    }
}

Sample 3: Alternative Tab Switching

If you don't want to use the ActiveTabKey property to identify the tab which is selected, there is an alternative way.

In the data-bound tabs mode, you can use the TabIsActiveBinding property. This property is bound to a bool property in each of the DataSource collection items, and it will keep track of whether the tab is selected or not.

<bp:TabControl DataSource="{value: Countries}"
               TabIsActiveBinding="{value: IsSelected}"
               TabHeaderTextBinding="{value: Name}"
               TabKeyBinding="{value: Id}">
    <TabContentTemplate>
        <ul>
            <dot:Repeater DataSource="{value: Cities}">
                <ItemTemplate>
                    <li>{{value: _this}}</li>
                </ItemTemplate>
            </dot:Repeater>
        </ul>
    </TabContentTemplate>
</bp:TabControl>

<br />

<dot:Repeater DataSource="{value: Countries}">
    <ItemTemplate>
        {{value: Name}} Tab {{value: IsSelected ? "is" : "is not"}} selected.
        <br />
    </ItemTemplate>
</dot:Repeater>

using System.Collections.Generic;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {
        public List<Country> Countries { get; set; } = new List<Country> {
            new Country { Id = 1, Name = "Czech Republic", Cities = new List<string> { "Praha", "Brno" } },
            new Country { Id = 2, Name = "Slovakia", Cities = new List<string> { "Bratislava", "Košice" } }
        };
    }
}

using System.Collections.Generic;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample3
{
    public class Country
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<string> Cities { get; set; } = new List<string>();
        public bool IsEnabled { get; set; } = true;
        public bool IsSelected { get; set; }
    }
}

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
ActiveTabKey	Object	Gets or sets the key of a tab that is currently active.	attribute inner element static value bindable default	null
ClientIDMode	ClientIDMode	Gets or sets the client ID generation algorithm.	attribute inner element static value bindable default	Static
DataContext	Object	Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. The DataContext is null in client-side templates.	attribute inner element static value bindable default	null
DataSource	IEnumerable	Gets or sets the data source containing data for this control.	attribute inner element static value bindable default	null
ID	String	Gets or sets the control client ID within its naming container.	attribute inner element static value bindable default	null
IncludeInPage	Boolean	Gets or sets whether the control is included in the DOM of the page.	attribute inner element static value bindable default	True
InnerText	String	Gets or sets the inner text of the HTML element. Note that this property can only be used on HtmlGenericControl directly and when the control does not have any children.	attribute inner element static value bindable default	null
TabContentTemplate	ITemplate	Gets or sets the template rendering contents of tabs. This property is used when tabs are loaded from the DataSource property.	attribute inner element static value bindable default	null
TabEnabledBinding	IValueBinding<Boolean?>	Gets or sets the binding which retrieves whether a tab from DataSource is enabled and can be activated.	attribute inner element static value bindable default	null
TabHeaderTemplate	ITemplate	Gets or sets the template for headers of tabs. This property is used when tabs are loaded from the DataSource property.	attribute inner element static value bindable default	null
TabHeaderTextBinding	IValueBinding<String>	Gets or sets the binding which retrieves the text of the header a tab from DataSource.	attribute inner element static value bindable default	null
TabIsActiveBinding	IValueBinding<Boolean?>	Gets or sets the binding which determines whether a tab from DataSource is active or not. Only one tab can be active at the same time.	attribute inner element static value bindable default	null
TabKeyBinding	IValueBinding	Gets or sets the binding which retrieves the unique key of a tab from DataSource.	attribute inner element static value bindable default	null
Tabs	List<TabItem>	Gets or sets a collection of tabs rendered inside.	attribute inner element static value bindable default	null
TabVisibleBinding	IValueBinding<Boolean?>	Gets or sets the binding which retrieves whether a tab from DataSource is visible.	attribute inner element static value bindable default	null
Visible	Boolean	Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control.	attribute inner element static value bindable default	True

Events

	Name	Type	Description
	ActiveTabChanged	Command	Gets or sets the command triggered when the active tab is changed.

Edit on Github