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

Posted 2023-03-09

【中文标题】如何使用 jquery ajax 在 asp.net 中提交值数据表

【英文标题】：How to submit value datatable in asp.net using jquery ajax

【发布时间】：2021-11-21 16:47:41

【问题描述】：

我的数据表有 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

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

【参考方案1】：

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

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

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

【讨论】：

感谢您的解决方案，但是当我尝试它时，现在控制台日志上的值未定义，有什么建议吗？谢谢之前

@marcellusdenta 我的错误，closest() 找到了父元素，所以在这种情况下它将是td。请改用siblings()。我已经编辑了我的答案。

非常感谢您的帮助，它对我来说非常适合

如果某个答案对您有用，您可以对其进行投票和/或将其标记为已接受以表示感谢，这也有助于提高该人的声誉。 ***.com/tour