引导模式的按钮 ASP.NET C#答案

【问题标题】：Bootstrap modal's button ASP.NET C#引导模式的按钮 ASP.NET C#
【发布时间】：2016-05-29 22:22:51
【问题描述】：

我的网站有问题

我有这个模态：

    <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);

            }

        }

    }
         );

你有什么解决办法吗？

附：如果我使用浏览器的控制台，javascript 代码可以工作，但是当我在我的项目上尝试它时它不起作用......

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

【问题讨论】：

在任何给定时间是否只有一个面板可见/启用？这就是我从所见所闻中收集到的东西
另外，你说你的代码在你的项目中使用它之前是有效的。您是否尝试过使用 IE 或 FF 开发工具单步执行它，以查看在您的项目中运行它时它在哪里崩溃？这两个实例的实现有什么区别？
您好，感谢您的考虑 :) Gmley：是的，只有一个面板可见。

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

【解决方案1】：

创建一个名为currentTab的局部变量（在jQuery加载函数中）
为标签创建点击事件（<li> 标签）
在点击事件中将currentTab变量设置为点击的<li>

修改您的 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>

【讨论】：

我在 Microsoft Edge/IE 上尝试过，它可以工作，但是当我在 Google Chrome 上尝试时，它不起作用...
好的，Firefox 和 Chrome 有同样的问题......所以，代码在 Edge 和 IE 上有效，但我不适用于 Firefox 和 Chrome
Ctrl+shift+j 在 chrome 中使用 JavaScript 控制台调试 JavaScript 看看是什么问题。记得标记为已回答
我使用了控制台，但是当我在不同于 LOGIN 选项卡的选项卡中按 enter 键时，jquery 无法启动，因为我在 LOGIN 选项卡上有一个必填字段验证器。
stackoverflow.com/questions/14518412/…