ASP.NET中用jQuery Ajax提交DataTable值非首行输入为空如何解决

• 重复ID冲突：HTML规范要求ID全局唯一，你在列渲染逻辑中给每行的归还日期输入框都设置了相同的id="dateReturned-id"，使用ID选择器$("#dateReturned-id")取值时，浏览器只会返回DOM树中第一个匹配的元素（即首行输入框），因此其余行的取值都是空值。
• 自定义属性语法错误：生成提交按钮的代码中data - returned - id存在多余空格，会导致属性无法被正确识别，后续获取data-returned-id属性值时可能出现异常。
• 取值逻辑错误：点击按钮时没有限定查找范围为当前行，直接全局查找输入框，自然只能获取到首行的输入值。

首先修改DataTables列渲染逻辑，移除重复ID、修复属性语法、给输入框加专属类名用于定位：

{
    data: "dateReturned",
    render: function (data, type, newrentals) {
        if (data == null)
            // 移除重复ID，修复data属性空格，新增类名标识归还日期输入框
            return "<input required name='dateReturned1' type='text' class='form-control date-returned-input'>"
                + "<button class='btn btn-primary js-submit1' data-returned-id='" + newrentals.id + "'> Returned</button>";
               
        return "<input name='dateReturned' type='text' class='form-control' value='" + data + "'>";
    }
}

然后修改提交事件的取值逻辑，从点击的按钮出发定位当前行的输入框：

$("#newrentals").on("click", ".js-submit1", function () {
    var button = $(this);
    // 定位当前按钮所在的表格行
    var currentRow = button.closest("tr");
    // 仅在当前行内查找归还日期输入框
    var dateInput = currentRow.find(".date-returned-input");
    bootbox.confirm("Are you sure to add return date?", function (result) {
        if (result) {
            var dateVal = dateInput.val();
            $.ajax({
                url: "/api/newrentals/" + button.attr("data-returned-id") + "/allrent",
                method: "GET",
                success: function () {
                    console.log(dateVal);
                    console.log(button.attr("data-returned-id"));
                }
            }).done(function () {
                // 仅清空当前行的输入框
                dateInput.val("");
            });
        }
    });
});

后续切换为POST提交接口时，注意校验传入的日期格式与后端接口要求一致，避免参数解析失败。

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