Not able to call webApi from controller using jQuery Ajax
<p>There are many questions related to webApi not getting called but i tried every solution and i am not able to get the right solution for my problem.
i have a webApi like this </p>

<pre><code>public class shoppingCart : ApiController
{
   [HttpPost]
    public string getDetails()
    {
        return "HttpPost";
    }
    [HttpGet]
    public string getDetails1()
    {
        return "HttpGet";
    }
    [HttpPut]
    public string getDetails2()
    {
        return "HttpPut";

    }
    [HttpDelete]
    public string getDetails3()
    {
        return "HttpDelete";
    }
}
</code></pre>

<p>my global.asax.cs file is like this </p>

<pre><code>public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();

        WebApiConfig.Register(GlobalConfiguration.Configuration);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);
        AuthConfig.RegisterAuth();
    }
}
</code></pre>

<p>my WebApiConfig.cs file is like this </p>

<pre><code>public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );    
    }
}
</code></pre>

<p>my routeConfig.cs file is like this </p>

<pre><code>public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

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

<p>my jQuery Ajax script is like this</p>

<pre><code>$('#btnAjax').click(function (e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '/api/shoppingCart/getDetails',
            success: function (returnData) {
                alert('success');
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert('error');
            }
        });
    });
</code></pre>

<p>whenever i try to call the web api i get an error </p>

<p><a href="https://i.stack.imgur.com/s5bQU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s5bQU.png" alt="enter image description here"></a></p>

<p>please somebody help me to fix the issue.
Thank you</p>