如何递增在JavaScript中使用的C#变量？Razor视图代码执行不符预期

Razor代码是服务器端编译执行，页面渲染完成后会生成静态HTML/JS代码发送到浏览器。你定义的ind是服务器端变量，仅在页面编译阶段执行一次递增；而JavaScript是客户端代码，运行在浏览器环境中，无法直接调用服务器端的FirstOrDefault方法——两者运行环境完全分离，不能直接交互。

根据业务场景，有两种可行方案：

方案1：将Model数据序列化到客户端，用JavaScript处理 #

如果数据量不大，推荐一次性把服务器端Model转换成JavaScript对象，在客户端直接操作，无需再和服务器交互：

<body>
<script type="text/javascript">
    // 把服务器端Model序列化为JS数组（避免HTML转义）
    var dataList = @Html.Raw(Json.Serialize(Model));
    
    // 客户端JS变量，每次执行都会递增
    let ind = 1;
    // 用JS的find方法替代服务器端的FirstOrDefault
    var words = dataList.find(n => n.ID === ind)?.Content || '';
    ind++; // 此处递增会在每次JS执行时生效
    
    // 后续可继续使用ind操作数据
    let nextWords = dataList.find(n => n.ID === ind)?.Content || '';
</script>
</body>

说明 #

• Json.Serialize(Model)将服务器端Model转换成JSON格式字符串
• Html.Raw()确保JSON字符串不会被Razor转义成HTML实体，让JavaScript能正常解析
• 客户端用Array.find()实现和FirstOrDefault类似的逻辑，完全在浏览器中执行，变量递增逻辑正常生效

方案2：通过AJAX请求服务器接口，传递JavaScript变量 #

如果数据量极大，或者需要实时获取最新数据，可通过AJAX异步请求服务器端接口，将JavaScript变量作为参数传递：

第一步：服务器端编写接口 #

在Controller中添加处理请求的Action：

public IActionResult GetContent(int id)
{
    // 从数据源获取对应ID的内容
    var content = _yourDataSource.YourModel.FirstOrDefault(n => n.ID == id)?.Content;
    // 返回JSON格式结果
    return Json(new { Content = content });
}

第二步：客户端用AJAX调用接口 #

<body>
<script type="text/javascript">
    let ind = 1;
    
    // 封装获取内容的异步函数
    async function getContentById(id) {
        const response = await fetch(`/YourControllerName/GetContent?id=${id}`);
        const result = await response.json();
        return result.Content || '';
    }
    
    // 执行数据获取逻辑
    async function fetchData() {
        var words = await getContentById(ind);
        console.log(words);
        ind++; // 客户端变量递增，每次调用都会生效
        
        // 可继续请求下一条数据
        var nextWords = await getContentById(ind);
        console.log(nextWords);
    }
    
    // 触发执行
    fetchData();
</script>
</body>

说明 #

• 通过fetch发送异步请求，将JS变量ind作为URL参数传递给服务器端
• 服务器端接收参数后，查询对应数据并返回JSON结果
• 客户端拿到结果后继续递增变量，实现预期的循环逻辑

内容的提问来源于stack exchange，提问作者Hussein EL-Shatla