title: Sending complex object in ajax to MVC
body: <p>The value of <code>List&lt;Order&gt;</code> returns as <code>null</code> in my controller action method while sending the complex object. Can someone help to identify the issue? Do we need to pass array of objects with indexes?</p>
  
  <h2>JavaScript</h2>
  
  <pre><code>function OnCustomerClick() {
      //var orders = [];
      //orders.push({ 'OrderId': '1', 'OrderBy': 'Saroj' });
  
      var complexObject = {
          FirstName: 'Saroj',
          LastName: 'K',
          //Orders : orders
          Orders: [{ OrderId: 1, OrderBy: 'Saroj' }, { OrderId: 2, OrderBy: 'Kumar' }]
      };
  
      var obj = { customer: complexObject };
      var data2send = JSON.stringify(obj);
  
      $.ajax({
          type: "POST",
          url: 'Home/TestCustomer1',
          data: data2send,
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (arg) { //call successfull
          },
          error: function (xhr) {
              //error occurred
          }
      });
  };
  </code></pre>
  
  <h2>MVC</h2>
  
  <pre><code> public ActionResult TestCustomer1(Customer customer)
      {
          return Json(customer);
      }
  </code></pre>
  
  <h2>C#</h2>
  
  <pre><code>public class Customer
  {
      public string FirstName { get; set; }
      public string LastName { get; set; }
      List&lt;order&gt; Orders { get; set; }
  }
  
  public class order
  {
      public int OrderId { get; set; }
      public string  OrderBy { get; set; }
  }
  </code></pre>