title: ASP.Net MVC ajax controller call
body: <p>I am trying to call the controller by clicking a button. My goal is getting date values from view and calling other data from controller, but ajax thing is so bugging me out. So I made a testing one, but it still does not work.</p>
  
  <p>I followed several tutorials and SO questions, and this is how I figured out to call the controller method ("testtest") through javascript ajax functions. Here is <a href="http://www.makeitspendit.com/calling-asp-mvc-controllers-from-jquery-ajax/" rel="nofollow noreferrer">the tutorial</a> that I followed for the last time. </p>
  
  <pre class="lang-javascript prettyprint-override"><code>$(document).ready(function () {
      $('#btnSelectDate').click(function () {
          alert("working");
          var text= $('#txtStartDateI').val();
          var button= $('#btnSelectDate').val();
          alert(text + " " + button);
          $.ajax({
              url: "/Home/testtest",
              type: "post",
              datatype: "text",
              data: { btnSelectDate: button, txtStartDate: text},
              success: function (data) {
                  ('#testarea').html(data);
              },
              error: function () {
                  $('#testarea').html("ERROR");
              }
          });
      });
  });
  </code></pre>
  
  <p>And this is the method "testtest":</p>
  
  <pre><code>[HttpPost]
  public string testtest( string btnSelectDate,string txtStartDate ) {
      return ("btnValue : " + btnSelectDate + "\ntxtStartDate: " + txtStartDate);
  }
  </code></pre>
  
  <p>When I click the button, the alerts are working, but it does not call the method "testtest" in Homecontroller. I set the breakpoints in controller, but it does not go through. After it shows the alert dialog, the whole page blinks and nothing has been changed. I tried to make the <code>&lt;div id="testarea"&gt;&lt;/div&gt;</code> get the text value.</p>
  
  <p>I tried different URL forms like:</p>
  
  <pre><code>url: '@Url.Action("testtest","Home")'
  url: 'localhost/Home/testtest'
  </code></pre>
  
  <p>But it still does not hit the controller.</p>
  
  <p>Does ajax require any special scripts to add? (I guess I added ajax scripts since there are some links containing 'ajax'.)
  Or do I need to do something special to call the method using ajax?</p>
  
  <p>The bellow is my whole code. This is my controller "Home":</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  
  namespace haha.Controllers {
      public class HomeController : Controller {
          public ActionResult View() {
              return View("View");
          }
  
          [HttpPost]
          public string testtest( string btnSelectDate,string txtStartDate ) {
              return ("btnValue : " + btnSelectDate + "\ntxtStartDate: " + txtStartDate);
          }
      }
  }
  </code></pre>
  
  <p>View:
  (and for the scripts, I think there are several scripts which are duplicated, but I can't figure those out. What can I remove?)</p>
  
  <pre><code>@using System;
  @using System.Collections.Generic;
  @using System.Linq;
  @using System.Web;
  @using System.Web.Mvc;
  
  @{
      Layout = null;
  }
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width" /&gt;
          &lt;title&gt;View&lt;/title&gt;
          &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" /&gt;
  
          &lt;script src="~/Scripts/jquery-1.5.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="~/Scripts/jquery.validate.min.js"&gt;&lt;/script&gt;
          &lt;script src="~/Scripts/jquery.validate.unobtrusive.min.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"&gt;&lt;/script&gt;
  
          &lt;script src="~/scripts/jquery-*.*.*.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"&gt;&lt;/script&gt;
  
          &lt;script&gt;
              $(function () {
                  $(".Datepicker").datepicker({
                      dateFormat: "yy-mm-dd",
                      changeMonth: true,
                      changeYear: true,
                      nextText: 'next Month',
                      prevText: 'previous Month',
                      showButtonPanel: true,
                      currentText: 'Today'
                  })
              });
          &lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;  
              $(document).ready(function () {
                  $('#btnSelectDate').click(function (event) {
                      alert("working");
                      var text= $('#txtStartDateI').val();
                      var button= $('#btnSelectDate').val();
                      $.ajax({
                          url: "/Home/testtest",
                          type: "post",
                          datatype: "text",
                          data: { btnSelectDate: button, txtStartDate: text},
                          success: function (data) {
                              ('#testarea').html(data);
                          },
                          error: function () {
                              $('#testarea').html("ERROR");
                          }
                      });
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          this is test area
          &lt;div id="testarea"&gt;&lt;/div&gt;
          &lt;hr /&gt;
          &lt;p&gt;&lt;/p&gt;
          &lt;div&gt;
          &lt;form id="formDTInsurer"&gt;
              StartDate:
              &lt;input type="text" class="Datepicker" id="txtStartDateI" name="txtStartDate"&gt;
              &lt;button type="submit" id="btnSelectDate" name="btnSelectDate" value="InsurerDate"&gt;Select&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Edit</strong></p>
  
  <p>Following <a href="https://stackoverflow.com/users/3559349/stephen-muecke">Stephen Muecke</a>'s comment, I inspected the console using chrome tool. The following is the error. </p>
  
  <pre><code>                                                                      jquery-1.5.1.js:869 
  Uncaught TypeError: b.parents(...).addBack is not a function
      at Object.parse (jquery.validate.unobtrusive.min.js:19)
      at HTMLDocument.&lt;anonymous&gt; (jquery.validate.unobtrusive.min.js:19)
      at Object.resolveWith (jquery-1.5.1.js:862)
      at Function.ready (jquery-1.5.1.js:420)
      at HTMLDocument.DOMContentLoaded (jquery-1.5.1.js:1055)
  parse            @ jquery.validate.unobtrusive.min.js:19
  (anonymous)      @ jquery.validate.unobtrusive.min.js:19
  resolveWith      @ jquery-1.5.1.js:862
  ready            @ jquery-1.5.1.js:420
  DOMContentLoaded @ jquery-1.5.1.js:1055
  </code></pre>
  
  <p>Since there were more errors with these scripts, I commented out some of those, and it actually reduced the number of errors. The only left is the one above.The following is what I now have in current html file.</p>
  
  <pre><code>&lt;script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/jquery.validate.min.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/jquery.validate.unobtrusive.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" /&gt;
  
      &lt;!--&lt;script src="~/Scripts/jquery-1.5.1.min.js"&gt;&lt;/script&gt;--&gt;
      &lt;!--&lt;script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"&gt;&lt;/script&gt;--&gt;
      &lt;!--&lt;script src="~/scripts/jquery-*.*.*.min.js"&gt;&lt;/script&gt;--&gt;
      &lt;!--&lt;script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"&gt;&lt;/script&gt;--&gt;
  </code></pre>