Blazor RenderFragment to String

[sps014]

I have Blazor Component as

<pre class="language-html">
    <code class="language-html">@ChildContent</code>
</pre>

@code
{
    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

now i am using component as

<CodeBlock>
        <StepContent>
            <StepTitle>Shipping</StepTitle>
            <StepDescription>Choose your shipping options</StepDescription>
        </StepContent>
</CodeBlock>

I want to show RenderFragment as String, not as evaluated Dom Element.

Actual Output

Expected Output

My different Approach

If the component was designed to take string

    <CodeBlock Code="@str"/>

public string str = @"
        <StepContent>
            <StepTitle>Shipping</StepTitle>
            <StepDescription>Choose your shipping options</StepDescription>
        </StepContent>";

Use string as Parameter but with this there come many problems like escaping ", Visually Ugly looking Component Code, etc. Overall Complexity is increased.

I am hoping for a way to convert RenderFragment to string as current implementation gives evaluated Component.

Thank you.

[javiercn]

@sps014 thanks for contacting us.

There is no way to do this today within Blazor. We have support for this in the form of prerendering, but not anywhere else. It is unlikely we add something like this, since we haven't receive similar asks for it yet.

[mrpmorris]

In your component have a

<div style="display: none" @ref=MyContentRef`>@ChildContent</div>

In OnAfterRenderAsync you can call some JavaScript to get the innerHtml of MyContentRef and then display that string in your <code>.

[sps014]

In your component have a

<div style="display: none" @ref=MyContentRef`>@ChildContent</div>

In OnAfterRenderAsync you can call some JavaScript to get the innerHtml of MyContentRef and then display that string in your <code>.

That worked ... Thanks..

[sps014]

@javiercn any plan to override ToString Method of RenderFragment in Future?

[javiercn]

@sps014 no. RenderFragment is also a delegate type, so I don't think that's even possible.

[sps014]

Oops didn't know that.. i am closing this issue for now as i have other workarounds to deal with the current problem.

[benm-eras]

For what it's worth I would like to be able to access the the content of a tag/component as a string rather than a render fragment. In my case I am trying to make a component that simply passes markdown content to HTML. My desired Markdown.razor component:

<div class="some-container">
    @Html
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    public string Html => Markdig.Markdown.ToHtml(this.ChildContent.ToString());
}

How I would use it:

<div class="foo">
    <Markdown>
        ## A Header of some description

       Paragraph 1

       Paragraph 2
    </Markdown>
</div>

Passing that as a parameter just feels dirty and I think I would prefer to just write the HTML at that point.