JQuery Ajax call gives 404 'Resource Not Found' Error but Normal URL Call is Fine

Question

I have a weird problem when using JQuery call in my ASP.NET MVC project. I found that the Ajax call gives 404 ( resource not found error). But when I use the usual URL GET call, I can successfully call the server without any problem. Any idea why this is so?

This my ASP.NET MVC code

public class ViewRecordController: Controller
{
  public JSONResult GetSoftwareChoice(string username)
  {
     return Json(username);
  }
}

This is my JQuery code:

$(function() {
$("#username").click(function() {
        $.getJSON("ViewRecord/GetSoftwareChoice", {username:'123'},
    function(data) {
        alert(data);
    });
    });
});

The above JQuery gives me a 404 error. Apparently the ViewRecord/GetSoftwareChoice is not found on server, as far as the AJAX call is concerned.

But if I type this in my web browser:

http://myapp/ViewRecord/GetSoftwareChoice?username=123

then there is no problem.

This is very weird, indeed.

Just in case if you are interested, this is my route:

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        "Default",                                              // Route name
        "{controller}/{action}/{id}",                           // URL with parameters
        new { controller = "Home", action = "Index", id = "" }  // Parameter defaults
    );

}

Edit: I step into my code, and found that the URL call is ViewRecord/GetSoftwareChoice?username=123.

Related question: Select Element inside Form not working in JQuery

Answer 1

Instead of hard-coding the URL, you might want to try a UrlHelper:

$(function() {
    $("#username").click(function() {
        var url = '<%= UrlHelper.Action("GetSoftwareChoice", "ViewRecord") %>';
        $.getJSON(url, {username: '123'}, function(data) {
            alert(data);
        });
    });
});

Answer 2

Use Firefox Firebug add on, and watch what request gets made by Jquery...

Is it possible that the page that this Jquery runs in is in a subdirectory, in which case the request will not be relative root as the http://myapp/ "typed in" url is?

Also, I am guessing the code you specified above is not actually the code you are using (which is completely reasonable, I rairly post code as-is). Because

$.getJSON("ViewRecord/GetSoftwareChoice", {username='123'},

the = sign between username and '123' is invalid JS as far as I know. So I'm betting there is some goofy detail in the the real code that is causing the problem.

Answer 3

Replace the equal sign with a colon:

$(function() {
$("#username").click(function() {
        $.getJSON("ViewRecord/GetSoftwareChoice", {username:'123'},
    function(data) {
        alert(data);
    });
    });
});

Answer 4

I fix this problem by using FireBug to show me the request that was generated by JQuery. To my amazement, the url generated is

http://localhost/ViewRecord/ViewRecord/GetSoftwareChoice?username=123

for the JSON call:

$(function() {
$("#username").click(function() {
        $.getJSON("ViewRecord/GetSoftwareChoice", {username:'123'},
    function(data) {
        alert(data);
    });
    });
});

So I just have to change the $.getJSON line to

$.getJSON("GetSoftwareChoice", {username:'123'},

Alternatively, use the forward slash:

 $.getJSON("/ViewRecord/GetSoftwareChoice", {username:'123'},