How to use Form into foreach loop in Razor view-CodePudding

I used sweet alert dialog to confirm the deletion. When I enter the model id value in the form, the correct value is not sent and one less number is sent.

The correct id value is sent without using the Form.

Please tell me where the problem is and how I can solve it.

$(".ajax_delete1").on("click", function validateForm(event) {
  event.preventDefault(); // prevent form submit
  var form = $('#ppp'); // storing the form
  swal({
      title: "آیا از پاک کردن این ایتم مطمئن هستید",
      text: "این ایتم اگر حذف شود دیگر قابل بازگردانی نیست!",
      icon: "warning",
      showCancelButton: true,
      dangerMode: true,
      confirmButtonColor: '#DD6B55',
      confirmButtonText: "حذف",
      cancelButtonText: "انصراف",

    })
    .then((willDelete) => {
      if (willDelete) {

        form.submit();
      } else {
        swal("فایل شما پاک نشد!");
      }
    });
});

@foreach (var item in Model) {

<tr>
  <td>@item.projectName</td>
  <td>@item.projectMagName</td>
  <td style="width:250px">

    <div class="text-center row d-flex justify-content-between">
      <div class="mt-1">
        <a class="fa fa-edit" style="font-size:28px;color:darkblue" asp-controller="Home" asp-action="EditProject" asp-route-id="@item.projectID"></a>
      </div>

      <div style="margin-top:3px">


        <form asp-controller="Home" asp-action="RemoveProject" asp-route-id="@item.projectID" method="post" id="pop">

          <a class="fa fa-trash-o ajax_delete1" style="font-size: 28px; color: red; cursor: pointer;"></a>


        </form>
      </div>

      <div style="margin-top:1px">
        <a class="btn btn-sm btn-outline-primary" asp-controller="Home" asp-action="ProjectDetails" asp-route-id="@item.projectID">جزئیات</a>

        <a class="btn btn-sm btn-outline-secondary" asp-controller="Home" asp-action="PayShow" asp-route-id="@item.projectID">دسترسی</a>
      </div>

    </div>


  </td>


</tr>

}

CodePudding user response：

According to your description, I found you use $('#pop');, if you use query codes, it will always use the first form.

I suggest you could try to use var form = event.target.closest("form");, this will find the A tag's closet form element.

More details, you could refer to below codes:

$(".ajax_delete1").on("click", function validateForm(event) {
  event.preventDefault(); // prevent form submit
  var form = event.target.closest("form"); // storing the form
  swal({
      title: "آیا از پاک کردن این ایتم مطمئن هستید",
      text: "این ایتم اگر حذف شود دیگر قابل بازگردانی نیست!",
      icon: "warning",
      showCancelButton: true,
      dangerMode: true,
      confirmButtonColor: '#DD6B55',
      confirmButtonText: "حذف",
      cancelButtonText: "انصراف",

    })
    .then((willDelete) => {
      if (willDelete) {

        form.submit();
      } else {
        swal("فایل شما پاک نشد!");
      }
    });
});