I want to pass the value of @item.Id to a form out of this loop which is in the same razor page

@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"  data-toggle="modal" data-target="#Returned" onclick="getId">إغلاق العقد</Button></td>
        <td><a  asp-page="Returned" asp-route-Id="@item.Id">تجديد</a></td>
        
        
            
        
    </tr>
      }

I want to place the @item.Id in asp-route-id="@item.Id"

<!-- Modal for returned -->
<div  id="Returned" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div  role="document">
        <div >
            <div >
                <h5  id="exampleModalLongTitle"></h5>
                <button type="button" cl ass="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div >
                <form method="post" asp-page-handler="Returned" asp-route-id="">
                    
                    

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

                    <input type="submit"  />
                </form>
            </div>
        </div>
    </div>
</div>

ps: i cant put the form in the loop because it will always read the @item.Id of the first item in list because 'div cant be nested in a tr or table'

CodePudding user response：

You can add the form as a separate column for your table and pass your id there.

@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"  data-toggle="modal" data-target="#Returned" onclick="getId">إغلاق العقد</Button></td>
    <td><a  asp-page="Returned" asp-route-Id="@item.Id">تجديد</a></td>
    <td>
        <div >
            <form method="post" asp-page-handler="Returned" asp-route-id="@item.id">
               <input type="date" asp-for="@Model.Update" />

                <input type="submit"  />
            </form>
        </div>
    </td>
</tr>
}

CodePudding user response：

As @Yuri said, you could put the model popup inside the TD and inside the foreach loop. But you will find it will still just call first model, since the data-target="#Returned" just set target for the #Returned to avoid this action, I suggest you could try to modify your codes to use for loop instead of using the foreach and set the each row's return model popup id with return_@i.

More details, you could refer to below codes:

@for (int i=0; i<Model.Count; i  )
{
    
    <tr>
    <td>@Model[i].Plate</td>
    <td>@Model[i].Cname</td>

    <td>@Model[i].CheckIn.ToString("dd/MM/yyyy")</td>
    <td>@Model[i].CheckOut.ToString("dd/MM/yyyy")</td>
    <td>@Model[i].Price</td>
    <td>@Model[i].Paid</td>
    <td>@Model[i].Deposit</td>
    <td>@Model[i].Note</td>
    <td>@Model[i].Id</td>
       
        
    <td><Button type="button"  data-toggle="modal" data-target="#Returned_@i" onclick="getId">إغلاق العقد</Button></td>

    <td><a  asp-page="Returned" asp-route-Id="@Model[i].Id">إغلاق العقد</a></td>
    <td><a  asp-page="CheckOut" asp-route-Id="@Model[i].Id">تجديد</a></td>

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



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

                            <input type="submit"  />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </td>
    <td>
            <div  id="Returned_@i" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div  role="document">
                    <div >
                        <div >
                            <h5  id="exampleModalLongTitle"></h5>
                            <button type="button" cl ass="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div >
                            <form method="post" asp-route-id="@Model[i].Id">
                                @Model[i].Id            
                                <input type="date" asp-for="@Model[i].Update" />  
                                <input type="submit"  />
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </td>

  
</tr>

}