always getting the value of first item in list when posting

Question

the [email protected] is always the value of first item in list and if any one can help me with sending the id directly to modal i will be thankfull

    @foreach (var item in Model.GetContracts)
    {   
<tr>
    <td>@item.Plate</td>
    <td>@item.Cname</td>

    <td>@item.CheckIn.ToString("dd/MM/yyyy")</td>
    <td>@item.CheckOut.ToString("dd/MM/yyyy")</td>
    <td>@item.Price</td>
    <td>@item.Paid</td>
    <td>@item.Deposit</td>
    <td>@item.Note</td>
    <td>@item.Id</td>
       
        
    <td><Button type="button" class="btn btn-success" data-toggle="modal" data-target="#Returned" onclick="getId">إغلاق العقد</Button></td>

    <td><a class="btn btn-warning" asp-page="Returned" asp-route-Id="@item.Id">إغلاق العقد</a></td>
    <td><a class="btn btn-warning" asp-page="CheckOut" asp-route-Id="@item.Id">تجديد</a></td>

    <td>
        <div class="modal fade" id="Returned" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle"></h5>
                        <button type="button" cl ass="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" asp-page-handler="Returned" asp-route-id="@item.Id">
                            @item.Id



                            <input type="date" asp-for="@Model.Update" />

                            <input type="submit" class="btn btn-primary" />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </td>

        
</tr>

    }

any help please even if any server side lang may help

Answer 1

Your modal actually passed the correct id, but the button does not trigger correct modal because the data-target is always the same. That is why you always get the modal with the first id.

Add an index to specify the modal id:

@{  int i = 0; }   //add this...
@foreach (var item in Model.GetContracts)
{
    <tr>
        <td>@item.Plate</td>
        //....
        <td>@item.Id</td>
                                                            //change here...
        <td><Button type="button" class="btn btn-success" data-target="#Returned_@i" data-toggle="modal" onclick="getId">إغلاق العقد</Button></td>    
        <td>
                                     //change here...
            <div class="modal fade" id="Returned_@i" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLongTitle"></h5>
                            <button type="button" cl ass="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form method="post" asp-route-id="@item.Id">
                                @item.Id            
                                <input type="date" asp-for="@Model.Update" />  
                                <input type="submit" class="btn btn-primary" />
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    i++;    //add this...
}