Javascript ajax call can't hit my Web API controller page. Can't seem to get the url correct

Question

I have a registration page that I'm trying to save the input fields to a new record in my Users table.

 <button class="btn-u" type="submit" 
 onclick="submitclicked()">Register</button>

the click is picked up and I can get breakpoints hit on my .js

function submitclicked() {
    insertNewUser();

    ko.applyBindings({ insertNewUser: insertNewUser });
};

function Person() {
    this.FirstName = firstname();
    this.LastName = lastname();
    this.Email = email();
    this.Password = password();
}

var insertNewUser = function () {

    var person = new Person();
    var url = "/api/Home/addUser"
    $.ajax({
        url: url,
        type: 'post',
        data: person,
        contentType: "application/json; charset=utf-8",
        success: function (result) {
        }
    })
};

I also have a breakpoint within my RegController.cs file but it doesn't ever get hit. this leads me to believe that it is never getting into my controller. My controller looks like this:

public class RegController : ApiController
{
   //now insert  these values into the DB
    private static void addUser(Person item)
    {
        var db = new MyEntities();

        try
        {
            User record = new User()
            {

                First_Name = item.FirstName,
                Last_Name = item.LastName,
                Email = item.Email,
                Password = item.Password
            };
            db.User.Add(record);
            db.SaveChanges();
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.InnerException);
        }
    }

    public class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }
        public string Password { get; set; }
    }

}

In the solution explorer it goes RegController.cs > RegController > Person > addUser(Person): void.

I've tried every different option I could think of for the ajax url with no success. Can someone show me what I've done wrong?

EDIT: Adding RouteConfig

        public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

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

Answer 1

There are couple of issues:

1. The action in your controller is static.

2. The action in your controller is private and not public.

3. The route you are using is pointing to the wrong endpoint (use the route debugger or API help to see the correct one).

Some updates to consider:

public class RegController : ApiController
{
   //now insert  these values into the DB
    public void addUser(Person item)
    {
            ...

    }

    public class Person
   {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }
        public string Password { get; set; }
    }

}

For the jquery request:

var insertNewUser = function () {

    var person = new Person();
    var url = "/api/Reg"
    $.ajax({
        url: url,
       type: 'post',
        data: person,
        contentType: "application/json; charset=utf-8",
        success: function (result) {
        }
    })
};

Assuming this is a vanilla web api v2 application, if you run your web application and click the API link, it will show you how your routes are configured.

Side note: I find it useful when debugging web api to utilize the following package:

Install-Package WebApiRouteDebugger