如何使用 jquery ajax 在 asp.net 中提交值数据表

Question

我的数据表有 1 个输入列，用于输入电影租赁的返回日期，我想将该值发布到我的 ASP.NET [POST] 操作，但在发布之前，我尝试先在控制台中查看日期数据记录，并使用带有 get 方法的 url。在第一行它工作正常，但在下一行我的输入数据是空的

我的 HTML：

<table id="newrentals" class="table table-bordered table-hover" style="width:100%">
    <thead>
        <tr>
            <th>Customer name</th>
            <th>Date Rented</th>
            <th>Date Returned </th>
            <th>Movie name</th>
            <th>Rental Price</th>
            <th>Command</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

我的数据表和提交函数：

<script>
    $(document).ready(function () {
        var table = $("#newrentals").DataTable({
            ajax: {
                url: "/api/newrentals",
                method: "GET",
                dataSrc: ""
            },
            columns: [
                {
                    data: "customer.name"
                },
                {
                    data: "dateRented"
                },
                {
                    data: "dateReturned",
                    render: function (data, type, newrentals) {
                        if (data == null)
                            return "<input required id='dateReturned-id' name='dateReturned1' type='text' class='form-control'>"
                                + "< button class='btn btn-primary js-submit1' data - returned - id=" + newrentals.id + " > Returned</button > ";
                               
                        return "<input id='dateReturned' name='dateReturned' type='text' class='form-control' value=" + data + ">";
                    }
                },
                {
                    data: "movie.name"
                },
                {
                    data: "movie.rentalPrice"
                },
                {
                    data: "id",
                    render: function (data,type, newrentals) {
                        return "<button class='btn btn-primary js-submit2' data-submit-id=" + data + ">Submit payment</button>";
                    }
                }
            ]
        });

        /////////////////////////////// SUBMIT THE TEXT BOX INPUT try to see the data first in console log ///////////////////////////
        $("#newrentals").on("click", ".js-submit1", function () {
            var button = $(this)
            bootbox.confirm("Are you sure to add return date?", function (result) {
                if (result) {
                    var dateVal = $("#dateReturned-id").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 () {
                        $("#dateReturned").val("");
                    });
                }
            });
        });
        
    });
</script>

我的网页：

Rental Web page

当我尝试在除第一行之外的另一行中填充数据时，我的输入数据为空但没有出现任何错误，有人可以帮我解决这个问题吗？提前致谢

Answer 1

它仅适用于第一行的原因是因为您使用其 ID 来识别输入，但所有输入 ID 都是相同的，并且您只能在页面上拥有一个具有特定 ID 的元素。所以 JQuery 定位它找到的第一个并忽略所有其他的。

试试这个（为简洁起见，我截断了你的代码）：

$("#newrentals").on("click", ".js-submit1", function () {
    const button = $(this);
    const dateVal = button.siblings('input').val();
});