title: Jquery Ajax call doesn't hit the action method/returns entire HTML page
body: <h1>The solution to my problem can be found below.</h1>
  
  <p>I can not get my code to work. I need to send an AJAX call to an action method in my controller that has to return a string (for now). But when I activate the AJAX call, it returns the HTML source code of the page I'm currently on <strong>And it does not even hit the desired controller action</strong>.<br>
  This is my code:</p>
  
  <h3>Ajax call</h3>
  
  <pre><code>&lt;script&gt;
  
      function addtoCart()
      {
          amount = prompt("Hoeveel producten wilt u toevoegen aan uw winkelwagen?", 1);
          //find product
          var product = {
              "id": '@Model.ID',
              "naam": "@Model.Naam",
              "afbeelding": "@Model.Afbeelding",
              "beschrijving": "@Model.Beschrijving",
              "prijs": "@Model.Prijs",
              "aantal": amount
          };
          $.ajax({
              url: '@Url.Action("storeProductInSession", "Product")',
              type: 'POST',
              data: JSON.stringify(product),
              dataType: 'json', //Right now, this gives an "Unexpected Token &lt; error". This is probably because when the method returns the entire HTML document, it won't be able to render &lt;!doctype html&gt; as JSON.
              contentType: 'application/json; charset=utf-8',
              success: function (result)
              {
                  console.log(result);
              },
              error: function (jqXHR, textStatus, errorThrown)
              {
                  console.log(product);
                  console.log(jqXHR);
                  console.log(textStatus);
                  console.log(errorThrown);
              },
              async: true
          });
  
          //sessionStorage.setItem('@Model.ID', JSON.stringify(product)); This is for later
      }
  </code></pre>
  
  <h3>StoreProductInSession(The method that has to be called)</h3>
  
  <pre><code> [HttpPost]
          public string storeProductInSession(object product)/*, string naam, string afbeelding, string beschrijving, decimal prijs, int aantal)*/
          {
              return "This method is going to do session stuff, but for now it just has to return this string";
  
              //Get the POST input from the AJAX call
  
              //Add the input to a JSON array
  
              //add the array to the session
  
              //Return the array
  
              //let javascript convert that array to the cart &lt;li&gt;
          }
  </code></pre>
  
  <p>It still returns the entire HTML page, and even if the <code>object product</code> parameter is incorrect, I would be happy to see that the ajax call actually hits that method. I am thinking that there could be a problem between the call and my routing, but I am not sure. Here's that code:</p>
  
  <pre><code>    public static void RegisterRoutes(RouteCollection routes)
      {
          routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
          routes.MapRoute(
  name: "Product",
  url: "Product/{id}",
  defaults: new { controller = "Product", action = "Index" }
  );
          routes.MapRoute(
              name: "Categorie",
              url: "Categorie/{id}",
              defaults: new { controller = "Categorie", action = "Index" }
              );
          routes.MapRoute(
              name: "Default",
              url: "{controller}/{action}/{id}",
              defaults: new { controller = "Welkom", action = "Index", id = UrlParameter.Optional }
          );
  
  
      }
  </code></pre>
  
  <p>If I would even be able to simply give the ID to the StoreProductInSession action, I could work from there. I'm going to work with the user's session, so I think a GET would not be safe enough.</p>
  
  <h1>Solution</h1>
  
  <p>A big thanks to @Dolan for helping out! The problem was my routing!</p>
  
  <h3>Ajax Call</h3>
  
  <pre><code>&lt;script&gt;
  
      function addtoCart()
      {
          amount = prompt("Hoeveel producten wilt u toevoegen aan uw winkelwagen?", 1);
          //find product
          var product = {
              "id": '@Model.ID',
              "naam": "@Model.Naam",
              "afbeelding": "@Model.Afbeelding",
              "beschrijving": "@Model.Beschrijving",
              "prijs": "@Model.Prijs",
              "aantal": amount
          };
          $.ajax({
              url: '@Url.Action("storeProductInSession", "Product")',
              type: 'POST',
              data: JSON.stringify(product),
              dataType: 'html', //I tried entering 'json' but that gave me a 'unexpected &lt; token' error.
              contentType: 'application/json; charset=utf-8',
              success: function (result)
              {
                  console.log(result);
              },
              error: function (jqXHR, textStatus, errorThrown)
              {
                  console.log(product);
                  console.log(jqXHR);
                  console.log(textStatus);
                  console.log(errorThrown);
              },
              async: true
          });
  &lt;/script&gt;
  </code></pre>
  
  <h3>storeProductInSession</h3>
  
  <pre><code> [HttpPost]
          public string storeProductInSession(int id, string naam, string afbeelding, string beschrijving, decimal prijs, int aantal)
          {
              return String.Format("Product given to the ajax call: {0}, {1}, {2}, {3}, {4}, {5}", id, naam, afbeelding, beschrijving, prijs, aantal);
  }
  </code></pre>
  
  <h3>Routing</h3>
  
  <pre><code>public static void RegisterRoutes(RouteCollection routes)
          {
              routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
              routes.MapRoute(
      name: "Product",
      url: "Product/{id}",
      defaults: new { controller = "Product", action = "Index" },
      constraints: new { id = "\\d+" }
  );
  
              routes.MapRoute(
                  name: "ProductAction",
                  url: "Product/storeProductInSession",
                  defaults: new { controller = "Product", action = "storeProductInSession" }
              );
  
              routes.MapRoute(
                  name: "Categorie",
                  url: "Categorie/{id}",
                  defaults: new { controller = "Categorie", action = "Index" }
              );
  
              routes.MapRoute(
                  name: "Default",
                  url: "{controller}/{action}/{id}",
                  defaults: new { controller = "Welkom", action = "Index", id = UrlParameter.Optional }
                  );
  
  
          }
  </code></pre>