如何在 JavaScript 中动态使用并递增 C# 变量值-js教程-PHP中文网

如何在 JavaScript 中动态使用并递增 C# 变量值

本文讲解如何在 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，后续递增完全交由客户端逻辑控制。例如：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

    <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>

⚠️ 注意事项：

避免直接拼接字符串调用 FirstOrDefault：原答案中 @Model.FirstOrDefault(...).Content 在服务端执行，但若 ind 是 JS 变量，则该表达式无法动态响应——它仍是服务端静态计算的结果。真正动态查询必须移至客户端（如上例用 JSON.parse + find），或改用 AJAX 异步请求。
安全优先：使用 @Json.Serialize() 替代字符串插值，防止 XSS；若必须插值，请配合 @Html.Raw() + Json.Encode() 确保内容转义。
性能考量：将整个 Model 序列化到前端仅适用于小数据集；大数据建议按需通过 API 获取。

? 总结：C# 与 JavaScript 的变量不可“共享状态”，只能通过服务端输出初始值、客户端接管后续逻辑来协作。理解 Razor 渲染生命周期，是避免此类混淆的关键。