Basic Ajax POST sending values arrives null in the controller

Question

I know this is a question that is regularly asked everywhere on the forums of dev but despite having searched I can not find what stuck.

I'm just trying to pass some values through an Ajax POST to my controller. Ajax receives the values but they arrive null in my controller.

I tried declaring a model that has the same variable names and I also tried putting each field in the signature of my method (with the same variable names) but the result is always the same: null.

Is it possible that this does not work because the model of my view is different from the model with which I want to receive my data?

Would you have an idea of what is stuck and especially what is it due?

Thx!

Controller V1

[Authorize]
[HttpPost]
public async Task<ActionResult> ShowRegistration(Models.RegisterForm rF)
{

Controller V2

    [Authorize]
    [HttpPost]
    public async Task<ActionResult> ShowRegistration(string Id, string Status, string Checkin, string Checkout, string Cost, bool Terms, bool Info, string Member_Zkp)
    {
        return View();
    }

Model

public class RegisterForm
{
    public string Id { get; set; }
    public string Status { get; set; }
    public string Checkin { get; set; }
    public string Checkout { get; set; }
    public string Cost { get; set; }
    public bool Terms { get; set; }
    public int TermsINT { get; set; }
    public int InfoINT { get; set; }
    public bool Info { get; set; }
    public string Member_Zkp { get; set; }
}

Ajax Function

function Edit() {

    event.preventDefault();
    var id = $('#Zkp').val();
    var status = $('#StatusDrop').val();
    var cost = $('#Cost').val();
    var checkin = $('#Checkin').val();
    var checkout = $('#Checkout').val();
    var check1 = $('#check1').val();
    var check2 = $('#check2').val();
    var dataRegister = { "Id": id, "Status": status, "Cost": cost, "Terms": check1, "Info": check2 };

    $('html, body').animate({ scrollTop: 0 }, 'fast');
    $('#alertWait').show('fade');
    setTimeout(function () {
        $('#alertWait').hide('fade');
    }, 4000);

    $.ajax({
        url: "https://localhost:44338/Registration/ShowRegistration/",
        data: { "Id" : id, "Status": status, "Cost": cost, "Terms": check1, "Info": check2 },
        type: 'POST',

        contentType: 'application/JSON',
        success: function (data) {
            if (data === "success") {
                $('html, body').animate({ scrollTop: 0 }, 'fast');
                $('#alertOk').show('fade');

                setTimeout(function () {
                    $('#alertOk').hide('fade');
                }, 4000);
            }
        },
        error: function () {
            $('html, body').animate({ scrollTop: 0 }, 'fast');
            $('#alertError').show('fade');
            setTimeout(function () {
                $('#alertError').hide('fade');
            }, 4000);
        }
    });
}

Answer 1

First of all

Try to remove double quotes from every key in your post data like.

data: { Id : id, Status: status, Cost: cost, Terms: check1, Info: check2 }

And then,

Try to hide this line from your ajax call.

contentType: 'application/JSON',

Answer 2

Serialize your object to json before sending it :

data: JSON.stringify({ "Id": id, "Status": status, "Cost": cost, "Terms": check1, "Info": check2 }),

you can also receive the model, instead of declaring x variables

public async Task<ActionResult> Index(RegisterForm model)