Bootstrap模式按钮ASP.NET C#

时间:2016-05-29 10:51:30

标签: c# jquery asp.net bootstrap-modal

我的网站存在问题

我有这种模式:

    <div class="modal fade " id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content login-modal">
                <div class="modal-header login-modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title text-center" id="loginModalLabel">Autenticazione utente</h4>
                </div>
                <div class="modal-body">
                    <div class="text-center">
                        <div class="form-group">
                            <asp:Panel ID="pError" Visible="false" runat="server">
                                <div class="alert alert-dismissable alert-danger" id="confirm" runat="server">
                                    <asp:Label ID="lblError" runat="server"> </asp:Label>
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                </div>
                            </asp:Panel>
                        </div>
                        <div role="tabpanel" id="pnl" class="login-tab">
                            <!-- SCHEDE -->
                            <ul class="nav nav-tabs" role="tablist">
                                <li role="presentation" class="active"><a id="signin-taba" href="#home"  aria-controls="home" role="tab" data-toggle="tab">Accedi</a></li>
                                <li role="presentation"><a id="signup-taba" href="#profile"  aria-controls="profile" role="tab" data-toggle="tab">Registrati</a></li>
                                <li role="presentation"><a id="forgetpass-taba" href="#forget_password" aria-controls="forget_password" role="tab"  data-toggle="tab">Recupero</a></li>
                            </ul>

                            <!-- LOGIN -->


                            <div class="tab-content">
                                <div role="tabpanel"  class="tab-pane active text-center"  id="home">

                                    <div class="clearfix"></div>
                                    <%-- email --%>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-addon"><i class="fa fa-at"></i></div>
                                            <asp:TextBox ID="txtLoginEmail"  CssClass="form-control" placeholder="Email" runat="server"></asp:TextBox>

                                        </div>
                                        <asp:RequiredFieldValidator ID="vLoginEmail" runat="server" Display="dynamic" ControlToValidate="txtLoginEmail" ForeColor="Red" ValidationGroup="validator" ErrorMessage="*Email obbligatoria"></asp:RequiredFieldValidator>
                                        <asp:RegularExpressionValidator ID="reLoginEmail" runat="server" ValidationGroup="validator" ControlToValidate="txtLoginEmail" Display="Dynamic" ForeColor="red" ErrorMessage="Inserire l'email nel formato corretto" SetFocusOnError="True" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-addon"><i class="fa fa-lock"></i></div>
                                            <asp:TextBox type="password" ID="txtLoginPassword" class="form-control" placeholder="Password" runat="server"></asp:TextBox>
                                        </div>
                                    </div>
                                    <asp:Button ID="btnLogin" OnClick="btnLogin_Click" CssClass="btn btn-danger" data-loading-text="Signing In...." ValidationGroup="validator" runat="server" Text="Accedi"></asp:Button>
                                    <input id="resetLogin" class="btn btn-danger" runat="server" type="reset" value="reset" />

                                    <div class="clearfix"></div>
                                    <div class="login-modal-footer">
                                        <div class="row">
                                            <div class="col-xs-8 col-sm-8 col-md-8">
                                                <i class="fa fa-lock"></i>
                                                <a href="javascript:;" class="forgetpass-tab">Recupero </a>

                                            </div>

                                            <div class="col-xs-4 col-sm-4 col-md-4">
                                                <i class="fa fa-check"></i>
                                                <a href="javascript:;" class="signup-tab">Registrati </a>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <%-- REGISTRAZIONE --%>
                                <div role="tabpanel" class="tab-pane" id="profile">

                                    <div class="clearfix"></div>
                                    <div class="form-group">
                                        <div class="input-group">

                                            <label class="radio-inline">
                                                <asp:RadioButton ID="rbUtente" GroupName="rbTipologia" Checked="true" runat="server" />Utente</label>

                                            <label class="radio-inline">
                                                <asp:RadioButton ID="rbRistoratore" GroupName="rbTipologia" runat="server" />Ristoratore</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-addon"><i class="fa fa-user"></i></div>

                                            <%-- username --%>
                                            <asp:TextBox class="form-control" ID="txtNome" placeholder="Nome" runat="server"></asp:TextBox>
                                        </div>
                                        <asp:RequiredFieldValidator ID="vtxtNome" runat="server" Display="dynamic" ControlToValidate="txtNome" ForeColor="Red" ValidationGroup="validator2" ErrorMessage="*Nome obbligatorio"></asp:RequiredFieldValidator>

                                    </div>
                                    <%-- cognome --%>
                                    <div class="form-group ">
                                        <div class="input-group ">
                                            <div class="input-group-addon"><i class="fa fa-user"></i></div>
                                            <asp:TextBox class="form-control" ID="txtCognome" placeholder="Cognome" runat="server"></asp:TextBox>
                                        </div>
                                        <asp:RequiredFieldValidator ID="vCognome" runat="server" Display="dynamic" ControlToValidate="txtCognome" ForeColor="Red" ValidationGroup="validator2" ErrorMessage="*Cognome obbligatorio"></asp:RequiredFieldValidator>

                                    </div>
                                    <%-- email --%>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-addon"><i class="fa fa-at"></i></div>
                                            <asp:TextBox class="form-control" ID="txtEmail" placeholder="Email" runat="server"></asp:TextBox>

                                        </div>
                                        <asp:RequiredFieldValidator ID="vEmail" runat="server" Display="dynamic" ControlToValidate="txtEmail" ForeColor="Red" ValidationGroup="validator2" ErrorMessage="*Email obbligatoria"></asp:RequiredFieldValidator>
                                        <asp:RegularExpressionValidator ID="reEmail" runat="server" ValidationGroup="validator2" ControlToValidate="txtEmail" Display="Dynamic" ForeColor="red" ErrorMessage="Inserire l'email nel formato corretto" SetFocusOnError="True" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
                                    </div>
                                    <%-- password --%>
                                    <div class="form-group ">
                                        <div class="input-group ">
                                            <div class="input-group-addon"><i class="fa fa-lock"></i></div>
                                            <asp:TextBox type="password" class="form-control" ID="txtPassword" placeholder="Password" runat="server"></asp:TextBox>

                                        </div>
                                        <asp:RequiredFieldValidator ID="vPassword" runat="server" Display="dynamic" ControlToValidate="txtPassword" ForeColor="Red" ValidationGroup="validator2" ErrorMessage="*Password obbligatoria"></asp:RequiredFieldValidator>
                                        <asp:RegularExpressionValidator ID="rePassword" runat="server" ValidationGroup="validator2" ControlToValidate="txtPassword" Display="Dynamic" ForeColor="red" ErrorMessage="La password deve contenere: minimo 8 caratteri; almeno 1 maiuscola; almeno 1 minuscola; almeno 1 numero" SetFocusOnError="True" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,15}$"></asp:RegularExpressionValidator>

                                    </div>

                                    <%-- password controllo --%>
                                    <div class="form-group ">
                                        <div class="input-group">
                                            <div class="input-group-addon"><i class="fa fa-lock"></i></div>
                                            <asp:TextBox type="password" class="form-control" ID="txtCPassword"  placeholder="Conferma password" runat="server"></asp:TextBox>
                                        </div>
                                        <asp:CompareValidator ID="cvPassword" ValidationGroup="validator2" Display="Dynamic" runat="server" ForeColor="Red" ControlToCompare="txtPassword" ControlToValidate="txtCPassword" ErrorMessage="La password non corrisponde"></asp:CompareValidator>
                                            <asp:Label ID="lblRegistrazione" Visible="false" runat="server" ></asp:Label>
                                    </div>




                                    <asp:Button ID="btnSignin" CssClass="btn btn-danger " data-loading-text="Registrando...." OnClick="btnSignin_Click" ValidationGroup="validator2" runat="server" Text="Registrati"></asp:Button>
                                    <input id="r2" class="btn btn-danger" runat="server" type="reset" value="reset" />


                                    <div class="clearfix"></div>
                                    <div class="login-modal-footer">
                                        <div class="row">
                                            <div class="col-xs-8 col-sm-8 col-md-8">
                                                <i class="fa fa-lock"></i>
                                                <a href="javascript:;" class="forgetpass-tab">Password dimenticata? </a>

                                            </div>

                                            <div class="col-xs-4 col-sm-4 col-md-4">
                                                <i class="fa fa-check"></i>
                                                <a href="javascript:;" class="signin-tab">Registrati</a>
                                            </div>
                                        </div>
                                    </div>

                                </div>


                                <div role="tabpanel"  class="tab-pane text-center"  id="forget_password">
                                    &nbsp;&nbsp;
                                <div class="clearfix"></div>
                                    <%--RECUPERO  --%>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-addon"><i class="fa fa-at"></i></div>
                                            <asp:TextBox class="form-control" ID="txtRecEmail" placeholder="Email" runat="server"></asp:TextBox>


                                        </div>
                                        <asp:Label ID="lblRecovery" runat="server" ></asp:Label>
                                        <asp:RequiredFieldValidator ID="vREmail" runat="server" Display="dynamic" ControlToValidate="txtRecEmail" ForeColor="Red" ValidationGroup="validator3" ErrorMessage="*Email obbligatoria"></asp:RequiredFieldValidator>
                                        <asp:RegularExpressionValidator ID="reREmail" runat="server" ValidationGroup="validator3" ControlToValidate="txtRecEmail" Display="Dynamic" ForeColor="red" ErrorMessage="Inserire l'email nel formato corretto" SetFocusOnError="True" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>

                                         </div>

                                    <asp:Button  ID="btnRecovery" OnClick="btnRecovery_Click" CssClass="btn btn-danger reco" data-loading-text="Invio...." ValidationGroup="validator3"  runat="server"></asp:Button>
                                    <div class="clearfix"></div>
                                    <div class="login-modal-footer">
                                        <div class="row">
                                            <div class="col-xs-6 col-sm-6 col-md-6">
                                                <i class="fa fa-lock"></i>
                                                <a href="javascript:;" class="signin-tab">Registrazione </a>

                                            </div>

                                            <div class="col-xs-6 col-sm-6 col-md-6">
                                                <i class="fa fa-check"></i>
                                                <a href="javascript:;" class="signup-tab">Accesso </a>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

