Partial View Does not render correctly with dynamic id?

Question

i am trying to render partial view(reusable) in order to delete customer with cus_id within table(list of Customers) but every time i submit form only first row id is submitting please tell me correct solution.

 @foreach (var item in Model)
   {
    ....
    <td>
      @await Html.PartialAsync("~/Views/Shared/Modal.cshtml", item.cus_id)
         @*<partial name="~/Views/Shared/Modal.cshtml" for="@item.cus_id"/>*@

      </td>


   }

Here is My View

@model int


<span>
    <a href="#/" data-toggle="modal" data-target="#myModal"><i class="fas fa-trash-alt" title="Delete"></i></a>
</span>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header ">
                <h4 class="modal-title">Warning</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form asp-action="Delete" asp-route-id="@Model" method="post">
                    <span>
                        <span><b>Are you sure you want to delete?</b></span>
                        <button type="submit" class="btn btn-danger">Yes</button>
                        <a href="#/" class="btn btn-primary" data-dismiss="modal">No</a>
                    </span>
                </form>
            </div>

        </div>

    </div>
</div>

Answer 1

The problem is in your partial view.

<a href="#/" data-toggle="modal" data-target="#myModel"><i class="fas fa-trash-alt" title="Delete"></i></a>

You used the id selector, it will always select the first modal which id is "myModel". While all the modals' ids are the same. So, every time you submit, only the first row id is submitting.

You can apply the cus_id to the modal id to distinguish which modal should be opened.

<span>
    <a href="#/" data-toggle="modal" data-target="#myModal_@Model"><i class="fas fa-trash-alt" title="Delete"></i></a>
</span>

<div id="myModal_@Model"  class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header ">
                <h4 class="modal-title">Warning</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form asp-action="Delete" asp-route-id="@Model" method="post">
                    <span>
                        <span><b>Are you sure you want to delete @Model?</b></span>
                        <button type="submit" class="btn btn-danger">Yes</button>
                        <a href="#/" class="btn btn-primary" data-dismiss="modal">No</a>
                    </span>
                </form>
            </div>
        </div>
</div>