ASP.NET6 Razor Pages中Bootstrap5模态框提交按钮失效

Bootstrap 5 模态框初始化时默认会将自身DOM节点移动到<body>标签末尾，直接脱离了你页面上的<form>表单容器。按照原生表单提交规则，不在表单内部的提交按钮不会触发任何表单提交动作，这就是点击按钮无请求、后端方法不执行的根本原因，和后端handler命名、按钮样式类没有关系。

• 首先给页面的表单标签设置唯一id，示例：

<form method="post" id="postForm">
    <!-- 原有表单内容，包括外层Save按钮、模态框触发按钮全部保留在表单内 -->
    <div class="form-control">
        <input type="submit" value="Save" class="btn btn-primary"/>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
            Launch demo modal
        </button>
    </div>
</form>

• 修改模态框内的Save changes按钮，将type改为submit，添加form属性绑定上面定义的表单id，需要指定提交handler时正常加asp-page-handler属性即可，示例：

<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary" form="postForm">Save changes</button>
</div>

• 备选方案：如果不想用form属性绑定，可以在初始化模态框时修改appendTo配置，让模态框保留在你编写的原始位置（即表单内部），但这种方案可能受父元素的定位、overflow样式影响，优先选择前一种方案。

修改完成后清空浏览器缓存测试，点击模态框内按钮即可正常发起POST请求，对应后端OnPost方法会正常执行。

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