ASPX页面第二个模态框点击提交按钮无法触发PostBack求助

这个问题我之前帮好几个开发者解决过——核心原因就是ASP.NET WebForms的表单机制和你嵌套的独立<form>标签冲突了！

ASP.NET WebForms是基于单一服务器端表单工作的：整个页面只能有一个<form runat="server">，所有需要触发PostBack的服务器控件（比如你的asp:Button）必须放在这个表单内部。你现在给每个模态框都加了独立的<form>标签，不管带不带runat="server"，都会打乱WebForms的回发事件捕获逻辑，尤其是第二个模态框的控件根本没被主表单覆盖，自然触发不了PostBack。而且你调换顺序后第二个还是失效，就是因为不管哪个模态框在后面，它的控件都处于主表单的"管辖范围外"。

1. 移除所有模态框内部的<form>标签 #

把两个模态框里的所有<form>（包括你写的<form class="form-inline">、<form role="form">这些）全部删掉，所有控件直接放在模态框的<div>结构里就行。

2. 确保所有服务器控件都在页面主<form runat="server">内 #

检查你的页面结构，把两个模态框的完整代码都移到页面唯一的<form runat="server">标签内部——WebForms的服务器控件只有在这个表单里才能被识别并触发回发。

3. 修正控件ID冲突 #

你两个模态框里都用了id="lblnameid"（一个是<asp:TextBox>，一个是普通<input>），这会导致客户端ID重复，可能干扰JS和回发逻辑。把它们改成唯一ID，比如第一个叫txtUpdateName，第二个叫txtAddName。

4. 确认后台事件方法存在 #

你的btnSubmit绑定了OnCommand="btnSubmit_Click"，但后台代码里只贴了Page_Load，要确保后台有对应的事件处理方法：

protected void btnSubmit_Click(object sender, CommandEventArgs e)
{
    // 这里写你的新增逻辑
}

修改后的ASPX核心代码示例 #

<!-- 页面主表单，整个页面只有这一个 -->
<form runat="server">
    <!-- 你的GridView代码放在这里 -->

    <!-- 第一个模态框 myModal -->
    <div id="myModal" class="modal fade">
        <script type="text/javascript">
            function openModal() {
                $('[id*=myModal]').modal('show');
            }
        </script>
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title">Update Data</h2>
                </div>
                <div class="modal-body">
                    <!-- 移除了原来的<form>标签 -->
                    <div class="control-group">
                        <div class="controls controls-row">
                            <label for="txtUpdateName" class="col-sm-2 control-label">Name</label>
                            <div class="col-sm-6">
                                <asp:TextBox ID="txtUpdateName" runat="server" Text="" CssClass="form-control"></asp:TextBox>
                            </div>
                            <label for="rankid" class="col-sm-1 control-label">Rank</label>
                            <div class="col-sm-3">
                                <asp:DropDownList id="rankid" runat="server" CssClass="form-control" SelectedValue='<%# Eval("rank") %>' TabIndex='<%# TabIndex %>'>
                                    <asp:ListItem Value=""></asp:ListItem>
                                    <asp:ListItem Value="a"> A </asp:ListItem>
                                    <asp:ListItem Value="b"> B </asp:ListItem>
                                    <asp:ListItem Value="c"> C </asp:ListItem>
                                </asp:DropDownList>
                            </div>
                        </div>
                    </div>
                    <p></p>
                    <div class="control-group">
                        <div class="col-sm-10">
                            <asp:TextBox ID="id" type="hidden" runat="server" Text="" CssClass="form-control"></asp:TextBox>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="pull-right">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                <asp:Button ID="btnUpdate" class="btn btn-default" runat="server" Text="Save" CommandArgument='<%# Eval("Id") %>' OnCommand="btnUpdate_Click" />
                            </div>
                        </div>
                    </div>
                </div><!-- /.modal-body -->
                <div class="modal-footer">
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- 第二个模态框 addModal -->
    <div id="addModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <script type="text/javascript">
            $('#addModal').on('hidden.bs.modal', function () {
                $(this).find('input').val(''); // 用这个方式重置输入框，因为原来的form reset没用了
            })
        </script>
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <!-- 移除了原来的<form>标签 -->
                            <div class="form-horizontal" role="form">
                                <fieldset>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" for="txtAddName">Name</label>
                                        <div class="col-sm-6">
                                            <input type="text" id="txtAddName" class="form-control">
                                        </div>
                                    </div>
                                </fieldset>
                                <div class="modal-footer">
                                    <asp:Button ID="btnSubmit" class="btn btn-primary" runat="server" Text="Save" CommandArgument='<%# Eval("Id") %>' OnCommand="btnSubmit_Click" />
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> <!-- /.modal-body -->
            </div> <!-- /.modal-content -->
        </div> <!-- /.modal-dialog -->
    </div>
</form>

额外注意点 #

• 取消按钮不要用type="submit"，改成type="button"并加上data-dismiss="modal"，避免触发不必要的表单提交。
• 原来的模态框重置逻辑，因为移除了form，所以改成直接清空input的value，比如$(this).find('input').val('')。

这样调整后，两个模态框里的服务器按钮都能正常触发PostBack了——本质就是让所有需要回发的控件都回到WebForms的主表单管辖范围内，去掉多余的form干扰。

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