title: How to post various custom data types using Ajax in MVC3?
body: <p>I have this ViewModel to represent each Category and it's several Sub-Categories in my project:</p>
  
  <pre><code>public class Categories
  {
      //a simple string for the category name
      [Required]
      public string Cat_Name { get; set; }
  
      //a list of strings for the sub-categories
      public List&lt;string&gt; SubCat_Name { get; set; }
  }
  </code></pre>
  
  <p>I pass this model to the view, and I use it to construct my form like this:</p>
  
  <pre><code>@using (Html.BeginForm("Category", "Admin", FormMethod.Post))
  {
      @Html.TextBoxFor(m =&gt; m.Name, new { @class = "Cat" })
  
      @Html.TextBoxFor(m =&gt; m.SubName, new { @class = "Sub" })
  
      @Html.TextBoxFor(m =&gt; m.SubName, new { @class = "Sub" })
  
      @Html.TextBoxFor(m =&gt; m.SubName, new { @class = "Sub" })
  
      @Html.TextBoxFor(m =&gt; m.SubName, new { @class = "Sub" })
  
      &lt;input type="button" value="Create New Category" name="Category" onclick="DoIt()" /&gt;
  }
  </code></pre>
  
  <p>And as you see, the javascript function "<code>DoIt()</code>" is called by the click on the input button.
  here's the function :</p>
  
  <pre><code>function DoIt() {
      var stringArray = new Array();
      //I put all of the sub-categories inside an array, to be like a list&lt;string&gt;
  
      $(".Sub").each(function (index, value) {
          stringArray[index] = this.value;
      });
  
      $.ajax({
          url: '/Admin/Category',
          type: "POST",
          data: JSON.stringify($(".Cat").attr("value") , stringArray),
          dataType: "json",
          contentType: "application/json; charset=utf-8",
          success: function () { console.log("post done"); },
          error: function () { }
      });
  }
  </code></pre>
  
  <p>As you can see, in the ajax method I'm trying to pass the "Category Name" <code>$(".Cat").attr("value")</code> and it's "Sub-Category Names" <code>stringArray</code> to the corresponding action method which requires <code>Categories</code> datatype I created as a viewmodel before. It looks like this:</p>
  
  <pre><code>public ActionResult Category(Categories CAT)
  {
      //Do something
      return View();
  }
  </code></pre>
  
  <p>The problem is the ajax method can't post two datatypes at once, or just that I don't know how to do it.</p>
  
  <p>I also tried this :</p>
  
  <pre><code>var postdata = {
      Name: $(".Cat").attr("value"),
      SubName: stringArray
  };
  </code></pre>
  
  <p>and put <code>postdata</code> inside the <code>JSON.stringify()</code> instead. But still nothing is passed to the action method.</p>