前端jQuery动态表格行计数器如何传递至后端C#按钮事件供for循环使用

你遇到的核心问题是前端JS运行在浏览器端、后端C#事件运行在服务器端，二者属于完全隔离的运行环境，没法直接共享JS中定义的counter变量，原有代码里直接在后端Button1_Click中引用counter的写法永远取不到前端的计数值，必须通过表单提交的方式把动态变化的计数值传递到服务器。

实现步骤 #

1. 页面添加用于存储计数值的隐藏表单域 #

把专门用来存计数的隐藏输入框放在页面的服务器表单内部（也就是<form runat="server">标签包裹的区域里），确保这个字段会随表单一起提交到服务器：

<!-- 放在表单内部 -->
<input type="hidden" id="rowCount" name="rowCount" value="1" />

2. 修正前端JS逻辑，同步计数到隐藏域 #

原有JS逻辑中counter的变化（新增行、删除行）发生在前端，必须在每次计数变化时把最新值写入隐藏域，替换掉原来无效的return counter代码：

// 全局计数变量
var counter = 1;
$(function () {
    $('#add').click(function () {
        // 原有动态新增表格行的逻辑完全保留
        $('<tr id="tablerow' + counter + '"><td>' +
            '<input type="text" class="text-box single-line" name="ClientSampleID[' + counter + ']" value="" required="required" />' +
            '</td>' +
            '<td>' +
            '<input type="text" class="text-box single-line" name="AdditionalComments[' + counter + ']" value="" required="required" />' +
            '</td>' +
            '<td>' +
            '<button type="button" class="btn btn-outline-dark" onclick="removeTr(' + counter + ');"><b>-</b></button>' +
            '</td>' +
            '</tr>').appendTo('#submissionTable');
        counter++;
        // 计数自增后同步更新隐藏域的值
        $('#rowCount').val(counter);
        return false;
    });
});
function removeTr(index) {
    if (counter > 1) {
        $('#tablerow' + index).remove();
        counter--;
        // 计数自减后同步更新隐藏域的值
        $('#rowCount').val(counter);
    }
    return false;
}

3. 修正后端按钮点击事件，从提交数据中读取计数值 #

后端不再直接引用前端的counter变量，而是从提交的表单数据中读取隐藏域的值，做合法性校验后再用于循环：

void Button1_Click(Object sender, EventArgs e)
{
    string marker = "Marker";
    // 初始化默认行计数，避免表单取不到值时报错
    int totalRow = 1;
    // 解析前端传来的计数值，增加容错处理
    if (int.TryParse(Request.Form["rowCount"], out int parsedCount))
    {
        totalRow = parsedCount;
    }
    // 注意循环边界：实际动态新增行数为totalRow-1（初始counter=1无新增行，点一次新增counter变为2，对应1行）
    for (int i = 1; i < totalRow; i++)
    {
        file.WriteLine("{0}", marker);
    }
    file.Close();
}

注意事项 #

• 隐藏域必须放在服务器托管的表单内部，否则表单提交时不会携带这个字段，后端无法读取到值。
• 每次counter发生变化时必须同步更新隐藏域，不能仅在页面加载时设置一次值，否则提交时传递的永远是初始的1。
• 可以删掉原来jQuery初始化回调里的return counter代码，这段代码仅会被jQuery内部接收，既不会传递给后端，也不会对外暴露，属于完全无效的冗余逻辑。
• 循环边界要和实际行数量匹配：如果按照原有逻辑新增行时先取当前counter值生成行ID，再执行counter++，那么实际行数等于counter - 1，避免多写空行。

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