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 cust

Answer 1

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);

Answer 2

I use:

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

Answer 3

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 4

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 5

Try using the below code:

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