从MVC Razor视图（而非Index.cshtml）调用时，Ajax调用失败

Question

I am confused on why my Ajax call succeeds when called from an Index view but fails when called from a view with a different name. I have an ASP .NET MVC 4 project that also involves some Ajax requests via Javascript. My Javascript/JQuery code for this page is complex enough that I have written them in a separate Javascript file. Here is a simplified extract from one of my Javascript files where I make an Ajax request:

//to be called in the JQuery page load function
function initialize(){
    $.ajax({ url: MyController/GetData, async: false })
        .done(function(returnedData) {
            doStuff(returnedData);
        });
}

In my Home controller, I created a new View with the default name Index.cshtml . In this view, I referenced the external Javascript file tha contains the above function. When I open my /Home page (which is Home/Index because I have default routing setup), the initialize() function is called and the Ajax call succeeds as expected.

I created another View called Details.cshtml and in this page, I also referenced the same Javascript file. When I open my /Home/Details page, the initialize() function is called and the Ajax call fails . The error message says it was looking for /Home/Details/MyController/GetData which definitely does not exist.

The wierdness is that this same call works from one page and doesnt work from another. My questions:

1. Can someone offer an explanation as to why this is happening?
2. Is there any remedy for it?

Also, note that I have read a couple of questions regarding calling Ajax from MVC Razor view and they often suggest that you use the Url.Action(...) to create the URL's. The problem is that in this case, this is not an option for me as I really want to separate my Javascript from my Razor View. Also, if this was such a hinderance, why does it work when called from the Index page?

Thank for your help.

UPDATE: Here is the RouteConfig file:

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

        routes.MapRoute(
            name: "Default", 
            url: "{controller}/{action}/{id}",
            defaults:new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
    }
}

Note: This behavior doesnt just happen when I am on Home/Index or Home/Details . I have noticed that the Ajax call works fine from AnyController/Index page, but fails when called from AnyController/AnyOtherPage .

Answer 1

It depends on your routing, but try this (put a slash in front of MyController):

function initialize(){
    $.ajax({ url: /MyController/GetData, async: false })
        .done(function(returnedData) {
            doStuff(returnedData);
        });
}

It can also help to specify if it is a get or a post, and the datatype you want it to send as. Mvc is good with Json:

function initialize(){
    $.ajax({ url: /MyController/GetData, async: false, dataType:"json", type:"Get" })
        .done(function(returnedData) {
            doStuff(returnedData);
        });
}

The reason it works on the index page could be because details must show in the url, but index does not. So if your index url is Home/Index, Home/ still works. For details it must show as Home/Details.