title: Submit form with jquery ajax
body: <p>I'm trying to learn MVC and one the things I want to do is submit a form to an action in my controller and this action will return the submitted data. Sounds simple but I've been trying for hours without any success.
  my view:</p>
  
  <pre><code> @using (Html.BeginForm("BlogComment","Blog"))
   {
       @Html.ValidationSummary(true)
      &lt;legend class="AddAComment"&gt;Add a comment&lt;/legend&gt;
  
      &lt;div class="commentformwrapper"&gt;
  
          &lt;div class="editor-text"&gt;
          &lt;span class="editor-label"&gt;User Name:&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div class="editor-text"&gt;
          &lt;input type="text" id="username" /&gt;
          &lt;/div&gt;
  
          &lt;div class="editor-text"&gt;
          &lt;textarea id="comment" rows="6" cols="23"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
  
          &lt;div class="editor-field"&gt;
          &lt;input type="hidden" id="hiddendate" /&gt;
          &lt;/div&gt;
  
          &lt;input type="submit" id="submit" value="Create" /&gt;
  
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>my controller:</p>
  
  <pre><code>[HttpPost]   
  public ActionResult CommentForm(Comment comment)
  {
      Comment ajaxComment = new Comment();
      ajaxComment.CommentText = comment.UserName;
      ajaxComment.DateCreated = comment.DateCreated;
      ajaxComment.PostId = comment.PostId;
      ajaxComment.UserName = comment.UserName;
  
      mRep.Add(ajaxComment);
      uow.Save();
      //Get all the comments for the given post id
  
      return Json(ajaxComment);
  }
  </code></pre>
  
  <p>and my js:</p>
  
  <pre><code> $(document).ready(function () {
  
          $('form').submit(function () {
  
              $.ajax({
                  url: '@Url.Action("CommentForm")',
                  type: "POST",
                  dataType: "json",
                  contentType: "application/json; charset=utf-8",
                  data: {
                      PostId: $('.postid').val(),
                      UserName: $('#username').val(),
                      DateCreated: new Date(),
                      CommentText: $('#comment').val()
                  },
                  success: function (result) {
  
                      alert("success " + result.UserName);
                  },
                  error: function (result) {
                      alert("Failed");
                  }
              });
            return false;
          });
      });
  </code></pre>