How to use Form in FOREACH with ASP.NET - asp.net-core

Question

The problem is when I use the form inside ModalDialog and put Modal in a loop. If I have several records.
The problem is when I use the form inside ModalDialog and put Modal in a loop. If I have several records.
When I select each record, only the first record information is sent. Please check and help
When I select each record, only the first record information is sent. Please check and help
#{ var count = 0;}
#foreach (var item in Model.ProjectViewModels)
{
<tr>
#if (item.PersonState == 1)
{
<td style="width:35px; color:black;">
<span class="badge badge-success" style="width:50px; border-radius:15px;">
فعال
</span>
</td>
}
else
{
<td style="width:35px; color:black;">
<span class="badge badge-danger" style="width:50px; border-radius:15px;">
غیرفعال
</span>
</td>
}
<td>#item.PersonName #item.Family</td>
<td>#item.PersonCode</td>
<td>#item.projectName</td>
<td style="width:300px">
#if (item.PersonState == 1)
{
<div class="text-center row d-flex justify-content-between">
<div style="margin-top:3px">
<a class="fa fa-edit" style="font-size:28px;color:darkblue" asp-controller="Home" asp-action="updatePerson" asp-route-id="#item.PersonID"></a>
</div>
<form asp-controller="Home" asp-action="RemovePerson" asp-route-id="#item.PersonID" method="post">
<a value="submit" class="fa fa-trash-o ajax_delete1 " style="font-size: 27px; color: red; cursor: pointer;"> </a>
</form>
<div>
<a class="btn btn-sm btn-outline-primary" asp-controller="Home" asp-action="detailsPerson" asp-route-id="#item.PersonID">جزئیات</a>
<a class="btn btn-sm btn-outline-secondary" asp-controller="Report" asp-action="SingelGhrardad" asp-route-id="#item.PersonID">قرارداد</a>
<a class="btn btn-sm btn-outline-danger" data-toggle="modal" data-target="#myModal#(count)">ترک کار</a>
<!-- The Modal -->
<div class="modal fade" id="myModal#(count)">
<div class="modal-dialog ">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">ثبت تاریخ ترک کار پرسنل</h4>
</div>
<!-- Modal body -->
<div class="modal-body">
<form asp-controller="Home" asp-action="PersonTarkKar" asp-route-id="#item.PersonID" asp-route-PersonNewState="0" method="post">
<div class="row">
<div class="col-md-5 col-xs-12">
<label>تاریخ ترک کار</label>
<div class="input-group" style="padding-left:9px; padding-right:9px;">
<div class="input-group-addon"
style="border:1px solid gray; padding:6px">
<span> <i class="right fa fa-calendar"></i></span>
</div>
<input id="calender1" name="calender1" type="text" required autocomplete="off" class="form-control" />
</div>
</div>
</div>
<button class="btn btn-dark mt-5" type="submit">ثبت تاریخ</button>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
#{count++;}
</div>
</div>
}
#section Scripts{
<script>
$('#calender1').MdPersianDateTimePicker({
targetTextSelector: '#calender1',
});
</script>
}

Answer 1

When I select each record, only the first record information is sent. Please check and help
That is because your modal ids are always the same.
You need change your view like below:
#{ var i = 0; }
#foreach (var item in Model.ProjectViewModels)
{
<tr>
//...
<td style="width:300px">
#if (item.PersonState == 1)
{ //change here......
<a class="btn btn-sm btn-outline-danger"
data-toggle="modal" data-target="#myModal_#i">ترک کار</a>
<!-- The Modal -->
//change here...........
<div class="modal fade" id="myModal_#i">
<div class="modal-dialog ">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">ثبت تاریخ ترک کار پرسنل</h4>
</div>
<!-- Modal body -->
<div class="modal-body">
//...
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
}
</td>
</tr>
i++; //add this.......
}
Update:
You need loop the js like below:
#section Scripts
{
<link href="/lib/md.bootstrappersiandatetimepicker/dist/jquery.md.bootstrap.datetimepicker.style.css" rel="stylesheet" />
<script src="/lib/md.bootstrappersiandatetimepicker/dist/jquery.md.bootstrap.datetimepicker.js"></script>
<script>
for (j = 0; j < #Model.ProjectViewModels.Count(); j++)
{
$('#calender_'+j).MdPersianDateTimePicker({
targetTextSelector: '#calender_'+ j,
});
}
</script>
}
Change:
<input id="calender" name="calender1" type="text" required autocomplete="off" class="form-control" />
To:
<input id="calender_#i" name="calender1" type="text" required autocomplete="off" class="form-control" />