What is the correct way to send a form to a controller via AJAX?

Question

I have a simple form, which is basically my Viewmodel. I am doing a post via AJAX passing this form, however, on the server side, everything is always null. My AJAX is as follows:

var formData = $('form').serialize();
$.ajax({
    url: '/configuracaocomercial/Create',
    type: "post",
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    data: { viewModel: formData },
    success: function (data) {
        // meu callback
    }
});

I had read in a question in the OS in English, that the problem could be the contenttype, so I put this 'application/x-www-form-urlencoded; charset=UTF-8'. However, my problem persists. On the server side, I simply get it:

[HttpPost]
public ResultadoAjax Create(ConfiguracaoComercialViewModelEdit viewModel)
{
    // Aqui, a viewModel já vem null
    // meu código
    // ...
    return result;
}

Answer 1

Try to use in the view the following command:

@using (Ajax.BeginForm("ACTION", "CONTROLLER",
new AjaxOptions
{
    HttpMethod = "POST",
    OnBegin = "$.fn.ExibirLoading();",
    OnSuccess = "CarregarServicoTerceiroServicoComplete(data);",
    OnFailure = "$.fn.VerifyError(xhr, status, error);",
    OnComplete = "$.fn.OcultarLoading();$('#FormCadastrarServico')[0].reset();"
}, new { @id = "FormCadastrarServico" }))
                    {
    //SEU FORMULARIO    
}

And . net will automatically call via ajax, I believe this is the best way.

The methods OnBegin, OnSuccess, OnFailure, OnComplete call js to the actions cited.

Answer 2

From what I can tell, there’s an item in the way viewModel, I believe you should do this:

Change this

var formData = $('form').serialize();
$.ajax({
    url: '/configuracaocomercial/Create',
    type: "post",
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    data: { viewModel: formData },
    success: function (data) {
        // meu callback
    }
});

therefore:

var formData = $('form').serialize();
$.ajax({
    url: '/configuracaocomercial/Create',
    type: "post",
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    data: formData,
    success: function (data) {
        // meu callback
    }
});