ASP.NET中如何获取HTML表格对应行的实际值？

我一眼就看出问题出在哪了——你循环生成的所有模态框都用了同一个ID modifier，而且模态框里的数据绑定也没正确对应到当前行！浏览器里ID是唯一的，所以不管你点哪一行的修改按钮，只会唤起第一个匹配ID的模态框，而且因为Razor循环变量的作用域问题，所有模态框里的内容最后都变成了循环最后一行的数据。

下面是具体的修复方案，分三步来改：

1. 给每个模态框生成唯一ID #

在循环里，用当前cs对象的唯一标识（比如Id属性，如果有的话，或者用title，只要保证唯一）来拼接模态框的ID，比如改成modal-modify-@cs.Id。

2. 修改按钮的data-target对应正确的模态框 #

把修改按钮的data-target属性改成对应刚才生成的唯一ID，比如#modal-modify-@cs.Id。

3. 确保模态框内的数据绑定正确 #

如果你的Razor版本比较老，循环变量cs可能会存在引用共享的问题，导致所有模态框都显示最后一行的数据。可以在循环内部先把当前cs赋值给一个局部变量，再用这个局部变量绑定数据，避免这个问题。

修改后的完整代码示例 #

<tbody>
    @foreach (Class cs in Model.MyClass)
    {
        // 捕获当前循环的cs对象，避免作用域问题
        var currentClass = cs;
        var statut = (currentClass.statut == "yes") ? "enable" : "disable";
        var rowClass = currentClass.statut == "yes" ? "success" : "danger";
        var modalId = $"modal-modify-{currentClass.Id}"; // 假设cs有唯一的Id属性，没有的话用title替换
        <tr class="@rowClass">
            <td rowspan="2">@currentClass.title</td>
            <td>@currentClass.att[0]</td>
            <td>@currentClass.att2[0]</td>
            <td rowspan="2">@currentClass.att3</td>
            <td rowspan="2">
                <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                    @(currentClass.statut == "yes" ? "Désactiver" : "Activer")
                </button>
            </td>
            <td rowspan="2">
                <button class="btn btn-primary" data-toggle="modal" data-target="#@modalId">
                    Modifier
                </button>
            </td>
        </tr>
        <tr class="@rowClass">
            <td>@currentClass.att[1]</td>
            <td>@currentClass.att2[1]</td>
        </tr>
        <!-- 唯一ID的模态框 -->
        <div class="modal fade bs-example-modal-md" id="@modalId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-@modalId">
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel-@modalId">Modify @currentClass.title</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form">
                            <div class="">
                                <label for="groupe-@modalId" class="col-sm-3 control-label">Groupe</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="groupe-@modalId" value="@currentClass.title">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary">Confirm</button>
                    </div>
                </div>
            </div>
        </div>
    }
</tbody>

额外优化建议（可选） #

如果你的表格行数很多，生成几十个模态框会让HTML变得臃肿，性能也不好。可以改成只生成一个模态框，然后在点击修改按钮时，用JavaScript把当前行的数据填充到模态框里：

1. 先在页面底部放一个空的模态框模板，不要放在循环里。
2. 给每个修改按钮添加自定义属性，比如data-title="@cs.title"、data-id="@cs.Id"，把需要的行数据存进去。
3. 给按钮绑定点击事件，用JavaScript读取这些自定义属性的值，填充到模态框的对应输入框里。

示例代码大概是这样：

<!-- 页面底部的单个模态框 -->
<div class="modal fade bs-example-modal-md" id="modifyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Modify <span id="modal-title"></span></h4>
            </div>
            <div class="modal-body">
                <form class="form">
                    <div class="">
                        <label for="groupe" class="col-sm-3 control-label">Groupe</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="groupe" value="">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Confirm</button>
            </div>
        </div>
    </div>
</div>

<!-- 循环里的修改按钮 -->
<button class="btn btn-primary modify-btn" data-toggle="modal" data-target="#modifyModal" data-title="@cs.title">
    Modifier
</button>

<!-- JavaScript -->
<script>
    $('.modify-btn').click(function() {
        var title = $(this).data('title');
        $('#modal-title').text(title);
        $('#groupe').val(title);
        // 如果还有其他数据，继续用data-*属性传递并填充
    });
</script>

这种方式更高效，尤其是数据量较大的时候，而且DOM结构更简洁。

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