title: Pass multiple JSON objects to MVC3 action method
body: <p>JQuery code:</p>
  
  <pre>
  
      //This passes NULL for "CategoryID", "CategoryName", "ProductID", "ProductName"
       $("#btnPost").click(function () {
              var CategoryModel = {
                  CategoryID: 1,
                  CategoryName: "Beverage"
              };
              var ProductModel = {
                  ProductID: 1,
                  ProductName: "Chai"
              };
              var data1 = {};
  
              data1["cat"] = CategoryModel;
              data1["prd"] = ProductModel;
  
              var jsonData = JSON.stringify(data1);
  
              $.ajax({
                  url: url + '/Complex/ModelTwo', //This works but property values are null 
                  type: 'post',
                  dataType: 'json',           
                  data: { "cat": CategoryModel, "prd": ProductModel }, //jsonData,
                  cache: false,
                  success: function (result) {
                      alert(result);
                  },
                  error: function (xhr, ajaxOptions, thrownError) {
                      alert(thrownError);
                  }
              });
          });
  
  </pre>
  
  <p>MVC Code (C#):</p>
  
  <pre><code>     public class ComplexController : Controller
      {
          public string ModelOne(Category cat)
          {
              return "this took single model...";
          }
  
          public string ModelTwo(Category cat, Product prd)
          {
              return "this took multiple model...";
          }
      }
      public class Category
      {
          public int CategoryID { get; set; }
          public string CategoryName { get; set; }
      }
      public class Product
      {
          public int ProductID { get; set; }
          public string ProductName { get; set; }
      }
  </code></pre>
  
  <p>Now the issue is, I couldn't get it working by passing "CategoryMode", "ProductModel" into "ModelTwo" action method. The JQuery post correctly identifies the action method "ModelTwo" but "cat", "prd" property values are null. "CategoryID", "CategoryName", "ProductID", "ProductName" all are null despite hitting that method. </p>
  
  <pre>
  
      //THIS ONE WORKS FINE...
  
       $("#btnPost").click(function () {
              var CategoryModel = {
                  CategoryID: 1,
                  CategoryName: "Beverage"
              };
              var ProductModel = {
                  ProductID: 1,
                  ProductName: "Chai"
              };
              var data1 = {};
  
              data1["cat"] = CategoryModel;
              data1["prd"] = ProductModel;
  
              var jsonData = JSON.stringify(data1);
  
              $.ajax({
                  url: url + '/Complex/ModelOne', //This works
                  type: 'post',
                  dataType: 'json',           
                  data: CategoryModel,
                  cache: false,
                  success: function (result) {
                      alert(result);
                  },
                  error: function (xhr, ajaxOptions, thrownError) {
                      alert(thrownError);
                  }
              });
          });
  
  </pre>
  
  <p>So what's wrong with my first JQuery call to "ModelTwo" action method?</p>
  
  <p>I spent lots of time figuring this out, but not sure what's going on. There is no issue with routing here because I can land on the right action method...</p>
  
  <p>Any help will be greatly appreciated.</p>
  
  <p>Thanks!</p>