asp.net - How to use Modal Form into loop in Razor view

Question

I used the modal form to send a user value And I put a form inside the modal and put the modal in a loop to get the value of the selected user ID and send. 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.

  @foreach (var item in Model.ProjectViewModels)
            {


                <tr>
                    <td>@item.PersonName @item.Family</td>
                    <td>@item.PersonCode</td>

                    <td>@item.projectName</td>

                                <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">??? ???</a>
                                    <!-- The Modal -->
                                    <div class="modal fade" id="myModal">
                                        <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-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" />
                                                                    <input  name="id" value="@item.PersonID" class="form-control d-none" />

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

                        }



                    </td>

                </tr>

            }

public IActionResult PersonTarkKar(int id ,int PersonNewState,String calender1 )
{
    var per = _context.Persons.Find(id);

    per.PersonState = PersonNewState;
    per.PersonTarkKarDate = calender1;

    _context.SaveChanges();

    return RedirectToAction("allPerson");
}

Answer 1

Your modal id is not unique,so when you click button,it will open the same modal,so the hidden input will be the same one.Try to make your modal id unique,so that it will open the right modal each time.

@{ var count = 0;}
@foreach (var item in Model.ProjectViewModels)
            {


                <tr>
                    <td>@item.PersonName @item.Family</td>
                    <td>@item.PersonCode</td>

                    <td>@item.projectName</td>

                                <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-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" />
                                                                    <input  name="id" value="@item.PersonID" class="form-control d-none" />

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

                        }



                    </td>

                </tr>

            }

Update: If you use calender1@ (count),try to do like this:

$(function () {
            for (var i = 0; i <@(count); i++) {
                $('#calender1' + i).MdPersianDateTimePicker({ targetTextSelector: '#calender1' + i, });
            }
            
        })