How to insert text content into a FluentNavLink component in BuildRenderTree()

[Pascall60]

Hello,
I am trying to implement a menu component dynamically with BuildRenderTree() in a wasm dll (.Net 9).
For the menu with FluentNavMenu I have no problem.
But with FluentNavLink I can't insert text content?

Here are the different ways I have tried:

    //<FluentNavLink Icon = "@(new Icons.Regular.Size24.Home())" Tooltip = "Home Page"  Home />

    // --- Add FluentNavLink ---
    builder.OpenComponent<FluentNavLink> (idx++); // FluentNavLink
    builder.AddAttribute(idx++, "Icon", new Icons.Regular.Size24.Home());
    builder.AddAttribute(idx++, "Tooltip", "Home Page");
    // ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
    builder.AddContent(idx++, "Home");

    //builder.AddAttribute(idx++, "ChildContent", (RenderFragment)((builder2) => { builder2.AddContent(idx++, "Home"); }));
    //builder.AddAttribute(idx++, "ChildContent", (RenderFragment)((builder2) => { builder2.AddContent(0, "Home");}));
    //builder.AddAttribute(idx++, "ChildContent", (RenderFragment)((builder2) => {
    //    builder2.OpenElement(0, "span");
    //    builder2.AddContent(1, "Home");
    //    builder2.CloseElement();
    //}));
    // ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

    // --- Close FluentNavLink ---
    builder.CloseComponent(); // /FluentNavLink

I always get the following error: Unhandled exception rendering component: Error: No element is currently associated with component.

I am trying to find out if I am making an implementation error or if there is a subtlety that I do not understand.

If you could give me a (complete) example of a BuildRenderTree() with all possible attributes.
For FluentNavMenu, FluentNavLink, FluentNavGroup.

• Is it possible to put an href on FluentNavGroup ?

Thank you very much for your help and suggestions!

Last request: In the online documentation for each component there is the associated Razor code. Would it be possible (eventually) to have the C# code precisely with BuildRenderTree() ?

Thanks again.
I have attached my UXMenuUXMenu.txt
file.
regards.
Pascal

[vnbaaij]

Hi,

Converting this to a discussion item as it is not really an issue

[vnbaaij]

First, do NOT generating sequence numbers programmatically. See https://learn.microsoft.com/en-us/aspnet/core/blazor/advanced-scenarios?view=aspnetcore-9.0#the-problem-with-generating-sequence-numbers-programmatically

If you could give me a (complete) example of a BuildRenderTree() with all possible attributes.
For FluentNavMenu, FluentNavLink, FluentNavGroup.

We don't have that code. We do not use BuildRenderTree() for that ourselves

I think the error has to do with the fact that we use a CascadingParameter called Owner to connect the menu link to the menu. Also, we use a RenderContent method (see the source code for the component) to eventually render the ChildContent. Not sure if that interferes with your code.

Is it possible to put an href on FluentNavGroup ?

It is right there in the docs:

Last request: In the online documentation for each component there is the associated Razor code. Would it be possible (eventually) to have the C# code precisely with BuildRenderTree() ?

We do not use BuildRenderTree a lot in our components ourselves. As it is an advanced scenario, we don't think a lot of developers are using it in combination with our components. We currently have no plans to include such code in our docs.

[Pascall60]

Thanks Vincent for all this information.
For FluentNavGroup, I didn't think to look at FluentNavBase!

For my problem with FluentNavLink:
I consulted the page: The problem with generating sequence numbers programmatically.
In my code I don't have a condition but it's true that I use an index. I increment this index sequentially, always increasing it.
I modified my code to put sequence numbers without index:
0 and 1, for the div 10 to 14 for the FluentNavMenu and finally 20 to 23 for the FluentNavLink.

Unfortunately I still have this error?!

blazor.web.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Error: No element is currently associated with component 6
Error: No element is currently associated with component 6

Since the beginning it's always with component 6?
How can I find out what this component 6 is?
Thanks again, Sincerely.
Pascal

[Pascall60]

It's me again
If I only put the DIV and the FluentNavMenu without adding a FluentNavLink my page is displayed normally and I don't have any exceptions.
It's really when I add a FluentNavLink, that the famous exception appears?

[hml-coder]

maybe this will work.

@code {
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenComponent<FluentNavLink>(0);  // Open component
        builder.AddAttribute(1, "Icon", new Icons.Regular.Size24.Home());  // Set icon
        builder.AddAttribute(2, "Tooltip", "Home Page");  // Set tooltip
        builder.AddAttribute(3, "Href", "/");  // Set href
        builder.AddContent(4, "Home");  // Add content
        builder.CloseComponent();  // Close component
    }
}

[Pascall60]

Thanks Roland for your answer

Your code and mine were the same, except for my index!

I (as I explained to Vincent) used fixed numbers instead of my index.

Unfortunately I still have this error?!

blazor.web.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Error: No element is currently associated with component 6
Error: No element is currently associated with component 6

Since the beginning it's always with component 6?
Do you have any idea how to find, what is this component 6?
Thanks again, Sincerely.
Pascal

PS: Can I send you a lite version (that I have to extract) of my code? And how in private mode?
I am a poor French (who uses Google Translate) and beginner with GitHub ;(

[Pascall60]

It's me again
If I only put the DIV and the FluentNavMenu without adding a FluentNavLink my page is displayed normally and I don't have any exceptions.
It's really when I add a FluentNavLink, that the famous exception appears?