如何安全地将 C# 列表通过 onclick 传递给 jQuery 方法_网络技术

如何安全地将 C# 列表通过 onclick 传递给 jQuery 方法

发布时间 - 2026-02-01 00:00:00 点击率：次

本文讲解如何在 asp.net razor 页面中，将 c# 对象（如 list）序列化为 json 并安全注入 html 的 onclick 属性，避免因特殊字符（如 `/`、`*`、`-`、引号或反斜杠）导致 javascript 解析失败。

在 ASP.NET MVC 或 Razor Pages 中，常需将服务端数据（例如 List 或复杂模型）直接传入前端 JavaScript 函数。看似简单的一行代码：

实际运行时却容易报错——浏览器控制台可能提示 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
}

? 补充说明

若 @qu
estion 是 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-* 属性或

总之，安全传递服务端数据的关键在于：序列化 + 上下文转义 + 正确引用方式。一次配置，彻底规避因特殊字符引发的静默失败。

# javascript # java # jquery # html # js # 前端 # json # 编码 # 浏览器 # app # microsoft # mvc # String # Token # 字符串

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何将机械硬盘改为固态硬盘系统迁移【升级】

下一篇：一苇网能做PPT大纲吗_一苇网AI生成PPT大纲方法【方法】

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何将机械硬盘改为固态硬盘系统迁移【升级】

下一篇：一苇网能做PPT大纲吗_一苇网AI生成PPT大纲方法【方法】