asp.net MVC 3 - JQuery ajax $.get return <nonscrip

This problem is kind of difficult to explain, but I'll do my best.

I'm simply trying to render the reCaptcha input on a form that is embedded inside a partial view.

Here's how I'm obtaining the partial view with JQuery $.get:

GetAndRenderPartialContent: function (url, obj) {
        $.get(url, function (data) {
            obj.replaceWith(function () {
                var content = "<div id=\"" + obj.attr('id') + "\">" + data + "</div>";
                return content;
            });
        });
    }

This works great as a JQuery extension method.

The URL that's passed in to this method is simply a controller route that returns a partial view like this:

public ActionResult GetSomeContent()
{
    var model = new SomeModel();
    // set modal values

    // Finally return partial view
    return PartialView("_MyPartialView", model);
}

This works great. It even renders form values bound to the model.

The problem is only with reCaptcha. In my view I have this line to render the reCaptcha:

@Microsoft.Web.Helpers.ReCaptcha.GetHtml(theme: "clean", publicKey: ConfigurationManager.AppSettings["reCaptcha:publicKey"], language: "en")

This works when I embed it directly in the parent view.However, when it is rendered from the partial view method, I get the following results:

<noscript>
    &lt;iframe frameborder="0" height="300px" src="http://www.google.com/recaptcha/api/noscript?k=[MY PUBLIC KEY REMOVED FOR DEMO]" width="500px"&gt;&lt;/iframe&gt;
    &lt;br /&gt;&lt;br /&gt;
    &lt;textarea cols="40" name="recaptcha_challenge_field" rows="3"&gt;&lt;/textarea&gt;
    &lt;input name="recaptcha_response_field" type="hidden" value="manual_challenge" /&gt;
</noscript>

It appears that the PartialView method is HtmlEncoding the output from the reCaptcha, but not the other form elements that are embedded in the form. Has anyone encountered this or have an elegant solution to this annoying problem that has taken up a couple of hours of my time?

The only solution I've been able to achieve is to render the reCaptcha in the parent view, hide it until the partial view page is called, then relocate it to the appropriate position in the form, which is not a desirable nor elegant solution.

Any help is appreciated.

Thanks.

* UPDATE ** I tried pasting the view code here but stackoverflow's editor kept rejecting the code. Suffice it to say, there is nothing unusual about the view. The model contains properties for binding such as:

[Required]
[Display(Name = "Email Address")]
public string Email { get; set; }

[Required]
[Display(Name = "Confirm Email Address")]
[Compare("Email", ErrorMessage = "Your email and confirmation email do not match.")]
public string ConfirmEmail { get; set; }

The form:

@using (Html.BeginForm("UpdateInfo", "MyAccount", FormMethod.Post, new { @id = "InfoForm" }))

Render the model items:

<div class="editor-label">
     @Html.LabelFor(m => m.Email) 
</div>
<div class="editor-field">
    @Html.TextBoxFor(m => m.Email) @Html.ValidationMessageFor(m => m.Email)
</div>

Near the end of the form:

<fieldset id="reCaptchaFieldset">
<legend>Captcha Authorization</legend>
@ReCaptcha.GetHtml(theme: "clean", publicKey: System.Configuration.ConfigurationManager.AppSettings["reCaptcha:publicKey"])
 </fieldset>

回答1:

Try the following:

@Html.Raw(Microsoft.Web.Helpers.ReCaptcha.GetHtml(theme: "clean", publicKey: ConfigurationManager.AppSettings["reCaptcha:publicKey"], language: "en"))

回答2:

Use the AJAX API part in this document: http://code.google.com/apis/recaptcha/docs/display.html

Use this code in the partialView.