Blazor Razor组件中如何将C#模型列表转为JavaScript数组？

问题背景 #

在Asp.net Core Razor Pages或MVC中，我们可以通过@Html.Raw(Json.Serialize(dataArray))将C#模型列表直接转为JS数组，但Blazor没有Html.Raw方法，直接使用System.Text.Json.JsonSerializer.Serialize输出JSON时会出现转义错误（报错：Uncaught SyntaxError: invalid escape sequence），手动替换转义字符也无法解决问题。

错误原因 #

直接在Razor脚本块中使用@JsonSerializer.Serialize(...)时，Blazor会自动对JSON中的双引号进行转义（转为\"），导致JS解析时识别到无效的转义序列，进而报错。

正确解决方案 #

方法一：使用IJSRuntime传递数据（官方推荐）

这是Blazor中C#与JS交互的标准方式，无需手动处理序列化，Blazor会自动完成转换：

1. C#组件代码：

@inject IJSRuntime JSRuntime

@code {
    // 示例模型列表
    private List<BarChartStringDecimalModel> BarChartStringDecimalModels = new()
    {
        new BarChartStringDecimalModel { Name = "示例1", Value = 100 },
        new BarChartStringDecimalModel { Name = "示例2", Value = 200 }
    };

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 调用JS方法并传递C#列表
            await JSRuntime.InvokeVoidAsync("handleChartData", BarChartStringDecimalModels);
        }
    }
}

2. JavaScript代码（放在wwwroot/js目录下的脚本文件中，比如site.js）：

function handleChartData(data) {
    // data已自动转为JavaScript数组，可直接使用
    console.log("接收的模型列表：", data);
    // 执行后续业务逻辑，比如渲染图表
}

方法二：使用MarkupString避免转义（仅适用于可信数据）

如果需要在Razor组件的内联脚本中直接输出数据，可以使用MarkupString来阻止Blazor对JSON进行转义（注意：仅当数据是可信的，不会包含恶意脚本时使用，避免XSS风险）：

@code {
    private List<BarChartStringDecimalModel> BarChartStringDecimalModels = new()
    {
        new BarChartStringDecimalModel { Name = "示例1", Value = 100 },
        new BarChartStringDecimalModel { Name = "示例2", Value = 200 }
    };

    // 将序列化后的JSON转为MarkupString，避免转义
    private MarkupString SerializedData => 
        new MarkupString(System.Text.Json.JsonSerializer.Serialize(BarChartStringDecimalModels));
}

<script>
    // 直接使用MarkupString输出的JSON，无需JSON.parse
    const data = @SerializedData;
    console.log("模型列表：", data);
</script>

注意事项 #

• 优先使用IJSRuntime的方式，符合Blazor的设计规范，同时避免XSS风险。
• 使用MarkupString时，必须确保数据是安全可信的，不要直接使用用户输入的内容，防止跨站脚本攻击。

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