它有3个标签:登录(LOGIN),注册(Registrazione)和忘记密码(RECUPERO)。

这有点难以解释,但我会尝试: 在3张卡片中,我有3个按钮。 如果我在第三张卡片中并按下回车键,则计算机会触发位于第一个选项卡上的按钮的onclick事件。

我试过这个jquery代码,但它不起作用: $(document).keypress(function(event){

        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == '13') {
            if ($('#home').is(":visible")) {

                $("#btnLogin").trigger("click");
            }
            else if ($('#profile').is(":visible")) {
                $("#btnSignin").trigger("click");

            }
            else {
                $('#btnRecovery').click(ShowPopUp);

            }

        }

    }
         );

你有解决方案吗?

P.S。 如果我使用浏览器的控制台,javascript代码可以正常工作,但是当我在我的项目上尝试它时,它不起作用......

请帮助我......这是我考试的项目......

1 个答案:

答案 0 :(得分:0)

  1. 创建一个名为currentTab
  2. 的局部变量(在jQuery加载函数中)
  3. 为标签创建点击事件(<li>标签)
  4. 在点击事件中,将currentTab变量设置为点击的<li>
  5. 修改keypress函数以评估currentTab变量并触发相关的点击事件

                       

    <script type="text/javascript">
        $(function () {
    
            $("#show").click(function () {
                jQuery.noConflict();
                $("#loginModal").modal('show');
    
            });
    
            var currentTab = "";
    
            $(".nav li").click(function () {
    
                var li = $(this);
                var liText = li.text();
                currentTab = liText;
                alert('You clicked on "' + liText + '" now lets store this value in a variable called currentTab');
            });
    
            $(document).keydown(function (event) {
    
                debugger;
    
                var keycode = (event.keyCode ? event.keyCode : event.which);
                if (keycode == '13') {
    
                    switch (currentTab) {
                        case "Accedi":
                            $("#btnLogin").trigger("click");
                            break;
                        case "Registrati":
                            $("#btnSignin").trigger("click");
                            break;
                        case "Recupero":
                            $("#btnRecovery").trigger("click");
                            break;
                    }
                }
            });
        });
    </script>