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

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"  data-toggle="modal" data-target="#addProduct">
    Add Product
</button>
<hr />
<table >
    <thead>
        ....
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            ....

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

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

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

_EditProductPartialView.cshtml

    @model Product

<div  id="EditProduct" aria-labelledby="EditProductLabel" aria-hidden="true">
    <div >
        <div >
            <div >
                <h5  id="EditProductLabel">Product</h5>
                <button type="button"  data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div >
                <form asp-action="Edit">
                    <div >
                        <input type="hidden" asp-for="Id" />
                        <label asp-for="ProductName" ></label>
                        <input asp-for="ProductName"  />
                        <span asp-validation-for="ProductName" ></span>
                    </div>
                    <div >
                        <label asp-for="Category" ></label>
                        <input asp-for="Category"  />
                        <span asp-validation-for="Category" ></span>
                    </div>
                    <div >
                        <label asp-for="Quantity" ></label>
                        <input asp-for="Quantity"  />
                        <span asp-validation-for="Quantity" ></span>
                    </div>
                    <div >
                        <button type="button"  data-dismiss="modal">Close</button>
                        <button type="submit" >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?

CodePudding user response：

<button type="button" 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"  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  id="[email protected]" aria-labelledby="EditProductLabel">
    <div >