ASP.NET Core 3.1 MVC论坛如何在帖子详情页实现回帖编辑无需单独视图

1. 修改回帖列表的编辑按钮 #

把循环内的编辑按钮调整为携带回帖数据，点击时触发数据填充逻辑，不需要在循环内生成模态框：

@foreach (var reply in Model.Replies)
{
    <div class="row PostIndex-ReplyContent">
        <div class="ReplyContent-Container">
            <div class="PostContent-Header">
                @reply.CreatedOn
            </div>
            <div class="PostContent-Text">
                @Html.Raw(reply.ReplyContent)
            </div>
            <div class="PostContent-Footer">
                @if (User.Identity.Name == Model.AuthorName || User.IsInRole("Admin"))
                {
                    <!-- 把回帖ID和内容作为参数传入触发函数 -->
                    <a class="ClassicButton Button-EditPost" onclick="openReplyEditModal(@reply.Id, @Html.Raw(Json.Serialize(reply.ReplyContent)))">
                        Edit
                    </a>
                }
            </div>
        </div>
    </div>
}

2. 把回帖编辑模态框移到循环外部 #

全局只保留一个模态框，表单控件的name属性要和接收模型PostReplyModel的属性名对应，保证提交时参数能正常绑定：

<!-- 全局唯一的回帖编辑模态框，放在foreach循环外 -->
<div class="modal fade" id="modalEditPostReply" tabindex="-1" role="dialog" aria-labelledby="modalEditPostReplyLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="EditPostFormHeader">
                编辑回帖
            </div>
            <form class="EditPostForm" asp-controller="Post" asp-action="EditReply" method="post">
                <!-- 存储当前编辑的回帖ID -->
                <input type="hidden" name="Id" id="editReplyId" />
                <!-- 补充PostId，用于编辑完成后跳转回原帖子页 -->
                <input type="hidden" name="PostId" value="@Model.Id" />
                <div class="EditPostTextarea">
                    <textarea rows="10" name="ReplyContent" id="editReplyContent" required></textarea>
                    <span class="text-danger" asp-validation-for="Replies.FirstOrDefault().ReplyContent"></span>
                </div>
                <div class="CreatePostButtonRow">
                    <input type="submit" value="提交修改" />
                </div>
            </form>
        </div>
    </div>
</div>

3. 添加JS逻辑完成数据填充和模态框弹出 #

在视图底部添加对应JS函数，点击编辑按钮时把对应回帖的数据填充到模态框的表单控件中：

<script>
function openReplyEditModal(replyId, replyContent) {
    // 给表单控件赋值
    document.getElementById('editReplyId').value = replyId;
    document.getElementById('editReplyContent').value = replyContent;
    // 弹出模态框（Bootstrap 5 写法）
    new bootstrap.Modal(document.getElementById('modalEditPostReply')).show();
    // 如果使用Bootstrap 3/4，替换为下面的jQuery写法
    // $('#modalEditPostReply').modal('show');
}
</script>

4. 补充模型缺失属性 #

你当前的PostReplyModel缺少控制器跳转需要的PostId属性，补上即可：

public class PostReplyModel
{
    public int Id { get; set; }
    public int PostId { get; set; } // 新增字段，存储所属帖子ID
    public DateTime CreatedOn { get; set; }
    public string ReplyContent { get; set; }
}

原问题原因说明 #

之前把模态框放在循环里会出现问题，本质是所有模态框的id重复，点击按钮只会触发第一个匹配id的模态框，同时多个表单的name属性完全重复，提交时会出现参数绑定冲突，现在全局只保留一个模态框，动态填充数据，完全规避了冗余和冲突问题。

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