title: POST 500 error when sending JSON stringified javascript object to controller
body: <p>I'm currently working on a ASP.net Web application with the MVC pattern. I have set up a page where people can add items to a gridstack section and drag them around (Gridstack is a plugin to create draggable boxes/objects). My goal is to send the final coordinates of these boxes to my controller:</p>
  
  <pre><code>function saveData() {
      var pagePositions = [];
  
      // Fill our array
      $('.grid-stack-item.ui-draggable').each(function () {
          var $this = $(this);
          pagePositions.push({
              x: $this.attr('data-gs-x'),
              y: $this.attr('data-gs-y'),
              w: $this.attr('data-gs-width'),
              h: $this.attr('data-gs-height'),
              content: $('.grid-stack-item-content', $this).html()
          });
      });
  
      // Convert array to object
      var pagePosData = toObject(pagePositions);
  
      alert(pagePosData);
  
      $.ajax({
          type: "POST",
          url: "savePage",
          data: { positions: JSON.stringify(pagePosData) }
      });
  
  } function toObject(arr) {
      var rv = {};
      for (var i = 0; i &lt; arr.length; ++i)
          if (arr[i] !== undefined) rv[i] = arr[i];
      return rv;
  }
  </code></pre>
  
  <p>The code above fills the attributes of the given html elements and puts them into an array. I assumed, according to several topics on the internet, that sending the array was causing trouble so i inserted a function that converts the array to an javascript object (key value pairs). I send them to my controller with an AJAX call which results in a error code 500:</p>
  
  <pre><code>    [HttpPost]
      public string savePage(string positions)
      {
          //some code
          var json = positions;
          var test = "";
          CreatePagemodelJson obj = new JavaScriptSerializer().Deserialize&lt;CreatePagemodelJson&gt;(positions.ToString());
          //var jsonObject = JsonConvert.DeserializeObject&lt;CreatePagemodel&gt;(positionsJson.ToString());
  
          return "";
      }
  </code></pre>
  
  <p>I set up breakpoints inside the controller to read the value i get from the parameter positions, but it doesn't even get to that point. I tried setting up models for the Json file but the problem here is that the post calls return a dynamic json format. </p>
  
  <p><strong>Update:</strong>
  I managed to get it working with below posts. With below structure, i get the results as an array according to my model.</p>
  
  <pre><code>function saveData() {
      var pagePositions = [];
  
      // Fill our array
      $('.grid-stack-item.ui-draggable').each(function () {
          var $this = $(this);
          pagePositions.push({
              x: $this.attr('data-gs-x'),
              y: $this.attr('data-gs-y'),
              w: $this.attr('data-gs-width'),
              h: $this.attr('data-gs-height'),
              content: $('.grid-stack-item-content', $this).html()
          });
      });
  
      alert(pagePositions);
  
      $.ajax({
          type: "POST",
          url: "savePage",
          contentType: 'application/json',
          data: JSON.stringify(pagePositions)
      });
  }
  
  public class Position
  {
      public string x { get; set; }
      public string y { get; set; }
      public string w { get; set; }
      public string h { get; set; }
      public string content { get; set; }
  }
  
  [HttpPost]
  public ActionResult savePage(IEnumerable&lt;Position&gt; positions)
  {
      //some code
      return View("SomeView");
  }
  </code></pre>
  
  <p>The parameter positions succesfully returns the array of pagePositions send with the post: 
  <a href="https://i.stack.imgur.com/NojWK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NojWK.png" alt="Succesfull transfer"></a></p>
  
  <p>I tried sending the data without the JSON.stringify(pagePositions) and ContentType: 'application/json' option but i got a null return in my parameter on the controller. </p>