本文讲解如何在 asp.net razor 页面中，将 c# 对象（如 list）序列化为 json 并安全注入 html 的 onclick 属性，避免因特殊字符（如 `/`、`*`、`-`、引号或反斜杠）导致 javascript 解析失败。
在 ASP.NET MVC 或 Razor Pages 中，常需将服务端数据（例如 List<string> 或复杂模型）直接传入前端 JavaScript 函数。看似简单的一行代码：
<input type="radio" class="btn-check" value="Maybe" name="ckhanswerA" id="chk"
onclick="nextSlide(@Json.Serialize(@question))" />实际运行时却容易报错——浏览器控制台可能提示 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#）
<input type="radio" class="btn-check" value="Maybe" name="ckhanswerA" id="chk"
onclick='nextSlide(@Html.Raw(HttpUtility.JavaScriptStringEncode(Json.Serialize(@question))))' />⚠️ 注意：
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 必须使用 单引号 包裹 onclick 属性值（如 onclick='...'），否则双引号嵌套易冲突；
- 使用 @Html.Raw(...) 防止 Razor 自动 HTML 编码转义后的字符串（否则 " 等会破坏 JSON）；
- HttpUtility.JavaScriptStringEncode() 会将 " → "、 → \、换行 → 等，确保字符串在 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
}❌ 错误写法（会导致解析失败）：
<!-- 危险！特殊字符未转义，HTML/JS 解析中断 -->
onclick="nextSlide(@Json.Serialize(@question))"
<!-- 多余解析！传入的是对象，不是 JSON 字符串 -->
function nextSlide(question) {
var myList = JSON.parse(question); // ❌ TypeError: Cannot parse object as JSON
}? 补充说明
- 若 @question 是 List<string>，序列化后为 ["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-* 属性或 <script type="application/json"> 中，完全解耦 HTML 与 JS 数据传递逻辑，提升可维护性与安全性。
总之，安全传递服务端数据的关键在于：序列化 + 上下文转义 + 正确引用方式。一次配置，彻底规避因特殊字符引发的静默失败。
