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

Question

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

我的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>

My DataTable and submit function:

<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>

我的网页:

出租网页

当我尝试在除第一行以外的另一行填充数据时，我的输入数据为空但没有得到任何错误，可以有人帮助我解决这个问题吗?提前感谢

Answer 1

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

试试这个(为了简洁，我已经截断了你的代码):

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