Set and display Blazor view component from class property

Question

I am trying to render different pages based on a class property in blazor with only 1 tagg.

In WPF i was able to create multiple views and specify in the prop of an object which view to render with the UserControl class.

WPF Datacontext:

public UserControl DetailView { get; set; }

WPF parentView:

<UserControl Content="{Binding DetailView}"></UserControl>

This way i was able to dynamicly render diffrent pages based on the property.

I am trying to achieve the same thing in Blazor. I don't want to use a bunch of If elses in my blazorView

Answer 1

I think DynamicComponent is what you are looking for.

Documentation:

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/dynamiccomponent?view=aspnetcore-6.0

Example of using a select element to dynamically choose which component should be rendered:

<select @bind="selectedComponentIndex">
    @for (var i = 0; i < componentTypes.Count; i++)
    {
        <option value="@i">@componentTypes[i].Name</option>
    }
</select>

<DynamicComponent Type="componentTypes[selectedComponentIndex]" />

@code {
    private int selectedComponentIndex = 0;

    private List<Type> componentTypes = new List<Type>
    {
        typeof(Component1),
        typeof(Component2),
        typeof(Component3),
    };
}