没有设置 UseSubmitBehavior="false" 的 ASP.Net 按钮 OnClick 不会启动

Question

晚上好，伙计们，我想在我的代码方面获得一些帮助，如果我的母版页中有模式，我的注册按钮中的 onclick 事件将不会启动，但如果我删除它，它会起作用。关于我应该怎么做的任何建议？这是我的代码

<div class="container mt-5 mb-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <header class="card-header">
                    <a href="#" class="float-right btn btn-outline-primary mt-1">Log in</a>
                    <h4 class="card-title mt-2">Sign up</h4>
                </header>
                <article class="card-body">
                    <div class="form-row mt-3">
                        <div class="col form-group">
                            <asp:Label ID="lblLastname" CssClass="col-form-label" runat="server" Text="Lastname:"></asp:Label>
                            <asp:TextBox ID="txtLastname" CssClass="form-control" runat="server" MaxLength="30" required="required"></asp:TextBox>             
                        </div>
                        <div class="col form-group">
                            <asp:Label ID="lblFirstname" CssClass="col-form-label" runat="server" Text="Firstname:"></asp:Label>
                            <asp:TextBox ID="txtFirstname" CssClass="form-control" runat="server" MaxLength="30" required="required"></asp:TextBox>       
                        </div>                     
                    </div>
                    <div class="form-row mt-3">
                        <div class="col form-group">
                            <asp:Label ID="lblUsername" CssClass="col-form-label" runat="server" Text="Username:"></asp:Label>
                            <asp:TextBox ID="txtUsername" CssClass="form-control" runat="server" MaxLength="40" required="required"></asp:TextBox>  
                        </div>
                        <div class="col form-group">
                            <asp:Label ID="lblPassword" CssClass="col-form-label" runat="server" Text="Password:"></asp:Label>
                            <asp:TextBox ID="txtPassword" CssClass="form-control" runat="server" TextMode="Password" required="required"></asp:TextBox>         
                        </div>                     
                    </div>
                    <div class="form-row mt-3">
                        <div class="col form-group">
                            <asp:Label ID="lblEmail" CssClass="col-form-label" runat="server" Text="Email:"></asp:Label>
                            <asp:TextBox ID="txtEmail" type="email" CssClass="form-control" runat="server" MaxLength="50" required="required"></asp:TextBox>        
                        </div>
                        <div class="col form-group">
                            <asp:Label ID="lblPhoneNumber" CssClass="col-form-label" runat="server" Text="Phone Number:"></asp:Label>
                            <asp:TextBox ID="txtPhoneNumber" CssClass="form-control" runat="server" MaxLength="11" required="required"></asp:TextBox>                   
                        </div>                     
                    </div>
                    <div class="form-row mt-3">
                        <div class="col form-group">
                            <asp:Label ID="lblGender" CssClass="col-form-label" runat="server" Text="Gender:"></asp:Label>
                            <asp:DropDownList ID="ddlGender" CssClass="form-control" runat="server">
                                <asp:ListItem Value="0">Please select your gender</asp:ListItem>
                                <asp:ListItem>Male</asp:ListItem>
                                <asp:ListItem>Female</asp:ListItem>
                            </asp:DropDownList>              
                        </div>
                        <div class="col form-group">
                            <asp:Label ID="lblBirthdate" CssClass="col-form-label" runat="server" Text="Birth Date:"></asp:Label>
                            <asp:TextBox ID="txtBirthdate" type="date" CssClass="form-control" runat="server" required="required"></asp:TextBox>                           
                        </div>                     
                    </div>
                    <div class="form-row mt-4">
                        <div class="col form-group">
                            <asp:Button ID="btnClear" CssClass="btn btn-danger btn-block" runat="server" CausesValidation="False" OnClick="btnClear_Click" Text="Reset" UseSubmitBehavior="False" />
                        </div>
                        <div class="col form-group">
                            <asp:Button ID="btnRegister" CssClass="btn btn-success btn-block" runat="server" OnClick="btnRegister_Click" Text="Register" />
                        </div>                     
                    </div>
                </article>
                <div class="border-top card-body text-center">Have an account? <a href="#">Log In</a></div>
            </div>
        </div>
    </div>
</div>

这是我的代码：

