title: How to properly call an MVC Controller with AJAX
body: <p>I am trying to make an AJAX call to an MVC controller ActionResult that I have.  I have used ajax before but I am new to MVC.  I have an AJAX call in a separate .js file that is triggered in an on click event attached to one of the buttons in a view.  The AJAX call is being triggered as expected, but always returns with a "resource not found" error.  Code shown below:</p>
  
  <p>View Button:</p>
  
  <pre><code>&lt;input type="button" class="btn btn-success" value="Download Pictures" id="btnGetPics"/&gt;
  </code></pre>
  
  <p>AJAX Call:</p>
  
  <pre><code>    var ajaxURL = 'MMRController/TestAjax';
      $('#btnGetPics').on('click',
          function () {
              $.ajax({
                  type: 'POST',
                  url: ajaxURL,
                  data: param = "this",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  beforeSend: function () {
                      console.log('firing ajax call');
                  },
                  success: function (data) {
                      alert(data);
                  },
                  error: function (ex) {
                      console.log('Error');
                      console.log(ex.responseText);
                      alert("Error downloading images.  Please contact IT.");
                  }
              });
          });
  </code></pre>
  
  <p>ActionResult in Controller:</p>
  
  <pre><code>        [HttpPost]
          public ActionResult TextAjax(string param)
          {
              return Json(param + " works", JsonRequestBehavior.AllowGet);
          }
  </code></pre>
  
  <p>Below is the error I am getting:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;The resource cannot be found.&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width" /&gt;
          &lt;style&gt;
           body {font-family:"Verdana";font-weight:normal;font-size: .7em;color:black;} 
           p {font-family:"Verdana";font-weight:normal;color:black;margin-top: -5px}
           b {font-family:"Verdana";font-weight:bold;color:black;margin-top: -5px}
           H1 { font-family:"Verdana";font-weight:normal;font-size:18pt;color:red }
           H2 { font-family:"Verdana";font-weight:normal;font-size:14pt;color:maroon }
           pre {font-family:"Consolas","Lucida Console",Monospace;font-size:11pt;margin:0;padding:0.5em;line-height:14pt}
           .marker {font-weight: bold; color: black;text-decoration: none;}
           .version {color: gray;}
           .error {margin-bottom: 10px;}
           .expandable { text-decoration:underline; font-weight:bold; color:navy; cursor:hand; }
           @media screen and (max-width: 639px) {
            pre { width: 440px; overflow: auto; white-space: pre-wrap; word-wrap: break-word; }
           }
           @media screen and (max-width: 479px) {
            pre { width: 280px; }
           }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body bgcolor="white"&gt;
  
              &lt;span&gt;&lt;H1&gt;Server Error in '/' Application.&lt;hr width=100% size=1 color=silver&gt;&lt;/H1&gt;
  
              &lt;h2&gt; &lt;i&gt;The resource cannot be found.&lt;/i&gt; &lt;/h2&gt;&lt;/span&gt;
  
              &lt;font face="Arial, Helvetica, Geneva, SunSans-Regular, sans-serif "&gt;
  
              &lt;b&gt; Description: &lt;/b&gt;HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. &amp;nbsp;Please review the following URL and make sure that it is spelled correctly.
              &lt;br&gt;&lt;br&gt;
  
              &lt;b&gt; Requested URL: &lt;/b&gt;/MMR/MMRController/TestAjax&lt;br&gt;&lt;br&gt;
  
              &lt;hr width=100% size=1 color=silver&gt;
  
              &lt;b&gt;Version Information:&lt;/b&gt;&amp;nbsp;Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.7.3429.0
  
              &lt;/font&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  &lt;!-- 
  [HttpException]: A public action method &amp;#39;MMRController&amp;#39; was not found on controller &amp;#39;MOHR.Controllers.MMRController&amp;#39;.
     at System.Web.Mvc.Controller.HandleUnknownAction(String actionName)
     at System.Web.Mvc.Controller.&lt;&gt;c.&lt;BeginExecuteCore&gt;b__152_1(IAsyncResult asyncResult, ExecuteCoreState innerState)
     at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncVoid`1.CallEndDelegate(IAsyncResult asyncResult)
     at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResultBase`1.End()
     at System.Web.Mvc.Controller.EndExecuteCore(IAsyncResult asyncResult)
     at System.Web.Mvc.Controller.&lt;&gt;c.&lt;BeginExecute&gt;b__151_2(IAsyncResult asyncResult, Controller controller)
     at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncVoid`1.CallEndDelegate(IAsyncResult asyncResult)
     at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResultBase`1.End()
     at System.Web.Mvc.Controller.EndExecute(IAsyncResult asyncResult)
     at System.Web.Mvc.Controller.System.Web.Mvc.Async.IAsyncController.EndExecute(IAsyncResult asyncResult)
     at System.Web.Mvc.MvcHandler.&lt;&gt;c.&lt;BeginProcessRequest&gt;b__20_1(IAsyncResult asyncResult, ProcessRequestState innerState)
     at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncVoid`1.CallEndDelegate(IAsyncResult asyncResult)
     at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResultBase`1.End()
     at System.Web.Mvc.MvcHandler.EndProcessRequest(IAsyncResult asyncResult)
     at System.Web.Mvc.MvcHandler.System.Web.IHttpAsyncHandler.EndProcessRequest(IAsyncResult result)
     at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()
     at System.Web.HttpApplication.ExecuteStepImpl(IExecutionStep step)
     at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean&amp; completedSynchronously)
  --&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated.</p>