5

It's simple enough to pass a string to a controller action via jQuery ajax, but is it possible to serialize a group of variables into an object, send it to the controller, and have the controller recognize it as an object?

For example:

In the server, you have a class Obj as such:

class Obj{
    string a; int b; double c;
}

And in the controller, you have a method that is expecting an Obj object

public JsonResult UpdateObj(Obj obj){
    //stuff
}

Is there a way in Jquery to serialize some JavaScript vars into a class Obj and then send it to an MVC controller action via an AJAX post?

Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
Jay Sun
  • 1,583
  • 3
  • 25
  • 33
  • 1
    It's already built into MVC 3. The JSON request just needs to match the properties in your `Obj` and the modelbinders will bind the values for you. – Buildstarted Jul 20 '11 at 18:59

2 Answers2

9

Sure, let's suppose that you have a strongly typed view:

@model Obj

<script type="text/javascript">
    // Serialize the model into a javascript variable
    var model = @Html.Raw(Json.Encode(Model));

    // post the javascript variable back to the controller 
    $.ajax({
        url: '/home/someAction',
        type: 'POST',  
        contentType: 'application/json; charset=utf-8',
        data: JSON.serialize(model),
        success: function(result) {
            // TODO: do something with the results
        }
    });
</script>

and in the controller action:

public ActionResult SomeAction(Obj obj)
{
    ...
}

Just a remark about this Obj, make it have public properties instead of some fields:

public class Obj
{
    public string A { get; set; }
    public int B { get; set; }
    public double C { get; set; }
}
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • 1
    @Robert Harvey, with nothing, ASP.NET MVC 3 does that for you. – Darin Dimitrov Jul 20 '11 at 19:00
  • The whole Html.Raw looks solid, but I get syntax errors when I encode the model. – Jay Sun Jul 20 '11 at 19:15
  • If I try and run that code as is, I get a server error "A circular reference was detected while serializing an object of type TitleDataEntity" which is the actual object I need to serialize. – Jay Sun Jul 20 '11 at 19:25
  • 1
    @Jay Sun, that's normal, you should not have circular references in your view models. It is impossible to JSON serialize objects that contain circular references. This is not supported and is a bad idea anyway. You should never be passing any EF domain models to your view. You should use and define view models which are specifically designed to the requirements of your view. – Darin Dimitrov Jul 20 '11 at 19:26
  • Can we have "success: reloadPage" command in the Ajax request? – Biki May 05 '12 at 12:12
0

jQuery :::

.ajax{
     type: "POST",
     url: "yourUrl/UpdateObj",
     data: $("someHTMLForm").serialize(),
     contentType: "application/json; charset=utf-8"
     success: function(data){
           //data will house your JsonResult
     }
}
Jonathan
  • 1,866
  • 12
  • 10
  • Don't need to deserialize. application/json contentType tells MVC to match the JSON object with your .NET object via a dynamic serializer -- the System.Web.Services.Script.JavaScriptSErializer class – Jonathan Jul 20 '11 at 19:00