MVC搭配jQuery开发时，Razor引用Model数组报当前上下文不存在i错误求解

这个错误本质是服务器端Razor渲染和客户端JavaScript的执行阶段完全隔离导致的：

• 带@标识的Razor代码属于C#服务器端逻辑，会在页面第一次请求时由服务器端全部执行完成，最终输出纯静态的HTML、JS代码到浏览器；Razor在编译阶段完全感知不到客户端JS里定义的局部变量i，因此会抛出“名称i在当前上下文不存在”的编译错误。
• 你之前把代码中@Model.TimeStamp[i]的索引替换为@Model.StepCount后代码可正常运行，是因为此时Razor识别的是自身C#上下文里的Model.StepCount成员，完全没有依赖JS侧的变量i，因此能顺利通过服务器端编译流程。

动态表格行追加的可行实现方案 #

核心思路是提前把服务器端需要的数据序列化注入到前端全局作用域，让客户端JS可以直接按自身循环的索引取值，全程不需要在JS循环里嵌套调用Razor语法，具体实现步骤：

• 第一步：在页面脚本的顶层位置，提前完成服务器端数据到前端变量的注入：

// 放在$(document).ready外层，页面加载时由Razor完成数据序列化注入
// 直接将C#的TimeStamp数组转为前端可直接访问的JS数组
const timeStampDataSource = @Html.Raw(Json.Serialize(Model.TimeStamp));
const totalStepLimit = @Model.StepCount;

• 第二步：修改点击事件的追加行逻辑，循环时直接从前端缓存的数据源取值：

$(document).ready(function () { 
  $("#addmore").click(function () {
    // 统计当前表格内已经渲染过的带header类的行数量
    const existingRowCount = $("#myTable tbody .header").length;
    // 从下一个未渲染的索引开始遍历，直到达到总步数上限
    for (let i = existingRowCount; i < totalStepLimit; i++) {
      const rowHtml = `<tr class="header">
        <td class="prtoducttd">${timeStampDataSource[i]}</td>
      </tr>`;
      $('#myTable tbody').append(rowHtml);
    }
  });
});

注意调整点：你原代码里循环初始值设置为$(".table .header").length + 1，由于数组索引从0开始计数，当页面已经渲染了n行数据时，下一个需要取的数组元素索引刚好是n，额外加1会导致索引错位、跳过对应数据的问题。

内容的提问来源于stack exchange，提问作者Tâm Nguyễn