本文讲解如何在 asp.net razor 页面中，将 c# 对象（如 list）序列化为 json 并安全注入 html 的 onclick 属性，避免因特殊字符（如 `/`、`*`、`-`、引号或反斜杠）导致 javascript 解析失败。
在 ASP.NET MVC 或 Razor Pages 中，常需将服务端数据（例如 List
实际运行时却容易报错——浏览器控制台可能提示 Uncaught SyntaxError: Unexpected token 或 JSON.parse: unexpected character。根本原因在于：@Json.Serialize() 生成的是纯 JSON 字符串（如 ["*abc/def-"]），但将其直接嵌入 HTML 属性值（尤其是双引号包裹的 onclick="..."）中时，未对 JSON 内部的引号、反斜杠、换行等进行 HTML/JavaScript 上下文转义，导致 HTML 解析器或 JS 引擎提前截断或解析失败。
✅ 正确做法是：双重编码——先用 Json.Serialize() 转为 JSON 字符串，再用 HttpUtility.JavaScriptStringEncode() 对其进行 JavaScript 字符串安全转义，确保可安全嵌入 HTML 属性中。
✅ 推荐写法（Razor + C#）
⚠️ 注意：
- 必须使用 单引号 包裹 onclick 属性值（如 onclick='...'），否则双引号嵌套易冲突；
- 使用 @Html.Raw(...) 防止 Razor 自动 HTML 编码转义后的字符串（否则 " 等会破坏 JSON）；
- HttpUtility.JavaScriptStringEncode() 会将 " → \"、\ → \\、换行 → \n 等，确保字符串在 JS 上下文中合法。
✅ 对应的 JavaScript 方法（无需 JSON.parse）
由于传入的已是合法 JavaScript 字面量（非 JSON 字符串），直接使用即可，无需 JSON.parse()：
function nextSlide(question) {
// question 已是解析后的 JS 对象（如数组或对象），可直接使用
console.log(question); // e.g., ["*abc/def-"]
console.log(Array.isArray(question)); // true
}❌ 错误写法（会导致解析失败）：
onclick="nextSlide(@Json.Serialize(@question))"
function nextSlide(question) {
var myList = JSON.parse(question); // ❌ TypeError: Cannot parse object as JSON
}? 补充说明
- 若 @question 是 List
，序列化后为 ["a","b/c","*def-"]；经 JavaScriptStringEncode 后变为 "["a","b\/c","\*def-"]"（内部引号与斜杠已转义），最终被 JS 正确识别为数组字面量。 - 在 .NET 6+ 中，推荐使用 System.Text.Json.JsonSerializer.Serialize() 配合 Microsoft.AspNetCore.Mvc.Rendering.HtmlHelper 扩展方法，但 HttpUtility.JavaScriptStringEncode 仍是兼容性最佳的选择。
- 更现代的替代方案（推荐长期采用）：将数据预埋在 data-* 属性或
总之，安全传递服务端数据的关键在于：序列化 + 上下文转义 + 正确引用方式。一次配置，彻底规避因特殊字符引发的静默失败。
