如何在ASP.NET Core的foreach循环中让JavaScript变量唯一？

问题根源 #

你当前的代码存在两个核心问题：

• JavaScript的变量名和函数名不能包含减号（-），减号会被解析为减法运算符，导致语法错误，比如currentDateTime-@item.id会被当成currentDateTime减去@item.id的数值，而非完整的变量名。
• Razor的@item.id虽能正确输出到HTML的ID中，但在JS代码里和减号组合后，无法生成合法的唯一标识符。

修正方案：使用合法标识符生成唯一名称 #

将减号替换为下划线（_），下划线是JS允许的标识符字符，可保证每个项的变量、函数和ID唯一：

@foreach (var item in list)
{
    <h3 id="time_@item.id"></h3>
    <script type="text/javascript">
            // 用下划线拼接，生成合法的唯一变量名
            let currentDateTime_@item.id = new Date(Date.now());
            $('#time_@item.id').html(currentDateTime_@item.id);
            // 同样用下划线生成唯一函数名
            function getdone_@item.id(){
                // 函数逻辑，可通过item.id区分不同项
                console.log("处理项：@item.id");
            }
            // 示例：调用当前项的函数
            getdone_@item.id();
    </script>
}

更优方案：避免重复生成脚本（推荐） #

上面的写法会为每个列表项生成重复脚本，冗余且影响性能。可以把脚本统一放到循环外，通过类选择器+数据属性处理每个项，无需为每个项创建单独的变量和函数：

@foreach (var item in list)
{
    <!-- 用类标记元素，通过data-id存储项的唯一标识 -->
    <h3 class="time-display" data-id="@item.id"></h3>
}

<!-- 统一的脚本，只加载一次 -->
<script type="text/javascript">
    // 页面加载完成后初始化所有时间元素
    $(document).ready(function(){
        // 遍历所有时间元素
        $('.time-display').each(function(){
            let $this = $(this);
            let itemId = $this.data('id');
            let currentDateTime = new Date(Date.now());
            $this.html(currentDateTime);
            
            // 如果需要绑定事件或执行特定逻辑，直接用itemId区分
            $this.click(function(){
                handleItemClick(itemId);
            });
        });
    });

    // 通用处理函数，通过参数接收itemId
    function handleItemClick(itemId){
        console.log("点击了项：" + itemId);
        // 针对不同itemId的逻辑处理
    }
</script>

这种方式既保证了每个项的唯一性，又减少了代码冗余，维护性和性能都更优。

内容的提问来源于stack exchange，提问作者Mohamed Yousef Khairlden