How to deserialize JSON from MVC using JQuery?

Question

Ok, its late Friday afternoon, and I've been fighting this for way too long... I have an MVC2 class that returns a JSON. JQuery throws an error when trying to deserialize it in the browser.

Here's the controller:

<HttpPost()>
Function ChangeAddress(ByVal addressId As Integer) As ActionResult

    ' Build and return JSON containing address.
    Dim v As New TestViewModel With {.Address1 = "My House"}
    Return Json(v)

End Function

Here's the view model:

Public Class TestViewModel

    Public Property Address1 As String

End Class

And here's the script:

// If list is not empty and item was found...
if (found == true) {

         var sum = 14;

    // Get fields of newly selected address.
    $.ajax({
        url: '../../Checkout/ChangeAddress',
        type: 'POST',
        traditional: true,
             data: { addressId: sum },
        success: function (result) {

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

            alert("Success!");

        }
    });
};

The deserialization code is from the MVC Music Store example. When executed, JQuery throws an exception on get_data, saying "Object doesn't support this property or method". Ok, so I try commenting out that line and trying deserialize(result). Then exception says "Sys.ArgumentException: Cannot deserialize. The data does not correspond to valid JSON. Parameter name: data".

Where am I going wrong?

Matt Ball · Accepted Answer · 2011-01-21 22:56:07Z

2

You should not need to explicitly parse ("deserialize") your JSON! jQuery will try to do this automagically, provided that it can correctly guess the dataType returned. You can, of course, specify that you're expecting JSON:

$.ajax({
    url: '../../Checkout/ChangeAddress',
    type: 'POST',
    dataType: 'JSON',               // <========== this line
    traditional: true,
    data: {addressId: sum},
    success: function (result) {

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

        alert("Success!");
    }
});

That said - it is possible that the XHR is not coming back with valid JSON. Could you perhaps provide an example of the JSON returned to your jQuery success callback?

answered Jan 21, 2011 at 22:56

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adventure Over a year ago

Ok, I have to laugh. What da'ya know, I can read the Address1 value directly without explicit parse. Being new to MVC I find all this automagic stuff nice, but also a bit disconcerting. Where is the rule book (potion book?) that explains the magic? Thanks for your quick response.

Matt Ball Over a year ago

@Adventure: start with api.jquery.com/jQuery.ajax, specifically the dataType option.

Collectives™ on Stack Overflow

How to deserialize JSON from MVC using JQuery?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related