Razor Pages中循环生成按钮实现点击计数器递增失效问题

• 特殊字符导致jQuery选择器失效：生成文本框时直接拼接字符串Tb+@item.ErrorListID，最终渲染到页面的元素id会包含+符号（如Tb+1）。+是jQuery选择器语法中的相邻兄弟选择符，直接使用$('#Tb+1')的写法会被jQuery解析为“匹配id为Tb的元素之后紧邻的、id为1的兄弟节点”，完全无法命中目标文本框，取值和赋值操作都因为找不到元素失效。如果确实需要保留带加号的id，需要对特殊字符做转义处理，这种写法维护成本极高，不推荐。
• 循环生成冗余脚本块：在Razor的foreach循环内逐次生成<script>标签做事件绑定，会产生大量重复的代码块，不仅增加页面加载体积，还容易出现重复绑定、变量作用域混乱的问题。
• HTML属性渲染不规范：生成id、value等属性时没有用引号包裹Razor表达式，遇到包含特殊字符的ID值时，会渲染出不符合HTML规范的属性值，进一步降低选择器匹配的成功率。

第一步：优化页面生成的元素结构 #

去掉id中的+特殊字符，给所有按钮加统一类名，通过自定义属性关联对应的计数文本框，避免硬拼接选择器：

@foreach(var item in Model.ErrorList)
{
    <%-- 按钮添加统一类名，通过data-target指向关联的文本框id --%>
    <input 
        type="button" 
        id="btn_@item.ErrorListID" 
        class="error-count-btn"
        data-target="tb_@item.ErrorListID"
        value="@item.ErrorName" />
    <%-- 文本框id使用下划线拼接，移除特殊加号字符 --%>
    <input 
        type="text" 
        id="tb_@item.ErrorListID" 
        value="0" />
}

第二步：编写统一的事件绑定逻辑 #

将脚本移出循环，只在页面中写一次绑定逻辑，适配所有循环生成的元素：

$(document).ready(function(){
    // 统一绑定所有计数按钮的点击事件
    $('.error-count-btn').click(function() {
        // 获取当前按钮关联的文本框id
        const targetInputId = $(this).data('target');
        // 读取当前计数，做数值转换与递增
        const currentCount = parseInt($('#' + targetInputId).val(), 10);
        const newCount = isNaN(currentCount) ? 0 : currentCount + 1;
        // 将新计数值写回目标文本框
        $('#' + targetInputId).val(newCount);
    });
});

• 所有元素id不含jQuery选择器特殊字符，匹配准确率100%
• 无冗余循环生成的脚本块，页面加载性能更优
• 后续若需要新增同类型计数按钮，只需要按照类名和自定义属性的规则写HTML即可，不需要重复编写绑定逻辑
• 若后续元素为动态加载生成，可直接将绑定逻辑改为事件委托形式，不需要额外修改代码逻辑

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