如何在Blazor组件中向MarkupString内容传值替换占位符（无需JS）

完全可以通过Blazor原生能力实现该需求，全程不需要编写任何JavaScript代码。

实现思路 #

你之前直接传递原始模板字符串渲染的方式存在HTML被自动转义的隐患，正确的实现流程是先在C#运行时完成所有占位符的替换，再通过Blazor内置的MarkupString类型标记处理后的内容为可信HTML，交给组件渲染即可。

具体实现代码 #

1. 共享组件无需修改 #

原来的SharedEmailTemplate组件逻辑可以直接复用，不需要调整：

<div>
    @ChildContent
</div>

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

2. 父组件处理模板替换 #

在父组件中完成接口请求、占位符替换、HTML格式转换的全流程：

@page "/email-preview"
@inject HttpClient Http

<SharedEmailTemplate>
    @_processedTemplate
</SharedEmailTemplate>

@code {
    private MarkupString _processedTemplate;

    protected override async Task OnInitializedAsync()
    {
        // 调用WebApi获取原始HTML模板
        string rawTemplate = await Http.GetStringAsync("your-template-api-endpoint");

        // 实际业务动态值，可来自接口、表单、全局状态等任意来源
        var dynamicData = new 
        {
            message = "这是需要动态插入的消息内容",
            userName = "张三",
            expireDate = DateTime.Now.AddDays(7).ToString("yyyy年MM月dd日")
        };

        // 替换所有占位符
        string templateWithContent = ReplaceTemplatePlaceholders(rawTemplate, dynamicData);

        // 转换为Blazor可直接渲染的HTML格式，避免标签被转义
        _processedTemplate = new MarkupString(templateWithContent);
    }

    // 占位符替换辅助方法
    private string ReplaceTemplatePlaceholders(string rawTemplate, object dataSource)
    {
        foreach (var prop in dataSource.GetType().GetProperties())
        {
            // 匹配{{ 属性名 }}格式的占位符
            string placeholder = $"{{{{ {prop.Name} }}}}";
            string propValue = prop.GetValue(dataSource)?.ToString() ?? string.Empty;
            
            // 如果动态值来自不可信的用户输入，取消下一行注释做HTML编码，防范XSS风险
            // propValue = System.Net.WebUtility.HtmlEncode(propValue);
            
            rawTemplate = rawTemplate.Replace(placeholder, propValue);
        }
        return rawTemplate;
    }
}

注意事项 #

• MarkupString会直接将内容作为原始HTML渲染，不会做安全过滤，如果替换的动态内容来自用户输入等不可信来源，一定要先对内容做HTML编码，避免XSS攻击。
• 如果模板规则更复杂（比如条件渲染、循环渲染），可以基于上述逻辑扩展正则匹配规则，或者引入轻量的.NET模板引擎在C#层完成模板渲染，依然不需要JavaScript参与。

内容的提问来源于stack exchange，提问作者TheRobertos