View Component

The View component is a container panel within a MultiView. Only one View is visible at a time, controlled by the parent MultiView's ActiveViewIndex property. It emulates ASP.NET Web Forms' <asp:View> control.

Web Forms → Blazor Comparison

<asp:MultiView ID="mv" runat="server"
    ActiveViewIndex="0">
    <asp:View ID="Step1" runat="server">
        <p>Step 1 content</p>
    </asp:View>
    <asp:View ID="Step2" runat="server">
        <p>Step 2 content</p>
    </asp:View>
    <asp:View ID="Step3" runat="server">
        <p>Step 3 content</p>
    </asp:View>
</asp:MultiView>

<MultiView ActiveViewIndex="@activeIndex">
    <View>
        <p>Step 1 content</p>
    </View>
    <View>
        <p>Step 2 content</p>
    </View>
    <View>
        <p>Step 3 content</p>
    </View>
</MultiView>

Basic View with ActiveViewIndex

Each View is a child of MultiView. The ActiveViewIndex (zero-based) determines which View is rendered. Only the active View's ChildContent is visible.

<MultiView ActiveViewIndex="@activeIndex">
    <View>
        <h4>View 1 — Introduction</h4>
        <button @onclick="() => activeIndex = 1">Next</button>
    </View>
    <View>
        <h4>View 2 — Details</h4>
        <button @onclick="() => activeIndex = 0">Previous</button>
        <button @onclick="() => activeIndex = 2">Next</button>
    </View>
    <View>
        <h4>View 3 — Complete</h4>
        <button @onclick="() => activeIndex = 0">Start Over</button>
    </View>
</MultiView>

@code {
    private int activeIndex = 0;
}

Wizard-Style Form

A practical scenario: use View components to build a multi-step wizard where each step collects different information.

<MultiView ActiveViewIndex="@wizardIndex">
    <View>
        <h5>Step 1: Personal Information</h5>
        <input @bind="wizardName" />
        <button @onclick="() => wizardIndex = 1">Next</button>
    </View>
    <View>
        <h5>Step 2: Preferences</h5>
        <button @onclick="() => wizardIndex = 0">Back</button>
        <button @onclick="() => wizardIndex = 2">Next</button>
    </View>
    <View>
        <h5>Step 3: Confirmation</h5>
        <p>Name: @wizardName</p>
        <button @onclick="() => wizardIndex = 1">Back</button>
        <button @onclick="ResetWizard">Submit</button>
    </View>
</MultiView>

OnActivate / OnDeactivate Events

Each View supports OnActivate and OnDeactivate event callbacks, fired when the view becomes active or inactive.

<MultiView ActiveViewIndex="@eventViewIndex">
    <View OnActivate="@(() => log = "Tab A activated")">
        Tab A content
    </View>
    <View OnActivate="@(() => log = "Tab B activated")">
        Tab B content
    </View>
</MultiView>

Key Parameters