2 个相同形式的模式,但 1 个按钮没有关闭

2 Modals in the same form but 1 button isn't going off

问题

我正在创建一个网上商店,我想在我的母版页中以一种形式使用两种不同的模式,一种模式是创建帐户,另一种模式是让用户登录。

第一个模态完美,您可以使用按钮打开模态,模态内的按钮也完美(例如,注册和关闭按钮)。但是另一个模态(登录)不起作用,你可以打开模态并关闭模态,但是你不能登录。所以模态"log in"里面的登录按钮不起作用,我该按钮后面有一些 C# 代码,但它从未激活该代码,因为该按钮没有关闭。我在 BtnLogin_click 之后放置了一个断点,但即使是断点也不会关闭。问题是,如果我将第二个模态(注册)放在评论中,登录模态再次起作用,或者形式一定有问题,对吗?有什么提示或建议吗?

尝试

我试过的是:

Looked at the properties of the button, then event, and it said it's onclick with the correct name. Tried to create a new button, and a new onclick event.

HTML

打开模式的 2 个按钮

<input type = "button" id="btnShowLogin" class="btn btn-primary" value = "Login" />
<input type = "button" id="btnShowRegister" class="btn btn-primary" value = "Registreer" />

模式 1 登录(不工作)

<form id="form1" runat="server">
<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="ModalTitle"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;</button>
                <h4 class="modal-title" id="ModalTitle">
                    Login</h4>
            </div>
            <div class="modal-body">
                <label for="txtUsername">
                    Username</label>
                <asp:TextBox ID="txtUsername" runat="server" CssClass="form-control" placeholder="Enter Username"
                     />
                <br />
                <label for="txtPassword">
                    Password</label>
                <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="form-control"
                    placeholder="Enter Password"  />
                <div class="checkbox">
                    <asp:CheckBox ID="chkRememberMe" Text="Remember Me" runat="server" />
                </div>
                <div id="dvMessage" runat="server" visible="false" class="alert alert-danger">
                    <strong>Error!</strong>
                    <asp:Label ID="lblMessage" runat="server" />
                </div>
            </div>
            <div class="modal-footer">        
                <asp:Button ID="btnLogin" Text="Login" runat="server" OnClick="ValidateUser" CssClass="btn btn-default" Visible="true" />
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Close</button>
            </div>
        </div>
    </div>
</div>   

模态 2 寄存器(工作)

<div class="modal fade" id="RegisterModal" tabindex="-2" role="dialog" aria-labelledby="Registreer"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;</button>
                <h4 class="modal-title" id="Registreer">
                    Registreer</h4>
            </div>
            <div class="modal-body">
                                <label for="TxtVnaam">
                    Voornaam</label>
                <asp:TextBox ID="TxtVnaam" runat="server" CssClass="form-control" placeholder="Enter Voornaam"
                     />
                 <label for="Txtnaam">
                    Achternaam
                 </label>
                <asp:TextBox ID="Txtnaam" runat="server" CssClass="form-control" placeholder="Enter Achternaam"
                     />
                 <br />
                 <label for="TxtNick">
                    Username</label>
                <asp:TextBox ID="TxtNick" runat="server" CssClass="form-control" placeholder="Enter Username"
                     />      
                  <label for="txtEmail">
                    Email</label>
                <asp:TextBox ID="txtEmail" runat="server" CssClass="form-control" placeholder="Enter Email"
                     />
                 <br />
                 <asp:RequiredFieldValidator ErrorMessage="Required" Display="Dynamic" ForeColor="Red"
                ControlToValidate="txtEmail" runat="server" />
            <asp:RegularExpressionValidator runat="server" Display="Dynamic" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                ControlToValidate="txtEmail" ForeColor="Red" ErrorMessage="Invalid email address." />      
                 <label for="txtWW">
                    Wachtwoord</label>
                <asp:TextBox ID="TxtWW" runat="server" CssClass="form-control" placeholder="Enter Wachtwoord"
                     />
                 <label for="bevestig">
                    Bevestig Wachtwoord</label>
                <asp:TextBox ID="bevestig" runat="server" CssClass="form-control" placeholder="Enter Wachtwoord"
                     /><asp:CompareValidator ErrorMessage="Passwords do not match." ForeColor="Red" ControlToCompare="txtWW"
                ControlToValidate="bevestig" runat="server" />
                 <label for="TxtGemeente">
                    Gemeente</label>
                <asp:TextBox ID="TxtGemeente" runat="server" CssClass="form-control" placeholder="Enter Gemeente"
                     />
                      <label for="TxtPC">
                    Postcode</label>
                <asp:TextBox ID="TxtPC" runat="server" CssClass="form-control" placeholder="Enter Postcode"
                     />
                 <br />
                    <label for="TxtAdres">
                    Adres</label>
                <asp:TextBox ID="TxtAdres" runat="server" CssClass="form-control" placeholder="Enter adres"
                     />
                 <br />
                  <label for="TxtTel">
                    Telefoonnummer</label>
                <asp:TextBox ID="TxtTel" runat="server" CssClass="form-control" placeholder="Enter Telefoonnummer"
                     />
    <label for="TxtRek">
                    Rekeningnummer</label>
                <asp:TextBox ID="TxtRek" runat="server" CssClass="form-control" placeholder="Enter rekeningnummer"
                     />
                 <br />                                                                     
            </div>
            <div class="modal-footer">
                <asp:Button ID="Button1" Text="Registreer" runat="server" OnClick="RegisterUser" Class="btn btn-primary" />
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Close</button>
            </div>
        </div>
    </div>
</div>
</form>

JavaScript

<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <script type="text/javascript">
    $(function () {
        $("#btnShowLogin").click(function () {
            $('#LoginModal').modal('show');
        });
    });
    $(function () {
        $("#btnShowRegister").click(function () {
            $('#RegisterModal').modal('show');
        });
    });
</script>

我希望模态登录中的按钮登录会激活,这样它就可以使用我放在后面的代码来验证用户。

您必须为 RequiredFieldValidator 设置 ValidationGroup 属性才能注册。 例如:

 <asp:RequiredFieldValidator ValidationGroup="register" ErrorMessage="Required" Display="Dynamic" ForeColor="Red"
            ControlToValidate="txtEmail" runat="server" />

当使用 asp 验证器时,您应该设置 ValidationGroup 属性,因为在您的情况下,您有 2 个提交按钮,当您单击登录按钮时,注册验证器会以隐藏模式显示消息,并且表单不会提交。