How do I correctly Re-render a Recaptcha in ASP.NET MVC 2 after an AJAX POST
- by Eoin Campbell
Ok...
I've downloaded and implemented this Recaptcha implementation for MVC which uses the ModelState to confirm the validity of the captcha control.
It works brilliantly... except when I start to use it in an AJAX Form.
In a nutshell, when a div is re-rendered with AJAX, the ReCaptcha that it should contain does not appear, even though the relevant <scripts> are in the source after the partial render.
Code Below.
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
I've confirmed the Form is perfectly functional when the Recaptcha Control is not present and the Javascript calls in the AjaxOptions are all working fine.
The problem is that if the ModelState is Invalid as a result of the Recaptcha or some other validation, then the ActionResult returns the View to reshow the form.
[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);
}
When it's InValid and the form posts back, for some reason the ReCaptcha Control does not re-render. I've checked the source and the <script> & <noscript> blocks are present in the HTML so the HTML Helper function below is obviously working
<%= Html.CreateRecaptcha("recaptcha", "blackglass") %>
I assume this has something to do with scripts injected into the DOM by AJAX are not re-executed.
As you can see from the HTML snippet above, I've tried to add an OnComplete= javascript function to re-create the Captcha on the client side, but although the script executes with no errors, it doesn't work. OnComplete Function is.
function ReloadRecaptcha() {
Recaptcha.create("my-pub-key", 'blahCaptcha', {
//blahCaptcha is the ID of the <td> where the ReCaptcha should go.
theme: 'blackglass'
});
}
Can anyone shed any light on this ?
Thanks,
Eoin C
