WebApi endpoint always gives “404 not found”

Question

I am trying to implement WebApi endpoints in a brand new web app but no matter what I try I always get "404 not found" when trying to do a GET from said endpoint.

I'm starting simple and just trying to pull a list of vehicles from the database.

The directory structure of my application looks like so:

The relevant bits of code look like so:

dataService.js

(function () {

var injectParams = ['vehiclesService'];

var dataService = function (vehiclesService) {
    return vehiclesService;
};

dataService.$inject = injectParams;

angular.module('teleAiDiagnostics').factory('dataService', dataService);
}());

vehiclesService.js

(function () {

var injectParams = ['$http', '$q'];

var vehiclesFactory = function ($http, $q) {
    var serviceBase = '/api/dataservice/',
        factory = {};

    factory.getVehicles = function () {
        return $http.get(serviceBase + 'vehicles').then(function (response) {
            var vehicles = response.data;
            return {
                totalRecords: parseInt(response.headers('X-InlineCount')),
                results: vehicles
            };
        });
    };

    return factory;
};

vehiclesFactory.$inject = injectParams;

angular.module('teleAiDiagnostics').factory('vehiclesService', vehiclesFactory);
}());

DataServiceController.cs

using System.Collections.Generic;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;

namespace TeleAiDiagnostics
{
    public class DataServiceController : ApiController
    {
        TeleAiRepository _TeleAiRepository;

        public DataServiceController()
        {
            _TeleAiRepository = new TeleAiRepository();
        }

        [HttpGet]
        public HttpResponseMessage Vehicles()
        {
            List<TeleAiVehicle> vehicles = _TeleAiRepository.GetVehicles();
            HttpContext.Current.Response.Headers.Add("X-inlineCount", vehicles.Count.ToString());
            return Request.CreateResponse(HttpStatusCode.OK, vehicles);
        }
    }
}

vehiclesController.js

(function () {
    var injectParams = ['$location', 'dataService'];

    var VehiclesController = function ($location, dataService) {
        var vm = this;

        vm.vehicles = [];

        function init() {
            dataService.getVehicles()
                .then(function (data) {
                    vm.vehicles = data.results;
                }, function (error) {
                    var thisError = error.data.message;
                });
        };

        init();
    };

    VehiclesController.$inject = injectParams;

    angular.module('teleAiDiagnostics').controller('VehiclesController', VehiclesController);
}());

WebApiConfig.cs

using Newtonsoft.Json;
using Newtonsoft.Json.Serialization;
using System.Linq;
using System.Web.Http;
using System.Web.Routing;

namespace TeleAiDiagnostics
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {

            config.MapHttpAttributeRoutes();

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

            config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
            config.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;

            // Remove default XML handler
            var matches = config.Formatters
                                .Where(f => f.SupportedMediaTypes
                                             .Where(m => m.MediaType.ToString() == "application/xml" ||
                                                         m.MediaType.ToString() == "text/xml")
                                             .Count() > 0)
                                .ToList();

            foreach (var match in matches)
                config.Formatters.Remove(match);
        }
    }
}

Global.asax.cs

using System;
using System.Web.Http;

namespace TeleAiDiagnostics
{
    public class Global : System.Web.HttpApplication
    {

        protected void Application_Start(object sender, EventArgs e)
        {
            WebApiConfig.Register(GlobalConfiguration.Configuration);
            GlobalConfiguration.Configuration.EnsureInitialized();
        }

        protected void Session_Start(object sender, EventArgs e)
        {

        }

        protected void Application_BeginRequest(object sender, EventArgs e)
        {

        }

        protected void Application_AuthenticateRequest(object sender, EventArgs e)
        {

        }

        protected void Application_Error(object sender, EventArgs e)
        {

        }

        protected void Session_End(object sender, EventArgs e)
        {

        }

        protected void Application_End(object sender, EventArgs e)
        {

        }
    }
}

RouteConfig.cs

namespace TeleAiDiagnostics
{
    public class RouteConfig
    {
    }
}

I've tried the instructions from about every tutorial I could find online and I'm still not having any luck.

Whatever help can be provided is greatly appreciated.

Thanks,

Ian

Answer 1

We have an answer!

Dan Dumitru and jps were both correct. After trying IIS Express I realized my error.

The endpoint is indeed http://localhost/TeleAiDiagnostics/api/dataservice/vehicles and not simply http://localhost/api/dataservice/vehicles .

Not sure why it took this long for me to realize this. Regardless, I want to thank everyone for their help.

Answer 2

It might be because of your default Web API route. I think it should be:

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

(without the {action} part)