C# 无法理解ASP.Net Web API中的路由

我正在努力学习ASP.NETWebAPI。我有一个MVC控制器，从那里我想通过ajax调用调用API控制器CoursesController。但是，当我给出完整的有效路径时，我无法对api控制器进行ajax调用

案例1:工作示例：如果我转到localhost:port/

问题。HomeController的索引方法受到攻击

b。然后CoursesApiController被点击，结果显示出来

案例2:非工作示例：如果我转到localhost:port/Home/Index

a。HomeController的索引方法被命中

b。但是ApiController不会被击中

Chrome开发错误：

它试图打开指向localhost:port/Home/API/Courses的API URI（这显然是错误的）

但是当我在浏览器中不显式地告诉URL时，为什么它工作得很好呢

Routes.Config文件：

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

   config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

WebApi.config文件：

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

   config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

Index.cshtml文件：

<div >
    hello worl
    <ol id="courses"></ol>
</div>
@section scripts
{
    <script>
        $.ajax({
            url: 'api/courses', // here I am making the API Call to Courses controller
            success: function (courses) {
                debugger;
                var list = $('#courses');
                for (var i = 0; i < courses.length; i++)
                {
                    var course = courses[i];
                    list.append('<li>' + course.title + '</li>');
                }
            }
        });
    </script>
}

你好，世界
@节脚本
{
$.ajax({
url:'api/courses'，//我在这里对courses控制器进行api调用
成功：功能（课程）{
调试器；
变量列表=$（“#课程”）；
对于（变量i=0；i”+course.title+“”）；
}
}
});
}

您在javascript中的url中有一个错误/输入错误

您有：

url:'api/courses'，

应该是：

url:'/api/courses'，

这是由于浏览器处理相对路径的方式

如果您的浏览器位于该位置，则脚本将正常工作，因为相对路径是正确的。手动路由到

/home

或

/home/index

后，相对路径现在指向

/home/index/api

，这不是您想要的

---

最终，不以“/”开头的javascript路径片段被视为相对于当前浏览器路径。以“/”开头的路径被视为绝对路径。

它不应该是

localhost:port/api/Courses

？试试

url:'/api/courses'

，但为什么我只告诉它转到Localhost:port就行了呢。我的意思是，它知道它需要转到HomeController，然后转到Index.cshtml->，然后进行API调用。但为什么当我显式地告诉它转到localhost:port/Home/Index时它会停止工作呢？两者都是一样的。在这两种情况下，都采用默认路线。但是为什么它在案例1中运行良好，但在案例2中不起作用。它生成了不需要的错误url（它在url中添加了“Home”），非常感谢。现在开始工作了。你能解释一下吗。即使有错误，案例1仍然有效。请告诉我。：）