apicontroller not getting from ajax - asp.net-mvc-4

Question

I get "404 Not Found" on doing a Ajax call ,
maybe that I don't understand how routing works ...
function ApproveAlert(ID) {
$.ajaxPost('/api/DeviceApi/ApproveAlertNew', { 'ID': ID }, function (data) {
... get error "404 Not Found"
}, null);
}
in my mvc4 C# app I have a rout config :
RouteTable.Routes.MapHttpRoute(
name: "defaultapiaction",
routeTemplate: "api/{controller}/{action}"
);
RouteTable.Routes.MapHttpRoute(
name: "defaultapiid",
routeTemplate: "api/{controller}/{action}/{id}"
);
and apicontroller :
public class DeviceApiController : ApiController
{
//
// GET: /DeviceApi/
[HttpPost]
public bool ApproveAlertNew(int ID)
{
..do
}

Answer 1

Web API controllers don't use "Actions" in the same sense that MVC controllers do. Web API controllers also don't really use [HttpPost], [HttpGet] attributes either. They dispatch requests based on the names of the methods inside of the ApiControllers. I suggest to read up a little more on Web API differences from MVC as it is similar but sometimes hard to get up and running...
Here's some pretty generic examples from a Web API that I made for testing. I do not have JavaScript to post to this API because I was posting from a .NET WPF app. You would post to "/Important" NOT "/Important/Post" Hopefully this will get you on the right track...
WebAPIConfig.cs (Routes):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
namespace ArrayTest.WebAPI
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
}
API Controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using ArrayTest.Models;
using System.Threading;
namespace ArrayTest.WebAPI.Controllers
{
public class ImportantController : ApiController
{
// POST api/important
public HttpResponseMessage Post(ImportantList values)
{
//manipulate values received from client
for (int i = 0; i < values.ImportantIDs.Count; i++)
{
values.ImportantIDs[i] = values.ImportantIDs[i] * 2;
}
//perhaps save to database, send emails, etc... here.
Thread.Sleep(5000); //simulate important work
//in my case I am changing values and sending the values back here.
return Request.CreateResponse(HttpStatusCode.Created, values);
}
}
}
Model:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace ArrayTest.Models
{
public class ImportantList
{
public List<int> ImportantIDs { get; set; }
}
}

Answer 2

Can you try with:
function ApproveAlert(ID) {
$.ajax({
type: 'POST',
url: "/api/DeviceApi/ApproveAlertNew",
data: {
ID: ID
},
success: function (data) {
//Handle your success
},
error: function (jqXHR, textStatus, errorThrown) {
//Handle error
}
});
}