如何使用 Ajax 在循环中单独发送记录
Posted
技术标签:
【中文标题】如何使用 Ajax 在循环中单独发送记录【英文标题】：how to Send records within the loop individually with Ajax 【发布时间】：2021-12-07 06:07:13 【问题描述】：我想用 Ajax 将循环内的记录一一发送和保存。每条记录都有一个发送信息的按钮。 但是当我想将记录发送到action方法时，只发送第一条记录的信息。 我还想设置一个条件，如果用户从下拉列表中选择一个项目，则可以发送记录，否则将显示一条消息。
@model ModiranVira.ViewModels.GhrardadViewModel
@using ModiranVira.PublicClass
@
Layout = null;
string numSpace = "#,##0.###";
<div class="container-fluid mt-5">
<table class="table table-bordered table-striped text-sm">
<thead class="text-center">
<tr style="background-color:#416992; color: white">
<th>نوع قرارداد</th>
<th>مبلغ</th>
<th>تاریخ شروع</th>
<th>تاریخ پایان</th>
<th>تعین کارشناس</th>
<th>عملیات</th>
</tr>
</thead>
@foreach (var item in Model.ghrardads)
<tr>
@switch (@item.NoeaKhadmat)
case 1:
<td>حسابرسی</td>
break;
case 2:
<td>مالیاتی</td>
break;
case 3:
<td>منابع انسانی</td>
break;
<td>@item.MablghGhrardad</td>
<td>
@item.ShoroeeProjectDate
</td>
<td>
@item.PayanProjectDate
</td>
<input class="d-none" value="@item.id" id="GhradadID" />
<td>
<select class="form-control" id="TaeenKarShnas" required autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
@foreach (var item1 in Model.Users)
<option value="@item1.Id">@item1.FirstName @item1.Family</option>
</select>
</td>
<td class="text-center">
<button id="btnstap39" type="button" class="btn btn-sm btn-outline-success"> <i class="fa fa-save"> </i>ذخیره </button>
</td>
</tr>
</table>
<div id="ohsnap" class="col-md-4 col-xs-12 alert d-none" style="text-align:center;"></div>
</div>
<script>
$("#btnstap39").on('click', function ()
$.ajax(
type: "Post",
url: '@Url.Action("SubmitGhrardadStap39", "Project")',
data:
'GhradadID': $("#GhradadID").val(),
'TaeenKarShnas': $("#TaeenKarShnas").val(),
).done(function (res)
if (res.status == 'ok')
$("#ohsnap").removeClass('hidden').removeClass('alert-danger').addClass('alert-success').html('گام دوم با موفقیت ثبت شد');
setTimeout(function ()
$('#ohsnap').fadeOut('fast');
, 2000)
);
);
</script>
[HttpPost]
public IActionResult SubmitGhrardadStap39(int GhradadID, String TaeenKarShnas)
var ghrar = _context.Ghrardad.Find(GhradadID);
ghrar.UserID = TaeenKarShnas;
_context.SaveChanges();
return Json(new status = "ok" );
【问题讨论】：
【参考方案1】：根据您的描述，您无法发送第二个数据的原因是您使用jquery ID选择器选择了ID。但是您的所有表 GhradadID 和 TaeenKarShnas 都是相同的 ID，因此您将始终获得相同的（第一）行。为了解决这个问题，我建议您可以将项目 ID 放在输入中并选择 ID，然后单击按钮会找到每个不同的 ID。
我还想做一个条件，如果用户从下拉列表中选择一个项目，可以发送记录，否则将显示一条消息。
我建议您可以尝试在 ajax 之前创建一个条件，如果值为 null 则更改一些内容。
更多细节，您可以参考以下代码：
<div class="container-fluid mt-5">
<table class="table table-bordered table-striped text-sm">
<thead class="text-center">
<tr style="background-color:#416992; color: white">
<th>نوع قرارداد</th>
<th>مبلغ</th>
<th>تاریخ شروع</th>
<th>تاریخ پایان</th>
<th>تعین کارشناس</th>
<th>عملیات</th>
</tr>
</thead>
@foreach (var item in Model.ghrardads)
<tr>
@switch (@item.NoeaKhadmat)
case 1:
<td>حسابرسی</td>
break;
case 2:
<td>مالیاتی</td>
break;
case 3:
<td>منابع انسانی</td>
break;
<td>@item.MablghGhrardad</td>
<td>
@item.ShoroeeProjectDate
</td>
<td>
@item.PayanProjectDate
</td>
<input class="d-none" value="@item.id" id="@string.Format("GhradadID0",item.id)" />
<td>
<select class="form-control" id="@string.Format("TaeenKarShnas0",item.id)" required autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
@foreach (var item1 in Model.Users)
<option value="@item1.Id">@item1.FirstName @item1.Family</option>
</select>
</td>
<td class="text-center">
<button id="@item.id" type="button" class="btn btn-sm btn-outline-success ClicktPost"> <i class="fa fa-save"> </i>ذخیره </button>
</td>
</tr>
</table>
</div>
@section Scripts
<script>
$(".ClicktPost").on('click', function (event)
var id = event.target.id;
//Get the value according to Button's ID
var GhradadID = $("#GhradadID" + id).val();
var TaeenKarShnas = $("#TaeenKarShnas" + id).val();
//If the TaeenKarShnas is null alert something
if (TaeenKarShnas == '')
alert("please select dropdownlistvalue");
else
$.ajax(
type: "Post",
url: '@Url.Action("SubmitGhrardadStap39", "Home")',
data:
'GhradadID': GhradadID,
'TaeenKarShnas': TaeenKarShnas,
).done(function (res)
if (res.status == 'ok')
$("#ohsnap").removeClass('hidden').removeClass('alert-danger').addClass('alert-success').html('گام دوم با موفقیت ثبت شد');
);
);
</script>
结果：
如果不选择值，可以参考下图
如果你不选择值，你可以参考下图
【讨论】：
但是我隐藏了一个警报，当条件 res.status == 'ok' 正确时，此警报会在 2 秒后显示并消失，但仍仅适用于第一行.并且在发送第二条记录行信息时不会显示此警报。 我编辑了这个问题。请查看代码和帮助。谢谢 请指导我以上是关于如何使用 Ajax 在循环中单独发送记录的主要内容，如果未能解决你的问题，请参考以下文章
如何使用ajax将从jquery for循环创建的输入值发送到php [重复]
PHP 和 AJAX：如何在 PHP while 循环中显示 json_encode 数据？