MVC Web Api call from Ajax responds with 404 - ajax

Question

I know this has been asked dozens of times but I'm really frustrated as none of the suggestions I can find out there work for me and I'm really stuck.
My problem is I'm not being able to call a Web Api from ajax, no matter what configurations/combinations/whatever of routes and everything I try, none of them works and I just get 404.
This is my Global.asax file:
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
GlobalConfiguration.Configure(WebApiConfig.Register);
}
This is my WebApiConfig.cs in App_Start folder:
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
// Configure Web API to use only bearer token authentication.
config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
This is my UserController class:
public class UserController : ApiController
{
public IHttpActionResult GetUserDataById(string id)
{
Clients jsonData = Http.downloadJsonData<Clients>(InsuranceGlobal.clientsUrl);
Client user = jsonData.clients.Where(u => u.id == id).FirstOrDefault();
return Ok(user);
}
}
This is my Ajax call inside cshtml javascript section:
$("#btnGetUserById").click(function () {
$('#userByName').empty();
$("#gettingByIdMsg").text(" Getting User...");
$.ajax({
url: '../api/User',
type: "GET",
contentType: "application/json",
dataType: "json",
data: { id: $("#userId").val() },
success: function (data) {
$('<tr>', { html: formatItem(data) }).appendTo($('#userByName'));
$("#usersTable").removeClass("hidden");
$("#gettingByIdMsg").text("");
},
fail: function (jqXHR, textStatus) {
$("#gettingByIdMsg").text("Request failed: " + textStatus);
}
});
});
I tried GET as well as POST with the [HttpPost] decorator with no avail.
I guess I have all necessary Web Api NuGet packages installed and the app compiles without errors but web api is not being called.
Please help.
Edit 1:
I have to mention that -on purpose- I haven't started a new project with WebApi template in Visual Studio, instead I started a MVC project and then installed all NuGet WebApi necessary packages and configuration (maybe I missed something, don't know).

Answer 1

Ok, after solving my issue I'll answer my own question.
First of all I have to say thanks for all the replies. Love this community and people is very nice here.
After diving into depths of sea... err my solution configuration and fighting a lot with it I remembered I've previously installed WebApi.Owin package and just to try I decided to uninstall it leaving only AspNet.WebApi and voilá, now the WebApi calls are working.
I hope all this effort will help anyone else having a similar issue in the future.

Answer 2

Change
EDIT: based on comment
[RoutePrefix("api/User")]
public class UserController : ApiController
{
[Route("getbyid/{id}")]
public IHttpActionResult GetUserDataById(string id)
{
Clients jsonData = Http.downloadJsonData<Clients> InsuranceGlobal.clientsUrl);
Client user = jsonData.clients.Where(u => u.id ==
id).FirstOrDefault();
return Ok(user);
}
}
and client to
$("#btnGetUserById").click(function () {
$('#userByName').empty();
$("#gettingByIdMsg").text(" Getting User...");
$.ajax({
url: '/api/User/getbyid/' + id: $("#userId").val(),
type: "GET",
success: function (data) {
$('<tr>', { html: formatItem(data) }).appendTo($('#userByName'));
$("#usersTable").removeClass("hidden");
$("#gettingByIdMsg").text("");
},
fail: function (jqXHR, textStatus) {
$("#gettingByIdMsg").text("Request failed: " + textStatus);
}
});
});