Why isn't Ajax sending data?

Question

The following Ajax code doesn't even trigger my action if the input variable (a) isn't set to Null.

Ajax code:

var ab = "Chocolate Smoothies ya know?";

$("#customerSubmit").submit(function (e) {

    e.preventDefault();

    $.ajax({
        url: "/api/Booking/lander",
        method: "post",
        data: { a: ab }
    })
});

The following my controller code:

[HttpPost]
public void lander(string a)
{
    System.Diagnostics.Debug.WriteLine(a);
}

And when I do not set it to null, the input received is null.

screenshot when the breakpoint is triggered:

I've used type/method/etc.. Nothing seems to work

Update:

I even tried the following but no use:

Update 2:

Even the following didn't work and one of the following also gave me -> "Failed to load resource: the server responded with a status of 405 (Method Not Allowed)"

var ab = 'Chocolate Smoothies ya Know?';
$.ajax({
    url:"/api/Booking/lander", 
    data: {'': ab}
});

With

public string lander([FromUri]string asx) ////and asx = "" and /// asx = null

Update 3

Something extremely weird happened, I used the following code:

and I got the following error:

and when I used

////(string a = "")

it triggered my action for some unknown reason and the following happened.

The following is my WebApiConfig code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;

namespace HotelManagementSystem
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.MapHttpAttributeRoutes();

            //routes.MapHttpRoute("RestApiRoute", "Api/{controller}/{id}", new { id = RouteParameter.Optional }, new { id = @"\d+" }); //this replaces your current api route


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

Update 4:

Even the following set up did not work:

Answer 1

you have a default route defined in your RouteConfig.cs file

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

if you change "a" in your signature to "id" and send "id" through your ajax you will succeed but if you want to have multiple parameters in your post method or different naming try to define new routes.

Answer 2

You need to set contentType and stringify the data you want to send to controller. So the data you will send will be:

var postData = JSON.stringify({'a':ab});

So the resulting code should look like:

var ab = 'Chocolate Smoothies ya Know?';
var postData = JSON.stringify({'a':ab});
$.ajax({
    url: "/api/Booking/lander", 
    method: "POST",
    contentType: "application/json",
    data: postData
});

You may optionally want to set dataType: "json" too. You do not need to specifiy any lookup locations (uri, body) for a parameter in lander method.