如何在Razor组件中渲染HTM文件？

直接用MarkupString替代HtmlString即可实现HTML内容的渲染，以下是优化后的代码：

服务器端Blazor/Blazor Server方案 #

<div>
    @((MarkupString)content)
</div>

@code {
    private string fileName = "wwwroot/HelpDocs/691_New Booking.htm";
    private string content = string.Empty;

    protected override void OnInitialized()
    {
        // 先检查文件是否存在，避免报错
        if (File.Exists(fileName))
        {
            content = File.ReadAllText(fileName);
        }
        else
        {
            content = "<p>帮助文档未找到</p>";
        }
    }
}

Blazor WebAssembly方案 #

如果是WASM项目，不能直接读取本地文件，需通过HTTP请求获取wwwroot下的资源：

@inject HttpClient Http

<div>
    @((MarkupString)content)
</div>

@code {
    private string content = string.Empty;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            // 路径不需要带wwwroot，直接从根目录开始
            content = await Http.GetStringAsync("HelpDocs/691_New Booking.htm");
        }
        catch
        {
            content = "<p>帮助文档加载失败</p>";
        }
    }
}

关键说明 #

• MarkupString是Blazor专门用于渲染未编码HTML的类型，会直接解析字符串中的HTML标签，而非显示源码。
• 路径统一使用正斜杠，或用Path.Combine构建跨平台兼容路径，避免混合斜杠导致的文件找不到问题。

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