如何正确结合JavaScript循环索引获取ViewBag列表的值？

嘿，我看你在尝试用JavaScript索引获取ViewBag里的列表值时踩坑了，咱们来一步步理清楚问题出在哪，再给你解决办法～

问题根源 #

你代码里的核心问题是服务器端代码（Razor/ViewBag）和客户端代码（JavaScript）的执行时机搞混了：

• Razor和ViewBag是在服务器端执行渲染的，这时候客户端的JS变量i还根本不存在；
• 你试图在服务器端的@(...)表达式里用JS的${i}，服务器根本识别不了这个客户端变量，自然会报错。

看你原代码里的这段错误写法：

select: `@(ViewBag.paramProperty[ + "${i}" + ]);

服务器渲染时，它没法理解${i}是什么，直接就会语法报错。

解决方案1：将ViewBag数据序列化为JSON，在JS中直接使用 #

这是最推荐的方式，把服务器端的列表转成客户端JS能直接用的数组，然后正常遍历就行：

<script>
    // 把ViewBag里的列表序列化为JSON字符串，转成JS数组（Html.Raw避免被转义）
    const paramProperties = @Html.Raw(Json.Serialize(ViewBag.paramProperty));
    
    // 正常JS循环遍历数组
    for (var i = 0; i < paramProperties.length; i++) {
        const targetValue = paramProperties[i];
        // 直接用querySelector找第一个匹配的元素，比querySelectorAll更高效
        const element = document.querySelector(`[value="${targetValue}"]`);
        
        // 先判断元素存在再操作，避免找不到元素时报错
        if (element) {
            element.setAttribute("checked", "checked");
        }
    }
</script>

解决方案2：用Razor循环直接生成JS代码 #

如果你的场景比较简单，也可以直接用服务器端的Razor循环，为每个列表项生成对应的JS代码：

<script>
    @* 用Razor的foreach遍历ViewBag里的列表 *@
    @foreach (var prop in ViewBag.paramProperty)
    {
        <text>
            const element = document.querySelector(`[value="@prop"]`);
            if (element) {
                element.setAttribute("checked", "checked");
            }
        </text>
    }
</script>

这样服务器渲染时会直接把循环展开成多段JS代码，客户端拿到后直接执行即可。

额外小提示 #

• 尽量避免服务器端代码和客户端代码混写在一起，很容易因为执行时机问题出错；
• 操作DOM元素前最好先判断元素是否存在，防止出现Cannot set property 'setAttribute' of null的报错。

内容的提问来源于stack exchange，提问作者irancss