AngularJs WebAPI No HTTP resource was found

Question

I'm developing an Angular app with WebAPI. When I call any method, i have the HTTP resource not found. Angular call

service.Login = function (email, password, callback) {
        var Url = Constants.apiDevUrl + 'api/login/GetLoginByEmailPassword';

        $http.post(Url, JSON.stringify({ email: email, password: password })).then(
            function (response) {
                var data = response.data
                callback(data);
            }).catch(function (error) {
                console.log('ERROR GetLoginByEmailPassword:');
                console.log(error.config.url);
                console.log(error.data.Message);
                console.log(error.data.MessageDetail);
                console.log(error.status);
                console.log(error.statusText);
            });
    };

Controller webAPI

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

namespace Esox_Elo_Calculator.API
{
    [RoutePrefix("api/login")]
    public class LoginController : ApiController
    {
        [Route("GetLoginByEmailPassword")]
        [HttpPost]
        public LoggedUser GetLoginByEmailPassword(string email, string password)
        {
            return new BOLogin().GetLoginByEmailPassword(email, password);
        }
    }
}

WebApiConfig

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

namespace Esox_Elo_Calculator
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services
            config.Formatters.Remove(config.Formatters.XmlFormatter);

            config.Formatters.JsonFormatter.SerializerSettings.DateTimeZoneHandling = Newtonsoft.Json.DateTimeZoneHandling.Local;
            config.Formatters.JsonFormatter.SerializerSettings.DateFormatHandling = Newtonsoft.Json.DateFormatHandling.IsoDateFormat;
            config.Formatters.JsonFormatter.SerializerSettings.DateFormatString = "yyyy-MM-ddTHH:mm:ssK";

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

            config.MapHttpAttributeRoutes();
        }

    }
}

What is wrong? I think that the controllers name were the problem, but I changed without success. FYI, web.config is avaible here: https://pastebin.com/aGcEVgdS

Answer 1

It seems, you miss the config.MapHttpAttributeRoutes(); configuration in WebApiConfig. This configuration is required when you would like to try with attribute routing.

In Web API, post action parameter retrieve data from FormBody and there at most one parameter allowed. So if you need more parameter value, you should declare an object and use that object as parameter.

So for your case, you need to create an object as

public class UserModel
{
    public string email { get; set; }
    public string password { get; set; }
}

Then your controller action should be

    [Route("GetLoginByEmailPassword")]
    [HttpPost]
    public LoggedUser GetLoginByEmailPassword(UserModel user)
    {
        return new BOLogin().GetLoginByEmailPassword(user.email, 
user.password);
    }

Then your WebApiConfig configuration should be

        // Web API configuration and services
        config.Formatters.Remove(config.Formatters.XmlFormatter);


config.Formatters.JsonFormatter.SerializerSettings.DateTimeZoneHandling = 
Newtonsoft.Json.DateTimeZoneHandling.Local;

       config.Formatters.JsonFormatter.SerializerSettings.DateFormatHandling 
= Newtonsoft.Json.DateFormatHandling.IsoDateFormat;
        config.Formatters.JsonFormatter.SerializerSettings.DateFormatString 
= "yyyy-MM-ddTHH:mm:ssK";

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

Please make sure config.MapHttpAttributeRoutes(); will be placed before config.Routes.MapHttpRoute(......)

Then your post request send object instead of JSON.stringify.

    var data = { email: email, password: password };
    $http.post(Url, data).then(
        function (response) {
            var data = response.data
            callback(data);
        }).catch(function (error) {
            console.log('ERROR GetLoginByEmailPassword:');
            console.log(error.config.url);
            console.log(error.data.Message);
            console.log(error.data.MessageDetail);
            console.log(error.status);
            console.log(error.statusText);
        });

Hope its working for you.