在ASP.NET Core 7 Razor组件中将C#字符串数组转为JS数组

在ASP.NET Core 7的Blazor组件中，Html.Raw是传统Razor Pages/MVC的专属API，Blazor组件体系并不支持这个方法，你可以通过以下两种方式实现转换：

方法一：提前定义MarkupString变量 #

在组件的@code块中，先将C#数组序列化为JSON字符串，再转为MarkupString类型（该类型会让Blazor直接输出内容，不做HTML转义）：

@code {
    [Parameter]
    public Model Model { get; set; } = new();

    private MarkupString SerializedKeys => new MarkupString(System.Text.Json.JsonSerializer.Serialize(Model.Keys));
}

之后在HTML代码里直接引用这个变量：

<div x-data="{ keys: @SerializedKeys, step: 1 }">
    <!-- 组件内容 -->
</div>

方法二：内联使用MarkupString #

如果不想额外定义变量，也可以直接在HTML中内联处理：

<div x-data="{ keys: @(new MarkupString(System.Text.Json.JsonSerializer.Serialize(Model.Keys))), step: 1 }">
    <!-- 组件内容 -->
</div>

关键说明 #

System.Text.Json.JsonSerializer.Serialize会把C#字符串数组转换成符合JavaScript语法的数组格式（比如["a","b","c"]），而MarkupString能避免Blazor对这个JSON字符串进行HTML转义，确保Alpine.js的x-data可以正确识别为JavaScript数组。

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