protected void btnClear_Click(object sender, EventArgs e) {
        txtFirstname.Text = "";
        txtLastname.Text = "";
        txtUsername.Text = "";
        txtPassword.Text = "";
        txtEmail.Text = "";
        txtPhoneNumber.Text = "";
        txtBirthdate.Text = "";
        ddlGender.SelectedValue = "0";
        Response.Write("<script>alert('Successfully Cleared!')</script>");
    }

    protected void btnRegister_Click(object sender, EventArgs e) {
        SqlConnection conn = new SqlConnection(@"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|eMerch.mdf;Integrated Security=True");
        conn.Open();
        SqlCommand cmd = new SqlCommand("uspAddUser", conn);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@uName", SqlDbType.NVarChar).Value = txtUsername.Text.Trim();
        cmd.Parameters.AddWithValue("@uPassword", SqlDbType.NVarChar).Value = txtPassword.Text.Trim();
        cmd.Parameters.AddWithValue("@responseMessage", SqlDbType.NVarChar);
        cmd.ExecuteNonQuery();
        Response.Write("<script>alert('User Registration Success!')</script>");
        conn.Close();
    }

这是我在母版页中的模态代码：

<div class="modal fade" runat="server" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-center modal-login">
            <asp:UpdatePanel ID="upLogin" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="modal-content">
                        <div class="modal-header">
                            <div class="avatar">
                                <img src="../Images/web/Avatar_Login.png" alt="Avatar">
                            </div>              
                            <h4 class="modal-title">Member Login</h4>   
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>       
                        </div>
                        <div class="modal-body">
                            <div class="alert alert-danger collapse text-center" id="errorCredentials">
                                Invalid Credentials
                            </div>
                            <div class="form-group">
                                <label class="col-form-label">Username:</label>
                                <asp:TextBox ID="txtUsername" runat="server" CssClass="form-control" required="required"></asp:TextBox>         
                            </div>
                            <div class="form-group">
                                <label class="col-form-label">Password:</label>
                                <asp:TextBox ID="txtPassword" runat="server" CssClass="form-control" TextMode="Password" required="required"></asp:TextBox>     
                            </div>                  
                            <div class="form-group">
                                <asp:Button ID="btnLogin" runat="server" CausesValidation="False" Text="Login" CssClass="btn btn-primary btn-lg btn-block login-btn" OnClick="btnLogin_Click"/>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <a href="#">Forgot Password?</a>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>  
        </div>
    </div>

Answer 1

好的，我认为这是因为您在代码中使用 required="required" 属性来强制某些字段。当您单击注册按钮时，它会导致对所有字段进行此检查验证，因此您的模态 div 中的那些以及卡片 div 中的那些。这就是为什么它没有到达您的 register_onclick 事件。 （字段用户名和密码或未验证，因为它们没有输入）

您应该能够通过从模式中的密码和用户名文本框中删除 required="required" 来证明这一点。

要添加验证，您可以使用 asp:RequiredFieldValidator 而不是您想要强制的文本框等的 required 属性。见下文

https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.requiredfieldvalidator?view=netframework-4.8

您还可以使用添加验证组，以便每个按钮仅验证某些控件。见下文

https://docs.microsoft.com/en-us/previous-versions/aspnet/ms227424(v=vs.100)

希望这会有所帮助。请让我知道它是否有效。

Answer 2

从代码中看起来没问题，但如果没有其他代码，很难判断发生了什么。您的按钮单击事件代码是什么样的。例如下面。

  protected void btnRegister_Click(object sender, EventArgs e)
        {

        }

        protected void btnClear_Click(object sender, EventArgs e)
        {

        }

编辑：我刚刚在一个空白的 webforms 项目中尝试了您的代码，它对我有用，包括验证检查。因此错误必须在您的页面/项目中的其他位置。下图显示它正在运行，我在 btnRegister_Click 事件上设置了一个断点，当我在填写所有必填字段后按下按钮时，它会触发该事件。

My Example of your code running

Answer 3

你没有做错 UseSubmitBehavior = false

微软说：

使用 UseSubmitBehavior 属性来指定 Button 控件是使用客户端浏览器的提交机制还是 ASP.NET 回发机制。默认情况下，此属性的值为 true，导致 Button 控件使用浏览器的提交机制。如果指定 false，则 ASP.NET 页面框架将客户端脚本添加到页面以将表单发布到服务器。

https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.button.usesubmitbehavior?view=netframework-4.8

浏览器使用表单标记和分组，就像在 MVC-5 风格中默认 =true，因为大多数程序员使用 MVC 和 ASP.NET。

您使用的是 ASP.NET 按钮事件，而不是表单事件。因此，UseSubmitBehavior=false 是正确的设置。