Pass current model to a Partial View in ASP.NET Core

Question

I am working on an ASP.NET Core MVC application and i want to make CRUD operations using Modal popup. I used this code to display the Edit partial popup:

Index.cshtml:

@model IEnumerable<WebApplication4.Models.Product>

@{
    ViewData["Title"] = "Index";
}

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addProduct">
    Add Product
</button>
<hr />
<table class="table table-bordered table-hover">
    <thead>
        ....
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            ....

            <td>
                <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#EditProduct" data-url="@Url.Action($"Edit/{item.Id}")">
                    Edit
                </button>

                @await Html.PartialAsync("_EditProductPartialView", item)
                |
                <button type="button" class="btn btn-danger">
                    Delete
                </button>
            </td>
        </tr>
        }
    </tbody>
</table>

@await Html.PartialAsync("_ProductPartialView", new Product())

_EditProductPartialView.cshtml

    @model Product

<div class="modal fade" id="EditProduct" aria-labelledby="EditProductLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="EditProductLabel">Product</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form asp-action="Edit">
                    <div class="form-group">
                        <input type="hidden" asp-for="Id" />
                        <label asp-for="ProductName" class="control-label"></label>
                        <input asp-for="ProductName" class="form-control" />
                        <span asp-validation-for="ProductName" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="Category" class="control-label"></label>
                        <input asp-for="Category" class="form-control" />
                        <span asp-validation-for="Category" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="Quantity" class="control-label"></label>
                        <input asp-for="Quantity" class="form-control" />
                        <span asp-validation-for="Quantity" class="text-danger"></span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

But this code displays only the first Product item in a modal popup everytime when i click the Edit button in all Product items. So how to pass the current model from Index page to the partial view?

Answer 1

<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#EditProduct" data-url="@Url.Action($"Edit/{item.Id}")">

We can find that you set data-target with "#EditProduct" in your loop, which would cause Modal popup JS library always find the first modal/element with Id = "EditProduct" then open it.

To open different modal when you click edit button in different table row(s), you can set data-target with specific item info, like below.

<button type="button" class="btn btn-warning" data-toggle="modal" data-target="@("#EditProduct-"+item.Id)" data-url="@Url.Action($"Edit/{item.Id}")">
    Edit
</button>

And set id attribute with same item info in partial view.

@model Product

<div class="modal fade" id="EditProduct-@Model.Id" aria-labelledby="EditProductLabel">
    <div class="modal-dialog">