(Suggestion) Blazor: RenderFragment target String

[LukeTOBrien]

Hello,

I would like to return a RendeFragment as a string, I understand this is not currently possible but I would like to suggest the idea for future consideration.
This issue is the same as #22266 and #9493

Use case

In my case I am creating a wrapper component around a WebComponent I have, in my WebComponent I have a itemTemplate function that returns a Promise<string>:

itemTemplate: (obj: any) => Promise<string>;

Inside the OnAfterRenderAsync method, I then call the JavaScript function to set the itemTemplate:

setItemTemplate = (id: string, dotNet: DotNet.DotNetObject) => {
        let el = document.getElementById(id);
        if (el) {
            el.itemTemplate = (obj) => {
                return dotNet.invokeMethodAsync<string>('OnItemTemplate', obj);
            }
        }
    }

Finally in the Blazor component I return the RenderFragment as a string: ( I have found a hacky workaround)

[JSInvokable]
        public async Task<string> OnItemTemplate(T obj)
        {
            var fragment = ItemTemplate(obj);
            var builder = new RenderTreeBuilder();
            fragment(builder);
            var els = builder.GetFrames().Array.Where(x => !string.IsNullOrWhiteSpace(x.MarkupContent));
            var html = string.Join("", els.Select(x => x.FrameType == RenderTreeFrameType.Element ? $"<{x.MarkupContent}>" : x.MarkupContent));
            return html;
        }

Possible solution

The fragment renders to a RenderTreeBuilder , would it be be possible to abstract the TreeBuilder into an interface?

[JSInvokable]
        public async Task<string> OnItemTemplate(T obj)
        {
            var fragment = ItemTemplate(obj);
            var target = new StringRenderer();
            fragment(target);
            return target.GetString();
        }

What are your thoughts on this?

[TanayParikh]

Note; may be related to #17200.

[javiercn]

@LukeTOBrien thanks for contacting us.

This is not something we support.

There are technical reasons for it, like the fact that we don't know the instantiation of the type parameter T when you invoke it through JavaScript and even if we knew, we can't allow unbounded generic instantiations as that would lead to a type explosion.

One path forward that might work is to use a JS root component to represent the template for the item, in that case, inside your content you can render a JS root component and that should allow you to pass in an argument (you would need to specify a concrete type)

[ghost]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.