ASP.NET MVC中foreach循环内按钮触发JS填充文本框问题求助

核心问题分析 #

1. 重复ID冲突：循环生成的按钮共用id="btnTakeOver"，jQuery选择器只会匹配第一个元素，后续按钮点击无响应。
2. Razor变量作用域限制：你的JS代码写在@section Scripts中，不在foreach循环的作用域内，Razor无法识别@user变量。
3. 文本框绑定错误：原代码里@Html.TextBoxFor(model => model.Users)绑定的是用户集合，应该绑定单个用户的属性（比如选中用户的Name/Email）。

方案一：利用自定义数据属性存储用户信息 #

这是最直观的方式，把用户信息存在按钮的data-*属性里，点击时直接读取赋值。

1. 修正表格与按钮代码

@foreach (var user in Model.Users)
{
    <tr>
        <!-- 用class代替重复id，添加data属性存储用户信息 -->
        <td>
            <input type="button" value="get" class="btn btn-primary btn-take-over" 
                   data-name="@user.Name" data-email="@user.Email" />
        </td>
        <td>@user.Id</td>
        <td>@user.Name</td>
        <td>@user.Email</td>
    </tr>
}

2. 修正文本框代码（补充Email文本框）

<!-- 绑定单个用户属性，或直接指定ID -->
@Html.TextBoxFor(model => model.SelectedUser.Name, new { @id = "Name" })
@Html.TextBoxFor(model => model.SelectedUser.Email, new { @id = "Email" })

3. 修正JS代码

@section Scripts {
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")

    <script>
        $(document).ready(function () {
            // 绑定class选择器，匹配所有按钮
            $(".btn-take-over").click(function () {
                // 读取当前按钮的data属性
                var userName = $(this).data("name");
                var userEmail = $(this).data("email");
                
                // 赋值到文本框
                $("#Name").val(userName);
                $("#Email").val(userEmail);
            });
        });
    </script>
}

方案二：通过DOM遍历获取当前行的用户信息 #

不需要额外存储数据，点击按钮时遍历其父元素找到当前行，再提取对应单元格的内容。

1. 表格按钮代码（仅修改class）

@foreach (var user in Model.Users)
{
    <tr>
        <td>
            <input type="button" value="get" class="btn btn-primary btn-take-over" />
        </td>
        <td>@user.Id</td>
        <!-- 给单元格加class方便定位 -->
        <td class="user-name">@user.Name</td>
        <td class="user-email">@user.Email</td>
    </tr>
}

2. JS代码

@section Scripts {
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")

    <script>
        $(document).ready(function () {
            $(".btn-take-over").click(function () {
                // 找到当前按钮所在的行
                var $row = $(this).closest("tr");
                
                // 提取行内的用户信息
                var userName = $row.find(".user-name").text();
                var userEmail = $row.find(".user-email").text();
                
                // 赋值到文本框
                $("#Name").val(userName);
                $("#Email").val(userEmail);
            });
        });
    </script>
}

补充说明 #

• 若Model中没有SelectedUser这类单个用户属性，可直接使用普通文本框：<input type="text" id="Name" />、<input type="text" id="Email" />
• 确保jQuery加载顺序正确，先加载~/bundles/jquery再加载~/bundles/jqueryval，避免依赖报错

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