Jquery function does not find the Controller when I go up to the server

Question

During development the function below finds the Control and makes the request correctly, but after publishing on the server the function no longer finds the Controller:

During the development I have to leave it like this:

url: "/Controller/Action",

When I go up to the server I have to change it and leave it like this:

url: "/MeuSite/Controller/Action",

function carregaComboEmpresa() {
    $.ajax({    
        //url: "/MeuSite/Controller/Action",       
        url: "/Controller/Action",
        type: "post",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        processData: false,
        data: null,
        success: function (data) {          
        },
        error: function (result) {
        }
    });
};

Answer 1

It’s a bad idea to use it this way.

There are already solutions for this, use Url.Action

function carregaComboEmpresa() {
    $.ajax({       
        url: '@Url.Action("Action", "Controller")',
        type: "post",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        processData: false,
        data: null,
        success: function (data) {          
        },
        error: function (result) {
        }
    });
};

Answer 2

It happens because you are calling your url with an absolute path (because it starts with /). there are 2 simple ways to avoid this:

make your development environment have the same structure as your production environment, in case if you are using a MAMP or similar, just put your entire project inside a directory called MeuSite and point the server to the directory containing MeuSite.

another way is to use a relative url, which would depend on where your file .js se encontra, for example

../Controller/Action

Which indicates that the Url should go down 1 level and enter the Controller directory. This will work for you .js is in

MeuSite/js/script.js

for example.

Answer 3

This is because the paths to the application on the server and in your debugging environment (debug) are different, as you yourself made clear in the question.

When you make a request to your controller via Javascript, you need to get the correct address. My suggestion is the following, in two parts:

• On each page of the system, you put an input with the correct application path. To not replicate code, you can put this once in your _layout.cshtml:

<input type="hidden" id="caminho" value="@Url.Content("~/")" />

That one @Url.Content("~/"), when interpreted by Razor, returns the path to the root of your application, complete. Worth testing and checking.

• When calling the controller via Javascript, your URL looks like this:

var url = $("#caminho").val() + "controller/action"; // o caminho já inclui um "/".

Then you can use the variable url as the path to an ajax request, i.e.:

$.ajax({
    url: url,
    type: "post"
    // etc., etc.
})

By doing so, you don’t need to mix Razor code with Javascript code.