jquery - Ajax call to MVC Controller return "NOT FOUND"

Question

I'm trying to call a MVC Controller action with AJAX passing some parameters.
I have done this sometimes in this application and it works fine.
I have no idea why only THIS ONE doesn't work.

 function excluirDetalhe(button, tab) {
     var index = $(button).closest('tr').index();
     var myTable = document.getElementById(tab);
     var id = myTable.rows[index].cells[0].innerHTML.trim();
     $('#' + tab + ' tr:eq(' + index + ')').remove();
         $.ajax({                
             traditional: true,
             url: "entidades/gravaCookie",
             type: 'post',
             data: { id: id, detalhe: "E" },
             error: function (jqXHR, textStatus, errorThrown) {
                 alert(errorThrown);
             }
     });
 }

This is my controller method:

public void gravaCookie(string id, string detalhe)
{
     string key = "een_id";
     if (detalhe.Equals("E"))
         key = "een_id";
     if (detalhe.Equals("C"))
         key = "eco_id";
     if (detalhe.Equals("B"))
         key = "eba_id";
     cookie.Values.Add(key, id);
}

Just a reminder that I'm doing exactly I did in other Ajax calls, but only this one in particular is not working.
Does anyone have any idea?

Answer 1

Always use the Url.Action or Url.RouteUrl html helper methods to build the url to the action methods. It will take care of correctly building the url regardless of your current page/path.

Assuming your js code is inside a razor view, you can directly use the Url.Action method and assign that to your js variable.

url: "@Url.Action("gravaCookie","entidades")",

It should work assuming you have an action method like this

[HttpPost]
public ActionResult gravaCookie(string id,string detalhe)
{
  // to do : Return something
}

If your javascript is inside a seperate javascript file, you may build the url(s) in your razor view using the above helper methods and keep that in a variable which your external js file code can access. Always make sure to use javascript namespacing when doing so to avoid possible issues with global javascript variables.

@section Scripts
{
 <script>
    var myApp = myApp || {};
    myApp.Urls = myApp.Urls || {};
    myApp.Urls.baseUrl = '@Url.Content("~")';
    myApp.Urls.gravaCookieUrl = '@Url.Action("gravaCookie","entidades")';
 </script>
 <script src="~/Scripts/PageSpecificExternalJsFile.js"></script>

}

And in your PageSpecificExternalJsFile.js file, you can read it like

var urlToGrava= myApp.Urls.gravaCookieUrl
// Or With the base url, you may safely add the remaining url route.
var urlToGrava2= myApp.Urls.baseUrl+"entidades/gravaCookie";
// Use urlToGrava now

EDIT

If you simply care about the root/base url of the site, you may simply use / as the first character of your url.

var urlToGrava2= "/entidades/gravaCookie";