Блог

Проблема

Я создаю веб-магазин и хочу использовать два разных модальности в одной форме на моей главной странице, одна модальная предназначена для создания учетных записей, а другая модальная — для входа пользователей.

Первый модал работает идеально, вы можете открыть модал с помощью кнопки, кнопки внутри модала также работают идеально (например, кнопки регистрации и закрытия). Но другой модал (вход в систему) не работает, вы можете открыть модал и закрыть модал, но вы не можете войти в систему. Итак, кнопка войти внутри модального «log in» не работает, у меня есть некоторый код на C # за этой кнопкой, но он никогда не активировал код, потому что кнопка не выключается. Я ставлю точку останова сразу после BtnLogin_click , но даже точка останова не отключается. Дело в том, что если я добавлю вторую модальность (register) в комментарий, модальность входа снова заработает или в форме должно быть что-то не так, верно? Есть какие-либо советы?

Попытка

То, что я пробовал, это:

Посмотрел на свойства кнопки, затем event, и там сказано, что это onclick с правильным именем. Попытался создать новую кнопку и новое событие onclick.

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">
                    amp;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">
                    amp;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>
  

Я ожидаю, что кнопка login внутри модального входа в систему будет активной, чтобы она могла использовать код, который я поместил за ней, и подтвердить пользователя.

вы должны установить атрибут ValidationGroup для RequiredFieldValidator для регистрации. например :

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

при использовании валидаторов asp вам следует установить атрибут ValidationGroup, потому что в вашем случае у вас есть 2 кнопки отправки, и когда вы нажимаете на кнопку входа, валидатор регистрации показывает сообщение в скрытом модальном виде, и форма не будет отправлена.