How to render manually a component in Blazor?

Question

I am trying to render manually a set of components in Blazor Web Assembly, however I am having trouble with Attributes and ChildContent.

Here's how I render manually a component:

private RenderFragment CreateComponent(List<cMenuItem> menuItems) => builder =>
        {
            try
            {
                builder.OpenComponent(0, typeof(CoreEmpty));
                builder.AddAttribute(1, "ChildContent", (RenderFragment)((builder2) => {
                    for (var i = 0; i < menuItems.Count; i++)
                    {
                        builder2.OpenComponent(Increment++, typeof(CoreMenuItem));
                        builder2.AddAttribute(Increment++, "Text", menuItems[i].mText);
                        if (menuItems[i].mItems.Count > 0) CreateComponent(menuItems[i].mItems);
                        builder2.CloseComponent();
                    }
                }));
                builder.CloseComponent();
                builder.CloseElement();
            }
            catch(Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
        };

But I render it when I initialize the main component:

protected override void OnInitialized()
        {
            base.OnInitialized();

            // Set the only menu if there is only one
            if (Data != null )
                if(Data.Count == 1)
                {
                    Menu1 = Data[0];
                    CustomRender = CreateComponent(Menu1.mMenu);
                }
        }

Here's my Razor page:

@inherits cCoreMenu

@if(Data.Count > 1)
{
    @foreach(cMenu menu in Data)
    {
        
    }

}else if(Data.Count  == 1)
{
    <RadzenMenu Click="@Menu1.OnClickMenu">
        @CustomRender
    </RadzenMenu>
}

CoreEmpty is just a dummy component because I need a component to generate a ChildContent attribute.

It gives me the following errors:

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Stack empty.
System.InvalidOperationException: Stack empty.
   at System.Collections.Generic.Stack`1[[System.Int32, System.Private.CoreLib, Version=7.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].ThrowForEmptyStack()
   at System.Collections.Generic.Stack`1[[System.Int32, System.Private.CoreLib, Version=7.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].Pop()
   at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.CloseRegion()
   at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)
   at Microsoft.AspNetCore.Components.CascadingValue`1[[Radzen.Blazor.RadzenMenu, Radzen.Blazor, Version=4.7.4.0, Culture=neutral, PublicKeyToken=null]].Render(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)

What is this Stack empty error? How can I solve it?

@HH Doesn't replacing `Increment++` withfixed numbers ruins the sequence? — Inês Borges, Mar 03 '23 at 17:43
No, these sequnece numbers [should follow line numbers](https://learn.microsoft.com/en-us/aspnet/core/blazor/advanced-scenarios?view=aspnetcore-7.0#sequence-numbers-relate-to-code-line-numbers-and-not-execution-order). Read the section above that for a better example. — H H, Mar 03 '23 at 18:39

score 1 · Accepted Answer · answered Mar 03 '23 at 15:14

1

A Stack empty error in a Pop() can only come from one of the Close() methods.

You never Open an Element so the solution is

// builder.CloseElement();

answered Mar 03 '23 at 15:14

H H

263,252
30
330
514

That was the problem. Thank you! I copied it from Microsoft docs. Didn't even noticed it was there... Do I need a `CoreEmpty` component to render a `ChildContent` first? – Inês Borges Mar 03 '23 at 17:48
No, this is a RenderFragment, not a Component. – H H Mar 03 '23 at 18:36

How to render manually a component in Blazor?

1 Answers1