在ASP.NET等后端使用C#开发的Web项目中，经常需要把后端生成的列表数据传递到前端的jQuery方法中进行处理，直接在onclick属性中拼接列表数据很容易出现转义错误或者XSS风险，需要采用更安全的方式实现数据传递。
常见错误传递方式及问题
很多开发者会直接在Razor视图中拼接字符串到onclick属性，比如下面的写法：
<!-- 错误示例 -->
@{
var userList = new List<string> { "张三", "李四", "王五" };
}
<button onclick="handleList('@string.Join(",", userList))">点击处理列表</button>
这种写法的问题在于，如果列表中的元素包含引号、逗号等特殊字符，拼接后的字符串会破坏onclick的语法结构，导致脚本报错。同时直接拼接用户输入的内容还可能引发XSS攻击。
安全传递方案一：使用数据属性存储JSON序列化数据
这是最推荐的方式，先将C#列表序列化为JSON字符串，再存储到元素的data属性中，点击时通过jQuery读取数据属性即可。
后端C#代码处理
首先需要引入Newtonsoft.Json或者System.Text.Json进行序列化，这里以Newtonsoft.Json为例：
// 后端C#代码，在控制器中传递数据到视图
public ActionResult Index()
{
List<User> userList = new List<User>
{
new User { Id = 1, Name = "张三", Age = 20 },
new User { Id = 2, Name = "李四", Age = 25 },
new User { Id = 3, Name = "王五", Age = 22 }
};
// 序列化为JSON字符串
string jsonList = JsonConvert.SerializeObject(userList);
ViewBag.UserJsonList = jsonList;
return View();
}
public class User
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
前端视图与jQuery代码
在视图中把序列化后的JSON存储到data属性，避免直接拼接onclick：
<!-- 前端视图代码 -->
<button class="list-btn" data-user-list="@ViewBag.UserJsonList">点击处理用户列表</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
// jQuery方法处理列表数据
function handleUserList(list) {
console.log("接收到的用户列表：", list);
list.forEach(function(user) {
console.log("用户ID：" + user.Id + "，姓名：" + user.Name + "，年龄：" + user.Age);
});
}
// 绑定点击事件，从data属性读取数据
$(".list-btn").on("click", function() {
var jsonStr = $(this).data("user-list");
// 解析JSON字符串为对象
var userList = JSON.parse(jsonStr);
handleUserList(userList);
});
});
</script>
这种方式下，JSON字符串会被浏览器正确转义存储，不会出现语法错误，同时避免了直接拼接脚本的风险。
安全传递方案二：通过全局变量中转
如果列表数据需要在多个地方使用，也可以先定义全局变量存储序列化后的列表，再在onclick中调用方法时传递变量名。
<!-- 前端视图代码 -->
@{
var productList = new List<string> { "手机", "电脑", "平板" };
string jsonProduct = JsonConvert.SerializeObject(productList);
}
<script>
// 定义全局变量存储列表数据
var globalProductList = JSON.parse('@Html.Raw(jsonProduct)');
</script>
<button onclick="handleProductList(globalProductList)">点击处理产品列表</button>
<script>
$(function() {
function handleProductList(list) {
console.log("产品列表：", list);
}
});
</script>
注意这里使用@Html.Raw避免JSON字符串被二次转义，但是这种方式如果列表包含用户输入内容，需要额外做好过滤，避免XSS风险。
两种方案对比
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 数据属性存储 | 数据跟随元素，不会污染全局作用域，安全性更高 | 需要额外读取data属性并解析JSON | 单个元素专属的列表数据，安全性要求高的场景 |
| 全局变量中转 | 实现简单，多个元素可共享数据 | 污染全局作用域，存在一定安全风险 | 多个元素共用同一份列表数据，数据来源可控的场景 |
注意事项
- 无论使用哪种方案，C#列表序列化时都要确保特殊字符被正确转义，避免JSON格式错误。
- 如果列表数据包含用户输入的内容，前端解析JSON后要做必要的校验，防止恶意数据执行。
- 不要直接在onclick属性中拼接未处理的列表字符串，这是最常见的安全隐患来源。
- 使用
JSON.parse解析字符串时，要包裹在try-catch中，避免无效JSON导致脚本崩溃。