How to call MVC Controller function with javascript

Question

I have this function in my controller:

        [HttpPost]
    public IActionResult DeleteBooking(string bookingId)
    {
        Console.WriteLine("id: " + bookingId);
        DeleteResult<IBooking> deleteResult = bookingDomain.DeleteBooking(Guid.Parse(bookingId));

        return View("Index");
    }

And in my View I need to delete a booking using a button. So I made a javascript onclick function. It goes to the function in my controller but it passes null as parameter instead of the id as string idk what to do anymore...

function deleteBooking(bookingId) {

    console.log(bookingId);   // this works

    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
        if (result.value) {
            $.ajax({
                type: 'POST',
                url: '/Booking/DeleteBooking/',   // the URL of the controller action method
                data: bookingId, // optional data
                success: function (result) {
                    Swal.fire(
                        'Deleted!',
                        'Your file has been deleted.',
                        'success'
                    )
                },
                error: function (req, status, error) {
                    Swal.fire(
                        'Error!',
                        'Your file could NOT be deleted.',
                        'error'
                    )
                }
            });
        }
    })
}

The console.log(bookingID) shows me the right id but in the controller function I just get null.

Answer 1

When passing data to controller via Ajax, the data must be sent as key value pairs as follows:

data: { "bookingId":  bookingId }

Key must be same as the parameter name in the controller.

Answer 2

Try updating the data portion of your ajax call to look like this:

            $.ajax({
                type: 'POST',
                url: '/Booking/DeleteBooking/',   // the URL of the controller action method
                data: { bookingId:  bookingId } , // optional data
                success: function (result) {
                    Swal.fire(
                        'Deleted!',
                        'Your file has been deleted.',
                        'success'
                    )
                },
                error: function (req, status, error) {
                    Swal.fire(
                        'Error!',
                        'Your file could NOT be deleted.',
                        'error'
                    )
                }
            });