Im curently rewriting old WebForms app to Blazor InteractiveServerApp (.NET 9). This app is reading and processing static template ".htm" files, that contains partial HTML markups and custom "internal" markups. For example how that file can look like:

MyCustomTemplate.htm

<table>
  <tr>
    <td>
      [MySpecialTagToBeTranslated]
    </td>
   </tr>
</table>

The idea is to give customers (implementation partners) ability to change the frontend freely as they need. The custom markup is then used to hide the complex code and binding logic behind "simpler" tag.

So, after processing that template, I have something like this:

ProcessingControl.razor

@((MarkupString)"<table><tr><td>")

@RenderProcessedControl (translates to "<label>My processed content</label>")

@((MarkupString)"</td></tr></table>")

@code {
// RenderFragment to build the controls
private RenderFragment RenderProcessedControl() => builder =>
{
    builder.OpenComponent<MySpecialTagToBeTranslated>(0);
    builder.CloseComponent();
    ... etc
};
}

The idea in this example is to have "My processed content" from component inside "" tag. But the final result in browser is:

<table><tr><td>

</td></tr></table>

<label>My processed content</label>

Is there a solution that I can apply to make this work? Thank you.

Im curently rewriting old WebForms app to Blazor InteractiveServerApp (.NET 9). This app is reading and processing static template ".htm" files, that contains partial HTML markups and custom "internal" markups. For example how that file can look like:

MyCustomTemplate.htm

<table>
  <tr>
    <td>
      [MySpecialTagToBeTranslated]
    </td>
   </tr>
</table>

The idea is to give customers (implementation partners) ability to change the frontend freely as they need. The custom markup is then used to hide the complex code and binding logic behind "simpler" tag.

So, after processing that template, I have something like this:

ProcessingControl.razor

@((MarkupString)"<table><tr><td>")

@RenderProcessedControl (translates to "<label>My processed content</label>")

@((MarkupString)"</td></tr></table>")

@code {
// RenderFragment to build the controls
private RenderFragment RenderProcessedControl() => builder =>
{
    builder.OpenComponent<MySpecialTagToBeTranslated>(0);
    builder.CloseComponent();
    ... etc
};
}

The idea in this example is to have "My processed content" from component inside "" tag. But the final result in browser is:

<table><tr><td>

</td></tr></table>

<label>My processed content</label>

Is there a solution that I can apply to make this work? Thank you.

• c#
• asp
• asp-core
• blazor

1 Answer 1

I've tested this by reducing your code to this MRE:

@page "/"

<PageTitle>Home</PageTitle>

@RenderWholeControl

@code {
    private RenderFragment RenderWholeControl => mybuilder =>
    {
        mybuilder.AddMarkupContent(0, """<div class="alert alert-primary">""");
        mybuilder.OpenElement(1, "h2");
        mybuilder.AddContent(2, "Hello Blazor");
        mybuilder.CloseElement();
        mybuilder.AddMarkupContent(3, "</div>");
    };
}

With the result:

It's appears to be specific to using "MarkupString". I think the Renderer is getting confused about which RenderFrame it's updating.

This needs reporting on to the AspNetCore Github repo to see what the team think of it.

How to get round it? I'm not sure as you haven't provided enough context. Build the markup using elements with the RenderTreeBuilder?