本文讲解如何在 razor 视图中将 c# 变量安全传递给 javascript，并实现运行时逻辑递增，避免因服务端编译时机导致的变量“静态化”问题。核心在于分离服务端渲染与客户端执行，通过字符串拼接或 json 序列化桥接两者。
本文讲解如何在 razor 视图中将 c# 变量安全传递给 javascript，并实现运行时逻辑递增，避免因服务端编译时机导致的变量“静态化”问题。核心在于分离服务端渲染与客户端执行，通过字符串拼接或 json 序列化桥接两者。
在 ASP.NET MVC 或 Razor Pages 中，开发者常误以为 @{ ... } 代码块可在 JavaScript 内部被反复执行（如循环中递增），但需明确：Razor 是服务端预编译技术，所有 @ 表达式在 HTML 响应生成阶段即已求值完毕，不会随 JavaScript 运行而重新执行。因此，以下写法是无效的：
<script>
@{ int ind = 1; }
var words = '@Model.FirstOrDefault(n => n.ID == ind).Content';
@{ ind++; } <!-- 此处 ind++ 在服务端仅执行一次，对 JS 无影响 -->
</script>该代码中 ind 的递增发生在服务端渲染完成前，且仅发生一次；JavaScript 获取到的 words 始终基于初始 ind = 1 计算，无法动态变化。
✅ 正确做法是：将 C# 变量作为初始值注入 JavaScript，后续递增完全交由客户端逻辑控制。例如：
<body>
<script type="text/javascript">
// 将服务端变量安全输出为 JS 数字（防 XSS，推荐用 @Json.Serialize）
var ind = @Json.Serialize(ind); // 若 ind 来自 ViewBag/Model，确保已定义
// 或更简洁（当 ind 为简单整数时）：
// var ind = @ind;
// 动态获取内容（注意：此方式仅适用于 Model 数据可完整序列化至前端的场景）
var words = '@Html.Raw(Json.Serialize(Model.Select(n => new { n.ID, n.Content }).ToList()))';
// 在 JS 中操作：查找 ID 匹配项
var targetItem = JSON.parse(words).find(n => n.ID === ind);
var content = targetItem ? targetItem.Content : '';
// 后续可自由递增
ind++;
console.log('Next ID:', ind);
</script>
</body>⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 避免直接拼接字符串调用 FirstOrDefault：原答案中 @Model.FirstOrDefault(...).Content 在服务端执行，但若 ind 是 JS 变量，则该表达式无法动态响应——它仍是服务端静态计算的结果。真正动态查询必须移至客户端（如上例用 JSON.parse + find），或改用 AJAX 异步请求。
- 安全优先：使用 @Json.Serialize() 替代字符串插值，防止 XSS；若必须插值，请配合 @Html.Raw() + Json.Encode() 确保内容转义。
- 性能考量：将整个 Model 序列化到前端仅适用于小数据集；大数据建议按需通过 API 获取。
? 总结：C# 与 JavaScript 的变量不可“共享状态”，只能通过服务端输出初始值、客户端接管后续逻辑来协作。理解 Razor 渲染生命周期，是避免此类混淆的关键。
