ASP.NET Core 8.0 MVC视图中法语重音字符显示乱码问题

我在使用ASP.NET Core 8.0 MVC开发应用时遇到一个问题：通过JavaScript动态生成的表格里，法语带重音的字符显示异常；但同一文件中直接渲染的表格里，这些字符显示正常。已经在_layout文件里设置了<meta charset="utf-8">标签。

异常代码（动态生成表格） #

@model List<ViewListTable>
<head>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<script type="text/javascript">
    function f() {
        var myArray = [];

    @foreach (var d in Model)
    {
        @:myArray.push("@d.Name");
        @:console.log("@d.Name");
    }
        var cptData = myArray.length;
        var tableau = document.getElementById('tableau');
        var tbl = document.createElement("table");
        var x = 0;

        for (var i = 0; i < cptData / 3; i++) {
            var tr = document.createElement('tr');

            for (j = 0; j < 3; j++) {
                var td = document.createElement('td');

                if (x < cptData) {
                    var a = document.createElement('a');
                    var el_span = document.createElement('span');
                    var linkText = document.createTextNode(myArray[x]);
                    var tab = myArray[x];

                    el_span.setAttribute('style', 'color: #07C');
                    a.setAttribute('href', "'" + tab + "'");
                    a.setAttribute('class', 'button');
                    a.title = "Éditer les données de la table:";

                    a.appendChild(linkText);
                    el_span.appendChild(a);
                    td.appendChild(el_span);
                };
                x += 1;
                tr.appendChild(td)
            };
            tbl.appendChild(tr);
        }
        tableau.appendChild(tbl);
   }
    </script>
</head>
<body>
    <div id="tableau"></div>
    <script>
    f();
</script>
</body>

正常代码（直接渲染表格） #

@model List<ViewListTable>
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
 </head>

 <body>
     <div class="container">
             <div class="col-6">
                 Liste des tables
             </div>
         <table class="table table-bordered table-striped">
             <thead>
                 <tr>
                     <th class="col-6">
                         Nom des tables de la BD
                     </th>
                 </tr>
             </thead>
             <tbody>
                 @foreach (var obj in Model)
                 {
                     <tr>
                         <td>@obj.Name</td>
                     </tr>
                 }
             </tbody>
         </table>
     </div>
 </body>
 </html>

截图说明 #

• 异常显示截图：法语重音字符出现乱码
• 正常显示截图：法语重音字符显示正确

问题原因及解决方案 #

原因 #

在Razor视图中直接把@d.Name输出到JavaScript字符串时，ASP.NET Core默认不会对特殊字符（比如法语重音）做JavaScript编码，导致字符在JS中解析异常。而直接渲染到HTML时，Razor会自动进行HTML编码，所以显示正常。

解决方法 #

推荐使用Json.Serialize()方法把模型数据序列化为合法的JavaScript对象，避免手动拼接字符串导致的编码问题：

@model List<ViewListTable>
<head>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<script type="text/javascript">
    function f() {
        // 直接序列化模型数据为JS数组
        var myArray = @Json.Serialize(Model.Select(d => d.Name));
        
        var cptData = myArray.length;
        var tableau = document.getElementById('tableau');
        var tbl = document.createElement("table");
        var x = 0;

        // 后续逻辑保持不变...
   }
    </script>
</head>
<body>
    <div id="tableau"></div>
    <script>
    f();
</script>
</body>

替代方案 #

如果不想整体序列化，也可以单独对每个字段做JavaScript编码：

@foreach (var d in Model)
{
    @:myArray.push("@HttpUtility.JavaScriptStringEncode(d.Name)");
}

但整体序列化的方式更简洁，也不容易出错。

额外检查 #

确保视图文件本身的编码为UTF-8（在Visual Studio中右键文件→属性→高级→编码选择UTF-8）。

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