动态添加多行TextBox后，Ajax与对应组件绑定问题求解

你的问题核心是HTML元素ID重复，以及Ajax中固定使用ID选择器导致始终获取第一个TextBox的值。HTML规范要求ID必须唯一，当存在多个相同ID的元素时，jQuery的ID选择器只会返回第一个匹配的元素，所以多行会失效。

1. 修正表格代码：移除重复ID，改用类标识元素 #

将重复的id属性替换为class，确保每个元素的标识唯一且可批量定位：

<a href="#" id="addNew" style="text-align:right;float:right"><input type="button" value="Add record" style="height: 30px;width: 110px;font-size: 0.75em" /></a>
<table id="dataTable">
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
            int i = 0;
            //foreach (var p in Model.TBHDR)
            for (i = 0; i < Model.TBHDR.Count && i < Model.TBDTL.Count; i++)
            {
        <tr>
            <td>@Html.TextBoxFor(mod => mod.TBHDR[i].PR_REQ_OWNER, new { @class = "hdr_req_owner own" })<input type="button" value="Search" class="btnSearch" /></td>
            <td><a href="#" class="remove" name="pr_remove">Remove</a></td>
        </tr>
            }
    </tbody>
</table>    

注意：动态添加新行时，新行的TextBox和按钮必须遵循同样规则，只能用类标识，不能重复使用ID

2. 修改Ajax函数：通过DOM关联获取对应TextBox #

利用DOM层级关系，定位当前点击按钮所在行的TextBox，确保请求和更新的都是当前行的输入值：

$('#dataTable').on('click', '.btnSearch', function (e) {
    // 定位当前按钮所在行的目标TextBox
    var $targetInput = $(this).closest('tr').find('.hdr_req_owner');
    
    $.ajax({
        url: "@Url.Action("GetOwner", "PR_Creation")",
        data: { ownerName: $targetInput.val() },
        type: "GET",
        dataType: "json",
        success: function (data) {
            // 更新当前行的TextBox值
            $targetInput.val(data);
        },
        error: function () {
            alert("Failed! Please try again.");
        }
    });
});

核心逻辑说明 #

• $(this)：指代当前被点击的搜索按钮
• .closest('tr')：向上查找最近的行元素，锁定按钮所在的行
• .find('.hdr_req_owner')：在该行内精准定位对应的TextBox，避免跨行匹配

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