javascript - ASP.NET MVC 5 Ajax controller call not working after publish - Stack Overflow

admin管理员组

文章数量:1431783

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 "". 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.

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./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.

• javascript
• jquery
• asp
• ajax
• asp-mvc

Share Improve this question Follow edited Nov 17, 2015 at 20:08 jhinx asked Apr 8, 2015 at 20:42 jhinxjhinx 10922 gold badges33 silver badges99 bronze badges 3

• 1 Look at the network tab to see that jQuery is in fact loaded at ~/Scripts/jquery-1.10.2.min.js. Also - perhaps some files were not part of the Publish profile. – Dmitry Sadakov Commented Apr 8, 2015 at 20:47
• Did you check if the action is executed (use fiddler for example). In addition you may have a look with the development tools (F12 with IE or chrome) to see for javascript errors... – Stephen Reindl Commented Apr 8, 2015 at 21:57
• Are you using bundling or are you manually adding the script tags to your layout? – ste-fu Commented Apr 16, 2015 at 21:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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');
    }
});

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

本文标签： javascriptASPNET MVC 5 Ajax controller call not working after publishStack Overflow