title: Sending JSON object to Web API
body: <p>I am trying to figure out how I can send some information from a form to a Web API action. This is the jQuery/AJAX I'm trying to use:</p>
  
  <pre><code>var source = { 
          'ID': 0, 
          'ProductID': $('#ID').val(), 
          'PartNumber': $('#part-number').val(),
          'VendorID': $('#Vendors').val()
      }
  
      $.ajax({
          type: "POST",
          dataType: "json",
          url: "/api/PartSourceAPI/",
          data: JSON.stringify({ model: source }),
          success: function (data) {
              alert('success');
          },
          error: function (error) {
              jsonValue = jQuery.parseJSON(error.responseText);
              jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 });
          }
      });
  </code></pre>
  
  <p>Here is my model</p>
  
  <pre><code>public class PartSourceModel
  {
      public int ID { get; set; }
      public int ProductID { get; set; }
      public int VendorID { get; set; }
      public string PartNumber { get; set; }
  }
  </code></pre>
  
  <p>Here is my view</p>
  
  <pre><code>&lt;div id="part-sources"&gt;
      @foreach (SmallHorse.ProductSource source in Model.Sources)
      {
          @source.ItemNumber &lt;br /&gt;
      }
  &lt;/div&gt;
  &lt;label&gt;Part Number&lt;/label&gt;
  &lt;input type="text" id="part-number" name="part-number" /&gt;
  
  &lt;input type="submit" id="save-source" name="save-source" value="Add" /&gt;
  </code></pre>
  
  <p>Here is my controller action</p>
  
  <pre><code>// POST api/partsourceapi
  public void Post(PartSourceModel model)
  {
      // currently no values are being passed into model param
  }
  </code></pre>
  
  <p>What am I missing? right now when I debug and step through this when the ajax request hits the controller action there is nothing being passed into the model param.</p>