Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Blazor Render Tree Builder Not Rendering ChildContent

$
0
0

I have tried to find a solution to this issue with no success.

I have created my own text control that wraps MudBlazor's MudText and MudLink controls for rendering text or links to create consistency when managing responsive flows.

Originally, I had a very complex nesting structure in my razor file, and my @ChildContent was rendering correctly. I wanted to simplify it, and use the RenderTree builder to build my control dynamically. When I did builder.AddContent(4,ChildContent), the control rendered, but none of the associated text in the child content came through.

Here's the relevant content in the code behind file:

[Parameter]public RenderFragment? ChildContent { get; set; }private RenderFragment RenderContent(Typo typo) => builder =>{    if (Align.HasValue && _isShowLink)    {        builder.OpenComponent<MudText>(0);        builder.AddAttribute(1, "Align", Align.Value);        builder.AddContent(2, RenderTextOrComponent(typo));        builder.CloseComponent();    }    else    {        builder.AddContent(1, RenderTextOrComponent(typo));    }};private RenderFragment RenderTextOrComponent(Typo typo) => builder =>{    var componentType = _isShowLink ? typeof(MudLink) : typeof(MudText);    builder.OpenComponent(0, componentType);    if (!string.IsNullOrWhiteSpace(Class))    {        builder.AddAttribute(1, "Class", Class);    }    if (_isShowLink)    {        builder.AddAttribute(2, "Href", Href);        builder.AddAttribute(3, "Typo", typo);    }    else    {        if (Align.HasValue)        {            builder.AddAttribute(2, "Align", Align);        }        builder.AddAttribute(3, "Typo", typo);    }    builder.AddContent(4, ChildContent);    builder.CloseComponent();};

From everything I've seen, this should be working. If I include @ChildContent on the razor page, it will render the text included in the child content appropriately.

What am I missing?

Edited to add original razor as requested. I was trying to avoid rewriting the controls several times, when only a couple parameters changed:

@if (IsVisible){    if (Align.HasValue)    {<MudHidden Breakpoint="@Breakpoint.SmAndDown">            @if (_isShowLink)            {<MudText Align="@Align.Value"><MudLink Class="@Class" Href="@Href" Typo="@Typo">@ChildContent</MudLink></MudText>            }            else            {<MudText Align="@Align.Value" Class="@Class" Typo="@Typo">@ChildContent</MudText>            }</MudHidden><MudHidden Breakpoint="@Breakpoint.MdAndUp">            @if (_isShowLink)            {<MudText Align="@Align.Value"><MudLink Class="@Class" Href="@Href" Typo="@_typoMobile">@ChildContent</MudLink></MudText>            }            else            {<MudText Align="@Align.Value" Class="@Class" Typo="@_typoMobile">@ChildContent</MudText>            }</MudHidden>    }    else    {<MudHidden Breakpoint="@Breakpoint.SmAndDown">            @if (_isShowLink)            {<MudLink Class="@Class" Href="@Href" Typo="@Typo">@ChildContent</MudLink>            }            else            {<MudText Class="@Class" Typo="@Typo">@ChildContent</MudText>            }</MudHidden><MudHidden Breakpoint="@Breakpoint.MdAndUp">            @if (_isShowLink)            {<MudLink Class="@Class" Href="@Href" Typo="@_typoMobile">@ChildContent</MudLink>            }            else            {<MudText Class="@Class" Typo="@_typoMobile">@ChildContent</MudText>            }</MudHidden>    }}

Here's the modified razor

@if (IsVisible){<MudHidden Breakpoint="@Breakpoint.SmAndDown">        @RenderContent(Typo)</MudHidden><MudHidden Breakpoint="@Breakpoint.MdAndUp">        @RenderContent(_typoMobile)</MudHidden>}

As mentioned previously, the controls are rendering properly when I view the source. They just aren't including the ChildContent. And when using @ChildContent in the razor page, it displays properly.


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>