在Blazor应用中如何将DataTable转HTML方法返回的字符串渲染为生效HTML

在Blazor中默认会对所有输出的字符串做HTML转义处理，避免XSS安全问题，所以你直接输出ConvertDataTableToHtml方法返回的字符串时，只会看到原始的HTML标签文本，不会被解析成真实的表格元素。你只需要将返回的字符串转换为MarkupString类型，就可以让Blazor正常解析渲染HTML内容。

具体使用示例 #

1. 直接在Razor模板中转换

@page "/table-demo"
@using System.Data
@* 这里替换为你静态方法所在的命名空间 *@
@using YourNamespace.Utils

@{
    // 构造测试用DataTable
    DataTable demoDt = new DataTable();
    demoDt.Columns.Add("序号");
    demoDt.Columns.Add("商品名称");
    demoDt.Columns.Add("价格");
    demoDt.Rows.Add("1", "笔记本电脑", "5999");
    demoDt.Rows.Add("2", "无线耳机", "799");

    // 调用你的转换方法得到HTML字符串
    string htmlStr = ConvertDataTableToHtml(demoDt);
}

<!-- 转换为MarkupString后输出即可正常渲染表格 -->
<div class="table-container">
    @((MarkupString)htmlStr)
</div>

2. 在后端代码中提前转换

你也可以在C#代码里直接将结果封装为MarkupString再传递到前端渲染：

// 改造后的方法可选，也可以直接在调用处转换
public static MarkupString ConvertDataTableToHtmlMarkup(DataTable dt)
{
    string html = "<table>";
    //add header row
    html += "<tr>";
    for (int i = 0; i < dt.Columns.Count; i++)
        html += "<td>" + dt.Columns[i].ColumnName + "</td>";
    html += "</tr>";
    //add rows
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        html += "<tr>";
        for (int j = 0; j < dt.Columns.Count; j++)
            html += "<td>" + dt.Rows[i][j].ToString() + "</td>";
        html += "</tr>";
    }
    html += "</table>";
    return (MarkupString)html;
}

注意事项 #

• 只有当你确定生成的HTML内容是完全可信的情况下再用MarkupString渲染，如果DataTable中包含用户提交的未经过滤的内容，直接渲染会有XSS注入风险，建议先对单元格内容做HTML特殊字符转义处理。
• 你现有代码中表头用的是<td>标签，如果需要语义化更好的效果，可以将表头的标签替换为<th>，也可以根据需要给表格、行列添加自定义class属性来匹配项目的样式。

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