ASP.NET Core：传递当前模型至Partial View解决弹窗显示异常

你遇到的核心问题是HTML元素ID重复：在循环渲染_EditProductPartialView时，每个模态框的ID都是EditProduct，浏览器只会识别第一个匹配该ID的元素，所以无论点击哪个编辑按钮，都会弹出第一个产品的模态框。

下面提供两种常用的修复方案，你可以根据场景选择：

方案1：为每个模态框生成唯一ID #

通过产品ID区分每个模态框，确保按钮和对应模态框的ID一一匹配。

修改Index.cshtml #

调整编辑按钮的data-target属性，绑定到带产品ID的唯一模态框，并保留Partial视图的调用：

@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>
                <!-- 修改data-target为带ID的唯一值 -->
                <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#EditProduct-@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 #

将模态框的ID、标题ID等都替换为带产品ID的唯一值：

@model WebApplication4.Models.Product

<!-- 生成唯一的模态框ID -->
<div class="modal fade" id="EditProduct-@Model.Id" aria-labelledby="EditProductLabel-@Model.Id" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <!-- 生成唯一的标题ID -->
                <h5 class="modal-title" id="EditProductLabel-@Model.Id">编辑产品 #@Model.Id</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>

方案2：使用AJAX动态加载单个模态框 #

只渲染一个空模态框，点击编辑按钮时通过AJAX请求加载对应产品的编辑表单，这种方式更高效，适合产品数量较多的场景。

修改Index.cshtml #

保留单个空模态框，编辑按钮通过点击事件触发AJAX请求：

@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>
                <!-- 添加data-id存储产品ID，绑定点击事件 -->
                <button type="button" class="btn btn-warning edit-btn" data-id="@item.Id">
                    Edit
                </button>
                |
                <button type="button" class="btn btn-danger">
                    Delete
                </button>
            </td>
        </tr>
        }
    </tbody>
</table>

<!-- 单个空模态框容器 -->
<div class="modal fade" id="EditProduct" aria-labelledby="EditProductLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="edit-modal-content">
            <!-- 内容将通过AJAX动态加载 -->
        </div>
    </div>
</div>

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

<script>
$(document).ready(function() {
    $('.edit-btn').click(function() {
        var productId = $(this).data('id');
        // 发送AJAX请求获取编辑表单
        $.get('/Product/Edit/' + productId, function(data) {
            $('#edit-modal-content').html(data);
            $('#EditProduct').modal('show');
        });
    });
});
</script>

修改Controller的Edit方法 #

让Edit方法返回Partial视图：

public IActionResult Edit(int id)
{
    var product = _db.Products.Find(id); // 替换为你的数据查询逻辑
    if (product == null)
    {
        return NotFound();
    }
    return PartialView("_EditProductPartialView", product);
}

修改_EditProductPartialView.cshtml #

移除外层的模态框容器，只保留表单内容：

@model WebApplication4.Models.Product

<div class="modal-header">
    <h5 class="modal-title" id="EditProductLabel">编辑产品 #@Model.Id</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>

• 方案1：实现简单，适合产品数量较少的场景，页面初始化时渲染所有模态框。
• 方案2：减少页面初始HTML体积，加载更高效，适合产品数量较多的场景。

内容的提问来源于stack exchange，提问作者user4374239