代码错误时刷新reCaptcha

时间:2013-10-17 06:55:28

标签: c# asp.net updatepanel recaptcha createuserwizard

我有一个页面,其中包含UpdatePanel中的Login和CreateUserWizard。  我在登录控件中使用reCaptcha。由于UpdatePanel,我在后面的代码中使用了以下脚本。

if (Page.IsPostBack)
        {
            HtmlGenericControl divRecaptcha = (HtmlGenericControl)Login1.FindControl("divCap");
            Recaptcha.RecaptchaControl recaptcha = (Recaptcha.RecaptchaControl)Login1.FindControl("recaptcha");
            divRecaptcha.Visible = true;
            ScriptManager.RegisterClientScriptBlock(
              recaptcha,
              recaptcha.GetType(),
              "recaptcha",
              "Recaptcha._init_options(RecaptchaOptions);"
              + "if ( RecaptchaOptions && \"custom\" == RecaptchaOptions.theme )"
              + "{"
              + "  if ( RecaptchaOptions.custom_theme_widget )"
              + "  {"
              + "    Recaptcha.widget = Recaptcha.$(RecaptchaOptions.custom_theme_widget);"
              + "    Recaptcha.challenge_callback();"
              + "  }"
              + "} else {"
              + "  if ( Recaptcha.widget == null || !document.getElementById(\"recaptcha_widget_div\") )"
              + "  {"
              + "    jQuery(\"#" + divRecaptcha.ClientID + "\").html('<div id=\"recaptcha_widget_div\" style=\"display:none\"></div>');"
              + "    Recaptcha.widget = Recaptcha.$(\"recaptcha_widget_div\");"
              + "  }"
              + "  Recaptcha.reload();"
              + "  Recaptcha.challenge_callback();"
              + "}",
              true
            );
        }

我的aspx看起来像

  <asp:UpdatePanel ID="upLogin" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
        <ContentTemplate>
            <fieldset id="login" class="group top-margin">
                <legend>Login</legend>
                <div class="background">
                    <asp:Login ID="Login1" runat="server" DisplayRememberMe="False" PasswordRecoveryText=" Forgot Password?"
                        PasswordRecoveryIconUrl="~/Images/forgotpassword.gif" OnLoggedIn="Login1_Authenticate">
                        <LayoutTemplate>
                            <div class="element control-group">
                                <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName" CssClass="label control-label">User Name:</asp:Label>
                                <div class="controls">
                                    <asp:TextBox ID="UserName" runat="server" CssClass="field input input-large"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName"
                                        ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
                                </div>
                            </div>
                            <div class="element control-group">
                                <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password" CssClass="label control-label">Password:</asp:Label>
                                <div class="controls">
                                    <asp:TextBox ID="Password" runat="server" TextMode="Password" CssClass="field input input-large"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password"
                                        ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
                                </div>
                            </div>
                            <div runat="server" id="divCap" visible="false">
                            </div>
                            <div class="captcha-div">
                                <div class="element control-group verification">
                                    <asp:Label ID="lblVerifyCode" runat="server" CssClass="label control-label">Verify Code:</asp:Label>
                                </div>
                                <div class="captcha-control">
                                    <%--Custom Recaptcha Start--%>
                                    <div class="captcha-wrapper" id="captcha-wrapper" style="display: none">
                                        <div class="rah-links">
                                            <a href="javascript:Recaptcha.switch_type('image')" id="captcha-refresh">Refresh</a>
                                            <a href="javascript:Recaptcha.switch_type('audio')" id="captcha-audio">Audio</a>
                                            <a href="javascript:Recaptcha.showhelp()" id="captcha-help">Help</a>
                                        </div>
                                        <div id="recaptcha_image">
                                        </div>
                                        <input type="text" class="captcha" placeholder="Enter Code (No spaces)" id="recaptcha_response_field"
                                            name="recaptcha_response_field">
                                        <div class="note">
                                            Can’t read the code? Just hit Refresh.</div>
                                    </div>
                                    <span class="recaptcha_only_if_incorrect_sol error" id="uiErrorRecaptcha" runat="server"
                                        visible="false">Incorrect Captcha, please try again</span>
                                    <recaptcha:recaptchacontrol customthemewidget="captcha-wrapper" theme="custom" id="recaptcha"
                                        runat="server" publickey='<%$appSettings:RecaptchaPublicKey %>' privatekey='<%$appSettings:RecaptchaPrivateKey %>' />
                                    <asp:Label ID="lblCaptcha" runat="server" CssClass="error" ForeColor="Red"></asp:Label>
                                </div>
                            </div>
                            <div class="element control-group">
                                <div style="color: Red;">
                                    <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
                                </div>
                            </div>
                            <div class="element control-group">
                                <asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1"
                                    OnClick="LoginButton_Click" CssClass="btn login-btn-new" />
                            </div>
                            <div class="element control-group forgot-pwd-btn">
                                <asp:HyperLink ID="PasswordRecoveryLink" runat="server" CssClass="btn"> Forgot Password?</asp:HyperLink>
                            </div>
                        </LayoutTemplate>
                    </asp:Login>
                </div>
                <div align="center">
                    <p>
                        <img alt="" src="Images/lock.gif" />
                        Unauthorized Access Prohibited
                    </p>
                </div>
            </fieldset>
            <fieldset id="register" class="group top-margin" runat="server">
                <legend>Create an Account</legend>
                <asp:Label ID="lblError" runat="server" ForeColor="Red" Text="Label" Visible="False"
                    CssClass="error"></asp:Label>
                <asp:CreateUserWizard ID="CreateUserWizard1" runat="server">
                    <WizardSteps>
                        <asp:CreateUserWizardStep ID="step1" runat="server">
                            <ContentTemplate>
                                . . .
                            </ContentTemplate>
                        </asp:CreateUserWizardStep>
                        <asp:CompleteWizardStep ID="complete" runat="server">
                            <ContentTemplate>
                                <div class="acct-success">
                                    . . .
                                </div>
                            </ContentTemplate>
                        </asp:CompleteWizardStep>
                    </WizardSteps>
                </asp:CreateUserWizard>
            </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>

在isPostBack中使用它的原因是,当使用CreateUserWizard或Login控件时发生页面加载时,reCaptcha就会消失。

我的要求是,每当用户输入错误代码时,reCaptcha应自动刷新并且代码应该更改。没有UpdatePanel,它工作正常。谁能帮助我帮助我实现这个目标?

1 个答案:

答案 0 :(得分:2)

我通过在LoginButton_Click事件上添加以下代码解决了这个问题,我在其中验证了reCaptcha。如果验证码错误,

 ScriptManager.RegisterStartupScript(this, GetType(), "captcha", "Recaptcha.switch_type('image')", true);

多数民众赞成。只要用户输入错误的代码并提交,验证码就会更改图像。