ASP NET MVC How to pass JSON object from View to Controller as Parameter

Question

I have a complex JSON object which is sent to the View without any issues  as shown below  but I cannot work out how Serialize this data back to a  NET object when it is passed back to the controller through an AJAX call  Details of the various parts are below      var ObjectA              Name   1           Starting   new Date 1221644506800             Timeline                                    StartTime   new Date 1221644506800                    GoesFor   200                                                             StartTime   new Date 1221644506800                    GoesFor   100                                    I am not sure how this object can be passed to a Controller Method  I have this method below where the Timelines object mirrors the above JS object using Properties   public JsonResult Save Timelines person    The jQuery I am using is           var encoded     toJSON SessionSchedule              ajax               url    Timeline Save               type   POST               dataType   json               data  encoded              contentType   application json  charset utf-8               beforeSend  function         saveStatus   html  Saving   show                   success  function result                    alert result Result                       saveStatus   html result Result  show                                I have seen this question which is similar  but not quite the same as I am not using a forms to manipulate the data  How to pass complex type using json to ASP NET MVC controller  I have also seen references to using a  JsonFilter  to manually deserialize the JSON  but was wondering if there is a way to do it nativly though ASP NET MVC  Or what are the best practices for passing data in this way

User · Answer

A different take with a simple jQuery plugin

Even though answers to this question are long overdue, but I'm still posting a nice solution that I came with some time ago and makes it really simple to send complex JSON to Asp.net MVC controller actions so they are model bound to whatever strong type parameters.

This plugin supports dates just as well, so they get converted to their DateTime counterpart without a problem.

You can find all the details in my blog post where I examine the problem and provide code necessary to accomplish this.

All you have to do is to use this plugin on the client side. An Ajax request would look like this:

$.ajax({
    type: "POST",
    url: "SomeURL",
    data: $.toDictionary(yourComplexJSONobject),
    success: function() { ... },
    error: function() { ... }
});

But this is just part of the whole problem. Now we are able to post complex JSON back to server, but since it will be model bound to a complex type that may have validation attributes on properties things may fail at that point. I've got a solution for it as well. My solution takes advantage of jQuery Ajax functionality where results can be successful or erroneous (just as shown in the upper code). So when validation would fail, error function would get called as it's supposed to be.

User · Answer

This answer is a follow up to DaRKoN  s answer that utilized the object filter    ObjectFilter Param    postdata   RootType   typeof ObjectToSerializeTo        public JsonResult ControllerMethod ObjectToSerializeTo postdata            I was having a problem figuring out how to send multiple parameters to an action method and have one of them be the json object and the other be a plain string  I m new to MVC and I had just forgotten that I already solved this problem with non-ajaxed views   What I would do if I needed  say  two different objects on a view  I would create a ViewModel class  So say I needed the person object and the address object  I would do the following   public class SomeViewModel          public Person Person   get  set         public Address Address   get  set        Then I would bind the view to SomeViewModel  You can do the same thing with JSON    ObjectFilter Param    jsonViewModel   RootType   typeof JsonViewModel       Don t forget to add the object filter class in DaRKoN  s answer  public JsonResult doJsonStuff JsonViewModel jsonViewModel         Person p   jsonViewModel Person       Address a   jsonViewModel Address          Do stuff      jsonViewModel Person   p       jsonViewModel Address   a       return Json jsonViewModel       Then in the view you can use a simple call with JQuery like this   var json          Person    Name   John Doe   Sex   Male   Age  23         Address    Street   123 fk st    City   Redmond   State   Washington          ajax        url   home doJsonStuff        type   POST        contentType   application json        dataType   json        data  JSON stringify json     You ll need to reference json2 js      success  function  response                   var person   response Person            var address   response Address

User · Answer

Edit   This method should no longer be needed with the arrival of MVC 3  as it will be handled automatically - http   weblogs asp net scottgu archive 2010 07 27 introducing-asp-net-mvc-3-preview-1 aspx    You can use this ObjectFilter       public class ObjectFilter   ActionFilterAttribute        public string Param   get  set        public Type RootType   get  set         public override void OnActionExecuting ActionExecutingContext filterContext            if   filterContext HttpContext Request ContentType    string Empty  Contains  application json                  object o               new DataContractJsonSerializer RootType  ReadObject filterContext HttpContext Request InputStream               filterContext ActionParameters Param    o                       You can then apply it to your controller methods like so        ObjectFilter Param    postdata   RootType   typeof ObjectToSerializeTo        public JsonResult ControllerMethod ObjectToSerializeTo postdata            So basically  if the content type of the post is  application json  this will spring into action and will map the values to the object of type you specify

User · Answer

You say  I am not using a forms to manipulate the data   But you are doing a POST  Therefore  you are  in fact  using a form  even if it s empty      ajax s dataType tells jQuery what type the server will return  not what you are passing  POST can only pass a form  jQuery will convert data to key value pairs and pass it as a query string  From the docs      Data to be sent to the server  It is   converted to a query string  if not   already a string  It s appended to the   url for GET-requests  See processData   option to prevent this automatic   processing  Object must be Key Value   pairs  If value is an Array  jQuery   serializes multiple values with same   key i e   foo   bar1    bar2      becomes   amp foo bar1 amp foo bar2     Therefore    You aren t passing JSON to the server  You re passing JSON to jQuery  Model binding happens in the same way it happens in any other case

User · Answer

There is the JavaScriptSerializer class you can use too  That will let you deserialize the json to a  NET object  There s a generic Deserialize lt T gt   though you will need the  NET object to have a similar signature as the javascript one  Additionally there is also a DeserializeObject method that just makes a plain object  You can then use reflection to get at the properties you need   If your controller takes a FormCollection  and you didn t add anything else to the data the json should be in form 0    public ActionResult Save FormCollection forms      string json   forms 0        do your thing here

User · Answer

in response to Dan s comment above      I am using this method to implement   the same thing  but for some reason I   am getting an exception on the   ReadObject method   Expecting element    root  from namespace      Encountered    None  with name     namespace        Any ideas why      Dan Appleyard Apr 6    10 at 17 57   I had the same problem  MVC 3 build 3 0 11209 0   and the post below solved it for me   Basically the json serializer is trying to read a stream which is not at the beginning  so repositioning the stream to 0  fixed  it     http   nali org asp-net-mvc-expecting-element-root-from-namespace-encountered-none-with-name-namespace

[asp.net-mvc] ASP.NET MVC How to pass JSON object from View to Controller as Parameter

A different take with a simple jQuery plugin

Examples related to asp.net-mvc

Examples related to json