title: ASP.Net MVC 3 - JSON Model binding to array
body: <p>I am on ASP.Net MVC 3, and going by the feature list supported in at, i should be able to get default json model binding working out of the box. However i havent been successful in binding an array/collection from json to the action method parameter. Although I did get simple json object binding working right. Would greatly appreciate if an expert here could tell me what i am doing wrong.</p>
  
  <p>Here is the code:</p>
  
  <p>Server side code first:</p>
  
  <p>//Action Method</p>
  
  <pre><code> public JsonResult SaveDiscount(IList&lt;Discount&gt; discounts)
      {
         foreach(var discount in discounts)
         {
         ....
         }
      }
  </code></pre>
  
  <p>//View model</p>
  
  <pre><code>public class Discount
  {
      string Sku{get; set;}
      string DiscountValue{get; set;}
      string DiscountType{get; set;}
  
  }
  </code></pre>
  
  <p>//client side(jquery/js):</p>
  
  <pre><code>    var discount = {};
      var jsondatacoll = [];
      $('#discountgrid tr').each(function () {
  
          sku = $(this).find("td").eq(1).html();
          discValue = $(this).find('.discval').val();
          discType = $(this).find('.disctype').val();
  
          discount = { Sku: sku, DiscountType: discType, DiscountValue: discValue};
          jsondatacoll.push(discount);
          }
      })
      if (jsondatacoll.length &gt; 0) {
          var catalogDiscount = JSON.stringify(jsondatacoll);
  
          $.ajax(
          {
              url: '/url/savediscount',
              type: 'POST',
              data: catalogDiscount,
              dataType: 'json',
              contentType: 'application/json; charset=utf-8',
              success: function (data, textStatus, jqXHR) {
                  ...                   
              },
              error: function (objAJAXRequest, strError) {                 
                 ...
              }
          }
       );   //ajax
      }
  </code></pre>
  
  <p>i did check the json payload in fiddler and it look like below:</p>
  
  <pre><code>[
      {"Sku":"sku1","DiscountType":"type1","DiscountValue":"10"},     
      {"Sku":sku2","DiscountType":"type1","DiscountValue":"12"}, 
      {"Sku":"sku3","DiscountType":"type2","DiscountValue":"40"}
  ]
  </code></pre>
  
  <p>And on the server side i do see the <code>IList&lt;Discount&gt;</code> discounts has been populated with 3 empty <code>Discount</code> objects - meaning the properties are null but the length of the discounts argument is 3.</p>