My first Web API with a 404 error

I am writing my first Web API and I have been stuck with a 404 error for a while. My  project is an ASP.NET MVC with a common controller and a view.

This is the code for the Web API which is a controller inside the Controllers folder:

namespace ChartsClubMVC.Controllers
{
    public class waSeccArtGenController : ApiController
    {

        //GET : api/GetSeccArtGen
        public IHttpActionResult GetSeccArtGen()
        {
            String strMensaje = "";
            String strOrigen = "";
            String fecha = DateTime.Today.ToString("yyyy-MM-dd");

            SeccArtGeneralMVC objSeccArtGeneralMVC = new SeccArtGeneralMVC();
            var notas = objSeccArtGeneralMVC.ObtenerInfoMVC(ref strMensaje, ref strOrigen, "Notas", fecha, "", "SEC");

            return Ok(notas.ToList());
        }
    }
}

This is the jQuery code that calls the Web API. Its name is "SeccArtGen.js" and is located in "~/Scripts/SiteScripts/ folder". As you can see, there is an "error" catch with 2 "alerts" that display "404 not found". I am not displaying any valuable information here yet but only something that shows the loop is running.

$(document).ready
    (
        function ()
        {$.ajax
                ({
                    type: "GET",
                    dataType: "json",
                    url: "api/GetSeccArtGen/",
                    success: function(result)
                    {
                        alert('Here I am - Success');
                        DespliegaSeccArtGen(result);
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(xhr.status);
                        alert(thrownError);
                    }
                });
        }
    );

function DespliegaSeccArtGen(result)
{
    var $mainContainerDiv = $("#mainContainer");

    for (var i = 0; i < result.length; i++)
    {
        var currentSeccArtGen = result[i];
        var $rowDiv = $("<div class='row'>").appendTo($mainContainerDiv);
        var $imagenDiv = $("<div class='col-lg-4 col-md-4 col-sm-4 col-xs-4>").appendTo($rowDiv);
        var $textoDiv = $("<div class='col-lg-8 col-md-8 col-sm-8 col-xs-8>").appendTo($rowDiv);

        var $imagen = $("Imagen " + i).appendTo($imagenDiv);
        var $texto = $("Texto " + i).appendTo($textoDiv);
    }
}

And finally this is the simple View located in the Views folder:

@{
    ViewBag.Title = "Index";
}<script src="~/Scripts/SiteScripts/SeccArtGen.js"></script><h2>Sección de Artículos Generales</h2><div id="mainContainer" class="container"></div>

The Global.asax contains the following:

public static void Register(HttpConfiguration config)
{
    // Web API configuration and services

    // Web API routes
    config.MapHttpAttributeRoutes();

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

I guess my problem has to do with the path to locate the Web API.

I will very much appreciate your feedback.

Best regards,
Jorge Maldonado