ASP.NET MVC 5 Ajax controller call not working after publish

Question

I have been working on an ASP.NET MVC 5 web application which includes a view that contains a Raphael javascript image that is using AJAX calls to controller method to get some data on the initial render. When I render the page locally on my own machine, everything executes as expected and the page loads fine. However, when I 'Publish' the application to a test server, the AJAX call hits the 'Error' function every time I try to load the page.

After some research I was able to resolve some of the javascript errors by adding this tag to the layout page:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

However, it still does not work any time I try to use Ajax to make a call to a controller method. When I take a look at the issue with firebug i see the error that is being thrown is "Boostrap requires JQuery". I have searched the error and have ensured that the script tags are in the correct order- JQuery is being called before Boostrap:

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/boostrap.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/raphael.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/update.js")"></script>

I have also checked the permissions on the files and they both have the same, correct privs which has left me stuck. These controller calls work exactly as expected when I run the application locally on my machine, but error once I have published the application to a server.

I am not sure what else could be causing this issue. Any and all advice would be greatly appreciated!!!

Below is one of the JQuery call to the controller method:

function GetESN(area, ID) {
$.ajax({
    url: "/Home/GetESN",
    type: 'POST',
    async: false,
    dataType: 'json',
    cache: false,
    data: { area: area, ID: ID },
    success: function (data) {
        esn = data
    },
    error: function () {
        alert('error occurred');
    }
});

}

Please let me know if there any more information that is required.

UPDATE

The issue actually fell in the way the site was named- it needed to be formatted as " http://projectname.com/location ". I ended up having to split the pathname to account for the "/location" bit and built the URL right at the beginning of the script. Probably not an ideal situation but it works well for my situation.

Answer 1

It is possible that your

"url: "/Home/GetESN",

is an incorrect url when on the web server than on your local.

Try adding

<script>    
        rootUrl = '@Url.Content("~")'
</script>

to _Layout.cshtml

Then update your js file so you use the rootUrl

function GetESN(area, ID) {
$.ajax({
    url: rootUrl + "Home/GetESN", // or url: rootUrl + "/Home/GetESN"
    type: 'POST',
    async: false,
    dataType: 'json',
    cache: false,
    data: { area: area, ID: ID },
    success: function (data) {
        esn = data
    },
    error: function () {
        alert('error occurred');
    }
});

Answer 2

There are 2 ways where you can achieve this.

Option 1

change the url as follows in your ajax call,

    url: @Url.Action("GetESN", "Home")

Option 2

This is the best option if you want to avoid razor tag helpers.

1. Right click on the project and select "Properties".

2. In the properties, select the link called "Web".

3. In the "Web" link find "Project Url" field.

4. In the "Project Url", set a name to the project as following example.

    Example:- http://localhost:1851/TestApp/

5. Once setting a project name, select "Create Virtual Directory".

6. In your ajax call, set the url as follows.

    Example:- url: "TestApp/Home/GetESN"

7. Finally make sure to publish the project as the same name. Example:- TestApp