ASP.NET WebForms中Bootstrap3模态框按钮：阻止表单提交并保留服务器端回发

我之前也踩过类似的坑，WebForms的按钮在Bootstrap模态框里总是容易触发意外的表单提交，结合你的情况，给你几个靠谱的解决步骤：

1. 给Button控件设置关键属性 #

ASP.NET的Button控件默认会渲染成type="submit"，而且会自动触发页面验证，这大概率是你问题的根源。直接在服务器端控件上设置两个属性就能解决大部分问题：

• UseSubmitBehavior="false"：让按钮渲染成type="button"，通过__doPostBack来触发服务器端事件，而非默认的表单提交行为
• CausesValidation="false"：阻止按钮点击时触发页面的验证控件（刚好对应你提到的验证摘要触发的问题）

你的Button控件代码应该改成这样：

<asp:Button ID="Button1" runat="server" Text="你的按钮文本" 
    UseSubmitBehavior="false" CausesValidation="false" 
    OnClick="Button1_Click" />

2. 补充JS事件处理（可选） #

如果上面的设置还没解决问题，可能是模态框的点击事件冒泡导致的，可以在按钮的客户端点击事件里加上阻止冒泡的逻辑，同时确保回发正常执行：

function handleModalButtonClick(e) {
    // 阻止事件冒泡和默认提交行为
    e.preventDefault();
    e.stopPropagation();
    // 手动触发服务器端回发
    __doPostBack('<%= Button1.ClientID %>', '');
}

然后给按钮加上OnClientClick属性：

<asp:Button ID="Button1" runat="server" Text="你的按钮文本" 
    UseSubmitBehavior="false" CausesValidation="false" 
    OnClick="Button1_Click" OnClientClick="handleModalButtonClick(event);" />

3. 检查模态框结构 #

确保你的模态框没有嵌套在表单的错误位置，或者没有其他绑定了提交事件的父元素。Bootstrap模态框的标准结构应该是：

<div class="modal fade" id="verifiedApplicantAddress" tabindex="-1" role="dialog" aria-labelledby="modalTitle">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- 模态框头部、主体内容 -->
            <div class="modal-footer">
                <asp:Button ID="Button1" runat="server" ... />
            </div>
        </div>
    </div>
</div>

这样设置之后，按钮就能只触发你需要的服务器端Button1_Click事件，不会意外触发表单提交或者页面验证了。

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