CODEWITHSUNDEEP
c#asp.net.netasp.net-mvcroutes
Unbreakable
Unbreakable

Reputation: 8132

How to understand the routing in ASP.Net Web API

I am trying to learn ASP.Net Web API. And I have a MVC controller Home and from there I want to make a call to API Controller which is CoursesController via ajax call. But I am not able to make the ajax call to the api controller when I give the complete valid path.

Case 1: Working example: If I go to localhost:port/

q. HomeController's Index mathod gets hit

b. Then CoursesApiController gets hit and result is displayed

Case 2: Non Working Example: If I go to localhost:port/Home/Index

a. HomeController's Index method gets hit

b. But ApiController does not get hit

Chrome Dev error:

It tries to attempt to open API URI pointing at localhost:port/Home/api/Courses (which obviously is wrong).

But why does it work fine when I don't explicitly tell the URL in browser?

Routes.Config File:

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

WebApi.config File:

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

Index.cshtml File:

<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>
}

Upvotes: 1

Views: 221

Answers (1)

Nate
Nate

Reputation: 30666

You have a bug/typo in your url in the javascript.

You have: url: 'api/courses',

Should be: url: '/api/courses',

This is due to how the browser handles relative paths.

If your browser is sitting at http://localhost:port/ the script will work since the relative path is correct. Once you manually route to /home or /home/index the relative path is now pointing to /home/index/api which isn't what you want.

Ultimately a javascript path fragment that does not start with a '/' is treated as relative to the current browser path. A path that starts with a '/' is treated as an absolute path.

Upvotes: 2

Related Questions