title: ASP.NET with JQuery AJAX causing "Bad Request" error
body: <p>I'm getting a "bad request" error when I try to HTTP post to the "Home" controller using the following JQuery/AJAX. Does anyone see the cause? </p>
  
  <p>This is pretty much a copy of the example obtained from here, except greatly simplified: <a href="https://stackoverflow.com/questions/8486132/jquery-ajax-passing-value-from-mvc-view-to-controller">JQUERY ajax passing value from MVC View to Controller</a>. It seems it's not finding the controller, which confuses me -- I've fiddled with this a lot, and with no success.</p>
  
  <p>Button in the view that throws a "bad request" error, and does not reach the controller:</p>
  
  <pre><code>&lt;td&gt; &lt;input type="submit" class="btn-default" name="submit" value="Start Simulating-Jquery" id="btnSaveComments" /&gt;
              &lt;script&gt;     $('#btnSaveComments').click(function () {
                      $.ajax({
                          url: '&lt;%:Url.Action("SaveComments")%&gt;',
                          type: "post",
                          cache: false,
                          success: function (savingStatus) {
                              alert("save")
                          },
                          error: function (xhr, ajaxOptions, thrownError) {
                              alert(xhr.toString())
                              alert(ajaxOptions.toString())
                              alert(thrownError.toString())
                          }
                      });
                  });
              &lt;/script&gt;
          &lt;/td&gt;
  </code></pre>
  
  <p>Example of a button in the view that <strong>does</strong> work:</p>
  
  <pre><code>                     @Ajax.ActionLink("ActonLinkTest", "SaveComments", "Home",
                                  new AjaxOptions
                                  {
                                      HttpMethod = "POST"
                                  }
                              )
  </code></pre>
  
  <p>Controller (Home):</p>
  
  <pre><code>    [HttpPost]
      public ActionResult SaveComments()
      {
          return new EmptyResult();
      }
  </code></pre>
  
  <p>EDIT: This also fails.</p>
  
  <p>View:</p>
  
  <pre><code>&lt;td&gt;
              &lt;input type="submit" class="btn-default" name="submit" value="Start Simulating-Jquery #2" id="btnSaveComments2" /&gt;
              &lt;script&gt;
                  $('#btnSaveComments2').click(function () {
                      var comments = 'a';
                      var selectedId = '1';
  
                      $.ajax({
                          url: '&lt;%: Url.Action("SaveComments")%&gt;',
                          data: { 'id': selectedId, 'comments': comments },
                          type: "post",
                          cache: false,
                          success: function (savingStatus) {
  
                          },
                          error: function (xhr, ajaxOptions, thrownError) {
                              alert('failed')//$('#lblCommentsNotification').text("Error encountered while saving the comments.");
                          }
                      });
                  });
              &lt;/script&gt;
          &lt;/td&gt;
  </code></pre>
  
  <p>Replacing the previous savecomments function with this one in the controller:</p>
  
  <pre><code> [HttpPost]
      public ActionResult SaveComments(int id, string comments)
      {
          return new EmptyResult();
      }
  </code></pre>