如何使用ASP.NET MVC通过Ajax将选中的行发送到服务器？
战神
我有一个鞋类列表表，在每行的最后一秒中都有复选框<th>Area</th>（如服务器中的布尔值）。
<a class="btn btn-primary float-right btn-sm text-white" id="cambiarAreaE">Trasladar a Ensuelado</a>
<table id="tabla-alistados" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Cod.</th>
<th class="text-red">Ref. Solicitud</th>
<th class="text-red">Ref. Pedido</th>
<th>Imagen</th>
<th>Talla</th>
<th>Atraso por</th>
<th>Area</th>
<th class="text-center">Acciones</th>
</tr>
</thead>
<tbody>
@foreach (var detalle in Model.DetalleSolicitud)
{
<tr>
<td> ...
<td>
<td> ...
<td>
<td> ...
<td>
<td> ...
<td>
<td> ...
<td>
<td> ...
<td>
<td class="text-center">
@detalle.Produccion.Area
<br /><br />
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="checkbox" id="checkboxPrimary1" class="checkboxAlistados" style="width: 25px; height: 25px">
<label for="checkboxPrimary1"> </label>
</div>
</div>
</td>
<td class="text-center"> ... </td>
</tr>
}
</table>
这就是渲染方式，倒数第二个复选框： 
我正在尝试仅将已检查的行发送给控制器，但是...我认为简单快捷的方法是将所有Id作为在其行中检查的数组发送。
这就是我在Jquery中的功能：
$("#cambiarAreaE").click(function (e) {
e.preventDefault();
var checkedIds = new Array();
var table = $("#tabla-alistados tr").children("td");
$.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'json',
type: 'POST',
data: checkedIds,
url: "/Produccion/CambiarAreas/",
success: function (result, state) {
location.reload();
},
error: function () {
alert("Un error interno ha ocurrido.")
}
});
});
我该如何解决？这使我非常困难，因为有很多行，而且我不知道如何编写代码。
斯瓦蒂
您可以使用each循环遍历.checkboxAlistados被检查的对象，然后使用column的.closest()get值Cod并将其推入array中。
演示代码：
$("#cambiarAreaE").click(function(e) {
e.preventDefault();
var checkedIds = new Array();
//loop through tbody > class checkboxAlistados
var selectors = $("#tabla-alistados tbody .checkboxAlistados:checked");
selectors.each(function() {
//get closest tr and then get Cod value
checkedIds.push($(this).closest('tr').find("td:eq(0)").text())
});
console.log(checkedIds)
//your ajax call ..do JSON stringify
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tabla-alistados" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Cod.</th>
<th class="text-red">Ref. Solicitud</th>
<th class="text-red">Ref. Pedido</th>
<th>Imagen</th>
<th>Talla</th>
<th>Atraso por</th>
<th>Area</th>
<th class="text-center">Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td> ...
</td>
<td> ...
</td>
<td> ...
</td>
<td> ...
</td>
<td> ...
</td>
<td class="text-center">
@detalle.Produccion.Area
<br /><br />
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="checkbox" id="checkboxPrimary1" class="checkboxAlistados" style="width: 25px; height: 25px">
<label for="checkboxPrimary1"> </label>
</div>
</div>
</td>
<td class="text-center"> ... </td>
</tr>
<tr>
<td>13</td>
<td> ...
</td>
<td> ...
</td>
<td> ...
</td>
<td> ...
</td>
<td> ...
</td>
<td class="text-center">
@detalle.Produccion.Area
<br /><br />
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="checkbox" id="checkboxPrimary1" class="checkboxAlistados" style="width: 25px; height: 25px">
<label for="checkboxPrimary1"> </label>
</div>
</div>
</td>
<td class="text-center"> ... </td>
</tr>
<tr>
<td>14</td>
<td> ...
</td>
<td> ...
</td>
<td> ...
</td>
<td> ...
</td>
<td> ...
</td>
<td class="text-center">
@detalle.Produccion.Area
<br /><br />
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="checkbox" id="checkboxPrimary1" class="checkboxAlistados" style="width: 25px; height: 25px">
<label for="checkboxPrimary1"> </label>
</div>
</div>
</td>
<td class="text-center"> ... </td>
</tr>
</table>
<button id="cambiarAreaE">Click me</button>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
UITableView的项目向下滚动后更改颜色，然后快速备份
- 2
Linux的官方Adobe Flash存储库是否已过时？
- 3
用日期数据透视表和日期顺序查询
- 4
应用发明者仅从列表中选择一个随机项一次
- 5
Mac OS X更新后的GRUB 2问题
- 6
验证REST API参数
- 7
Java Eclipse中的错误13，如何解决？
- 8
带有错误“ where”条件的查询如何返回结果？
- 9
ggplot：对齐多个分面图-所有大小不同的分面
- 10
尝试反复更改屏幕上按钮的位置 - kotlin android studio
- 11
如何从视图一次更新多行（ASP.NET - Core）
- 12
计算数据帧中每行的NA
- 13
蓝屏死机没有修复解决方案
- 14
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 15
离子动态工具栏背景色
- 16
VB.net将2条特定行导出到DataGridView
- 17
通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException
- 18
在Windows 7中无法删除文件（2）
- 19
python中的boto3文件上传
- 20
当我尝试下载 StanfordNLP en 模型时，出现错误
- 21
Node.js中未捕获的异常错误，发生调用
我来说两句