title: jquery .ajax call to controller, model is null
body: <p>I've spent about 10hrs and read a zillion posts trying to figure this out but have to admit defeat, so hopefully some kind soul will straighten me out. </p>
  
  <p>I am trying to send data to my controller (GET) to return a partial view. The model received by the controller is always null despite the variations I've tried. To keep it really simple I've pared the model down to one element. </p>
  
  <p>What am I missing? (Thanks in advance) </p>
  
  <p>Model: </p>
  
  <pre><code>public class TextContentViewModel
  {
      public string ContentType {get; set;}
  }
  </code></pre>
  
  <p>Controller: </p>
  
  <pre><code>public ActionResult Preview(TextContentViewModel paneContent)
  {
      return PartialView("_Text");
  }
  </code></pre>
  
  <p>Javascript: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $("#previewButton").click(showPreview);
  
      function showPreview() {
           content = {
              ContentType: $("#ContentTypeID").val(),
          }
                  $.ajax({
                  url: '@Url.Action("Preview")',
                  type: 'GET',
                  contentType: 'application/json',
                  data: JSON.stringify(content),
                  success: function (result) {
                      $('#preview').html(result);
                  },
                  error: function (result) {
                      alert("something went wrong");
                  }
              });
           };
  </code></pre>
  
  <p></p>