How to use Ajax.BeginForm MVC helper with JSON result?

Question

I'm trying to use the ASP.NET MVC Ajax.BeginForm helper but don't want to use the existing content insertion options when the call completes. Instead, I want to use a custom JavaScript function as the callback.

This works, but the result I want should be returned as JSON. Unfortunately, the framework just treats the data as a string. Below is the client code. The server code simply returns a JsonResult with one field, UppercaseName.

<script type='text/javascript'>
    function onTestComplete(content) {
        var result = content.get_data();
        alert(result.UppercaseName);
    }
</script>

<% using (Ajax.BeginForm("JsonTest", new AjaxOptions() {OnComplete = "onTestComplete" })) { %>
    <%= Html.TextBox("name") %><br />
    <input type="submit" />
<%} %>

Instead of showing the uppercase result, it is instead showing undefined. content.get_data() seems to hold the JSON, but only in string form. How do I go about converting this to an object?

All of this seems a bit convoluted really. Is there a better way to get at the resulting content using Ajax.BeginForm? If it's this hard, I may skip Ajax.BeginForm entirely and just use the jQuery form library.

Answer 1

Try this:

var json_data = content.get_response().get_object();

this will give you result in JSON format and you can use json_data[0] to get the first record

Answer 2

You can use OnFailure and OnSuccess instead of OnComplete; OnSuccess gives you the data as a proper JSON object. You can find the callback method signatures burried in ~/Scripts/jquery.unobtrusive-ajax.min.js which you should load on your page.

In your Ajax.BeginForm:

new AjaxOptions
    {
        OnFailure = "onTestFailure",
        OnSuccess = "onTestSuccess"
    }

Script block:

<script>
//<![CDATA[

    function onTestFailure(xhr, status, error) {

        console.log("Ajax form submission", "onTestFailure");
        console.log("xhr", xhr);
        console.log("status", status);
        console.log("error", error);

        // TODO: make me pretty
        alert(error);
    }

    function onTestSuccess(data, status, xhr) {

        console.log("Ajax form submission", "onTestSuccess");
        console.log("data", data);
        console.log("status", status);
        console.log("xhr", xhr);

        // Here's where you use the JSON object
        //doSomethingUseful(data);
    }

//]]>
</script>

These signatures match success and error callbacks in $.ajax(...), which might not be such a surprise after all.

This was tested using asp.net-mvc-3 with jquery 1.6.3 and 1.7.2.

Answer 3

Try using the below code:

<script type='text/javascript'>
    function onTestComplete(content) {
        var result = eval( '(' + content.get_data() + ')' );
        alert(result.UppercaseName);
    }
</script>

Answer 4

I use:

    function onTestComplete(data, status, xhr) {
       var data2 = JSON.parse(data.responseText);
       //data2 is your object
    }

Answer 5

Make sure you have included MicrosoftAjax.js and MicrosoftMvcAjax.js. Then use the following calls on the returned context to get a json object out of the return.

var json = context.get_data();
var data = Sys.Serialization.JavaScriptSerializer.deserialize(json);