reCaptcha 在UpdatePanel 和 ModalPopup中的使用

最新推荐文章于 2024-07-25 14:09:24 发布

转载最新推荐文章于 2024-07-25 14:09:24 发布 · 108 阅读

本文介绍如何在ASP.NET应用中集成reCaptcha进行用户输入验证，包括安装reCaptcha库、配置密钥及实现动态刷新验证码等功能。

当前支持asp.net最新版本的reCaptcha是1.0.4.0 可以在这里下载.随后在这里申请reCaptha key.

下载后,引用Recaptcha.dll. 然后将如下代码添加到aspx或ascx中:

<%@ Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha" %>

UpdatePanel:

aspx code:

<asp:UpdatePanel ID="upComment" runat="server" UpdateMode="conditional">
      <ContentTemplate>
               <asp:TextBox TextMode="MultiLine" runat="server" ID="txtComment" Height="100px" Width="450px" /><br />
              <asp:RequiredFieldValidator ID="rvComment" runat="server" ControlToValidate="txtComment"  ErrorMessage="Comment field is required!" />
   </ContentTemplate>
</asp:UpdatePanel>
<recaptcha:RecaptchaControl ID="recaptcha" Theme="clear" runat="server" PublicKey="your publicKey" PrivateKey="your privateKey" />
<asp:UpdatePanel ID="upButton" runat="server" UpdateMode="Conditional">
         <ContentTemplate>
              <asp:Label ID="lbtRecaptchError" runat="server" ForeColor="Red" />
                <div>
                      <asp:Button ID="btnOk" runat="server" Text="  Ok  " OnClick="btnSaveComment_Click" Visible="true" CausesValidation="true" />
                                           &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click"   CausesValidation="false" Visible="true" />
                </div>
          </ContentTemplate>
</asp:UpdatePanel>

CS Code:

 protected void btnSaveComment_Click(object sender, EventArgs e) {
if (recaptcha.IsValid) {
//验证通过后在这里可以获得txtComment.Text值.
//..............

//然后清空
            txtComment.Text = string.Empty;
            lbtRecaptchError.Text = string.Empty;
            upComment.Update();
        }
else {
//验证失败可以获得reCaptcha返回的信息
            lbtRecaptchError.Text = recaptcha.ErrorMessage;
//这里将更新reCaptcha的验证码.
            ScriptManager.RegisterClientScriptBlock(Page,Page.GetType(), "whatever1","Recaptcha.reload();", true);
            upButton.Update();
         }

    }

protected void btnCancel_Click(object sender, EventArgs e) {
        lbtRecaptchError.Text = string.Empty;
        txtComment.Text = string.Empty;
        upButton.Update();
        upComment.Update();
    }

ModalPopup

aspx Code:

<asp:UpdatePanel ID="upMain" runat="server" UpdateMode="Conditional">
  <ContentTemplate>
      <asp:LinkButton ID="lbtLeaveComment"  runat="server" Text="Leave your comment" OnClientClick="return Recaptcha.reload();" />
          <div id="divComment" runat="server" style="background-color: #ffffff; border-width: 3px; border-style: solid; border-color: Gray; padding: 3px; width: 590px;">
              <table>
                  <tr>
                      <td align="right" style="font-weight: bold" valign="top">
                          Add Comment:
                      </td>
                      <td align="left">
                          <asp:UpdatePanel ID="upInner" runat="server" UpdateMode="conditional">
                              <ContentTemplate>
                                  <asp:TextBox TextMode="MultiLine" runat="server" ID="txtComment" Height="100px" Width="450px" /><br /><asp:RequiredFieldValidator ID="rvComment" runat="server" ControlToValidate="txtComment"  ErrorMessage="Comment field is required!" />
                              </ContentTemplate>
                          </asp:UpdatePanel>
                      </td>
                  </tr>
                  <tr>
                      <td colspan="2" align="center">
                          <recaptcha:RecaptchaControl ID="recaptcha" Theme="clear" runat="server" PublicKey="your publicKey" PrivateKey="your privateKey" />
                          <asp:UpdatePanel ID="upButton" runat="server" UpdateMode="Conditional">
                              <ContentTemplate>
                                  <asp:Label ID="lbtRecaptchError" runat="server" ForeColor="Red" />
                                  <asp:Button ID="btnOk" runat="server" Text="  Ok  " OnClick="btnSaveComment_Click" Visible="true" CausesValidation="true" />
                                  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                                  <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" CausesValidation="false" Visible="true" />
                              </ContentTemplate>
                          </asp:UpdatePanel>
                      </td>
                  </tr>
              </table>
          </div>
    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground"
        PopupControlID="divInner" DropShadow="false" TargetControlID="lbtLeaveComment">
    </asp:ModalPopupExtender>
  </ContentTemplate>
</asp:UpdatePanel>

其中 OnClientClick="return Recaptcha.reload();" 是关键.

CS Code:

   protected void btnSaveComment_Click(object sender, EventArgs e) {
if (recaptcha.IsValid) {
//省略.............
            txtComment.Text = string.Empty;
            lbtRecaptchError.Text = string.Empty;
            Hide();
        }
else {
            lbtRecaptchError.Text = recaptcha.ErrorMessage;
            ScriptManager.RegisterClientScriptBlock(Page,Page.GetType(), "whatever1","Recaptcha.reload();", true);
            upButton.Update();
        }
    }

protected void btnCancel_Click(object sender, EventArgs e) {
        lbtRecaptchError.Text = string.Empty;
        txtComment.Text = string.Empty;
        upButton.Update();
        Hide();
    }

private void Hide() {
        ModalPopupExtender1.Hide();
        upComment.Update();
    }