0

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?

1 Answer 1

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="[email protected]" aria-labelledby="EditProductLabel">
    <div class="modal-dialog">
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.