CODEWITHSUNDEEP
blazorblazor-server-side
ATL_DEV
ATL_DEV

Reputation: 9591

What's the recommended way of rendering a Blazor component dynamically?

I am new to Blazor with basic Angular and Vue.js experience. I would like to render a list of polymorphic components:

<ul>
    @foreach (fruit of fruits) 
         <li>HOW DO I RENDER FRUIT HERE??? </li> // render the fruit component
</ul>

@code {
   // Each member in the list is a subtype of Fruit
   var fruits = List<FruitComponent> {
       new PearComponent(),
       new AppleComponent()'
       new BananaComponent(),
       new RasberryComponent()
}

From what I've gleaned, there's a few ways to achieve this, each with their own disadvantages. An uncommon one suggests using an undocumented API call, which could become deprecated without notice, but it appears to be almost ideal. Another suggests emitting markup in the code which brings back the tedium of writing ASP.NET Server Controls. Finally, the most common suggests using conditional markup, while very simple, it couples the rendering code to the components it is rendering.

Most of the documentation I've read could be stale and no longer pertinent. With the official release of Blazor, what's the recommended way to achieve this?

Upvotes: 8

Views: 3924

Answers (3)

Rich_Rich
Rich_Rich

Reputation: 449

In .NET 6 there is a third way:

<ul>
    @foreach (fruitType in fruitTypes)
    { 
        <li>
            <DynamicComponent Type="fruitType" /> 
        </li>
    }
</ul>

@code {
   // Each member in the list is a subtype of Fruit
   var fruitTypes = List<Type> {
       typeof(PearComponent),
       typeof(AppleComponent),
       typeof(BananaComponent),
       typeof(RasberryComponent)
    };
}

You can even pass parameters to each component by using <DynamicComponent Type="typeof(Component)" Parameters="parameterDict" />, where parameterDict is of type Dictionary<string, object>.

More information about this can of course be found in the C# documentation.

Upvotes: 0

Charles Deluxe
Charles Deluxe

Reputation: 76

You have to create a RenderFragment, and use that as a renderer of your polymorphic component... I've used the default Blazor's template Counter component as a parent (CounterParent), and then the CounterChild inherits the CounterParent. I hope it helps!! Regards!

@page "/"

@foreach (CounterParent counter in components)
{
    RenderFragment renderFragment = (builder) => { builder.OpenComponent(0, counter.GetType()); builder.CloseComponent(); };
    <div>
        <div>Before the component</div>
        @renderFragment
        <div>Afterthe component</div>
    </div>
}

@code
{
    List<CounterParent> components = new List<CounterParent>() { new CounterParent(), new CounterChild() };
}

Upvotes: 6

Tom
Tom

Reputation: 326

You could use a switch statement that checks the types. You can place components in each of the cases, or render your li however you like.

<ul>
    @foreach (fruit in fruits)
    {
        switch(fruit)
        {
            case PearComponent p:
                <PearComponent ParameterOfSomeSort="p"></PearComponent>
                <li>Or render pears like this, if you want the li in it</li>
                break;
            case AppleComponent a:
                <AppleComponent></AppleComponent>
                break;
            case BananaComponent b:
                <BananaComponent></BananaComponent>
                break;
            case RaspberryComponent r:
                <RaspberryComponent></RaspberryComponent>
                break;
        }
    }
</ul>

Upvotes: 2

Related Questions