asp.net-mvc - AJAX POST 之后如何在 ASP.NET MVC 2 中正确重新呈现 Recaptcha

Question

好的...

我已经下载并实现了这个 Recaptcha implementation 对于 MVC，它使用 ModelState 来确认验证码控件的有效性。

它工作得非常好......除了当我开始在 AJAX 表单中使用它时。

简而言之，当使用 AJAX 重新渲染 div 时，它应该包含的 ReCaptcha 不会出现，即使相关的 <scripts>在部分渲染后的源代码中。

代码如下。

 using (Ajax.BeginForm("CreateComment", "Blog", 
        new AjaxOptions() { HttpMethod = "POST", 
         UpdateTargetId = "CommentAdd", OnComplete="ReloadRecaptcha", 
         OnSuccess = "ShowComment", OnFailure = "ShowComment", 
         OnBegin = "HideComment" }))
{%>
    <fieldset class="comment">
        <legend>Add New Comment</legend>
        <%= Html.ValidationSummary()%>
        <table class="postdetails">
            <tbody>
                <tr>
                    <td rowspan="3" id="blahCaptcha">
                        <%= Html.CreateRecaptcha("recaptcha", "blackglass") %>
                    </td>
                    .... Remainder of Form Omitted for Brevity

我已经确认，当 Recaptcha 控件不存在且 Javascript 调用 AjaxOptions 时，表单可以正常运行。一切正常。

问题是如果ModelState由于 Recaptcha 或其他一些验证而无效，则 ActionResult返回 View 以重新显示表单。

    [RecaptchaFilter(IgnoreOnMobile = true)]
    [HttpPost]
    public ActionResult CreateComment(Comment c)
    {
        if (ModelState.IsValid)
        {
            try
            {
                //Code to insert Comment To DB
                return Content("Thank You");
            }
            catch
            {
                ModelState.AddRuleViolations(c.GetRuleViolations());
            }
        }
        else
        {
            ModelState.AddRuleViolations(c.GetRuleViolations());
        }
        return View("CreateComment", c);
   }

当它无效并且表单回发时，由于某种原因，ReCaptcha 控件不会重新呈现。我检查了来源和 <script> & <noscript> block 存在于 HTML 中，因此下面的 HTML Helper 功能显然可以正常工作

<%= Html.CreateRecaptcha("recaptcha", "blackglass") %>

我认为这与通过 AJAX 注入(inject) DOM 的脚本没有重新执行有关。

正如您从 HTML 中看到的那样上面的代码片段，我尝试添加 OnComplete= javascript 函数在客户端重新创建验证码，但是虽然脚本执行没有错误，但它不起作用。 OnComplete 函数是。

    function ReloadRecaptcha() {
        Recaptcha.create("my-pub-key", 'blahCaptcha', { 
            //blahCaptcha is the ID of the <td> where the ReCaptcha should go.
            theme: 'blackglass'
            });
    }

有人能解释一下吗？

谢谢， 欧因C

Answer 1

想出了一个解决方案。

我使用 HTML Helper 完全删除了验证码的客户端呈现。

相反，过滤器保留在服务器端以进行 ModelState 验证等...

客户端渲染全部使用 ReCaptcha AJAX Api 完成 http://recaptcha.net/fastcgi/demo/ajax 和 http://api.recaptcha.net/js/recaptcha_ajax.js

每次发生部分发布时，验证码都会消失，每次完成时，OnComplete 脚本都会重新创建它。