title: How to send js variables to mvc controller
body: <p>I`m new to client-server programming concepts. What I need, to send four js vars to my MVC 3 controller action.</p>
  
  <pre><code>    $(document).ready(function() {
          var $jcrop;
  
          $('#image').Jcrop({
              bgColor: 'red',
              onSelect: refreshData
          }, function () {
              $jcrop = this;
          });
  
          function refreshData(selected) {
              myData = {
                  x1: selected.x1,
                  x2: selected.x2,
                  y1: selected.y1,
                  y2: selected.y2
              };
          }
      });
  </code></pre>
  
  <p>So i get my vars in browser.</p>
  
  <p>What I have on server side is:</p>
  
  <pre><code>    public ActionResult CreateCover(ImageCoordinates coordinates) {
          ViewData.Model = coordinates;
          return View();
      }
  
  public class ImageCoordinates
  {
      public int x1 { get; set; }
      public int x2 { get; set; }
      public int y1 { get; set; }
      public int y2 { get; set; }
  }
  </code></pre>
  
  <p>Is there an easy way to post my four params from js to my action? 
  I tried to use couple examples from this site, using $.ajax</p>
  
  <p>Like this</p>
  
  <pre><code>        $.ajax({
              url: '/dashboard/createcover',
              type: 'POST',
              data: JSON.stringify(myData),
              contentType: 'application/json; charset=utf-8',
              success: function (data) {
                  alert(data.success);
              },
              error: function () {
                  alert("error");
              },
              async: false
          });
  </code></pre>
  
  <p>But it does not worked, i received 0 0 0 0 in my action. But honestly I`m not even sure how to call this jquery function. Should i call it by clicking the button, or it auto calls when i post the form? 
  And are there other methods to send this params?</p>