How to render HTML content in Blazor Dialog with markupstring?

When developing with Blazor Dialog with markupstring , you may encounter a scenario where you need to render HTML content dynamically within components such as Dialog. This article will guide you through the process of displaying HTML markup from a string property inside the Dialog component.

Using MarkupString to Render HTML

Blazor treats dynamic content bound from a string property as plain text by default. To instruct Blazor to render this content as HTML markup, you should use the MarkupString class.

Here’s an example of how to implement this in your code:

<SfDialog style="margin-top:100px">
    <DialogTemplates>
        <Content>
            @((MarkupString)MyHtmlContent)
        </Content>
    </DialogTemplates>
</SfDialog>

@code {
    string MyHtmlContent { get; set; } = "<span style='background-color:red'>HELLO</span>";
}

By casting MyHtmlContent to MarkupString, you are directing Blazor to treat the content as HTML markup. This will result in the “HELLO” text being displayed with a red background inside the dialog.

Sample

You can see a working example by visiting the following sample link:

• Sample on Blazor Playground

Conclusion

I hope you enjoyed learning about how to render HTML content in Blazor Dialog with markupstring.

You can refer to our Blazor Dialog feature tour page to know about its other ground breaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Dialog example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forum,Direct-Trac, or feedback portal. We are always happy to assist you!