Blazor - Save result of razor component to a string

[mrlife]

Is your feature request related to a problem? Please describe.

Sometimes I have to pass HTML to JavaScript to use it in a JavaScript-enhanced element (Bootstrap "plugin"). It would be useful to be able to reuse an existing razor component by saving the output it would render to a string and passing it on to JavaScript.

Describe the solution you'd like

Given a component MyComponent.razor:

<h1>@Title</h1>
<p>@Description</p>

code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public string Description { get; set; }
}

Save its output to a string and use like:

<div class="my-plugin" data-content="@myComponentOutput"></div>

code {
    private string myComponentOutput;
    private MyComponent myComponent;

    protected override void OnInitialized()
    {
        myComponentOutput = myComponent.GetOutput(Title: "Hello", Description: "Just saying hello");
    }
}

[javiercn]

@mrlife thanks for contacting us.

We don't think this is a direction we plan to take since this greatly interferes with the way Blazor renders and there are alternative ways of achieving this.

To give some clarity, it is unlikely that we will ever add something to the framework that lets you render a component reference directly, since that will dramatically interfere with the way the framework works.

Blazor controls the component lifecycle and that's not something we'll likely change, since it is critical to some of the guarantees the framework offers.

You can probably do this yourself today if you want to through JavaScript by rendering the component, grabbing a reference to it, and getting the inner html through javascript to set on the attribute.

As an alternative you might be able to leverage something like a template element to achieve a similar result using just HTML and DOM APIs.

[mrlife]

Thank you! The template element is not something I've heard of before and sounds promising for this.