Null parameters in the controller when sending post via ajax

Question

I am refactoring an ASP.NET MVC application written by another developer. My intention is to remove the use of FormCollection.

Before the controller method signature was the following:

public ActionResult Salvar(FormCollection ParametroformCollection, FormCollection ParametroFormHidden, string ParametroView, string ParametroStrDirecao)

The forms were sent via ajax, using serializeArray()

So I created two models, one for each form, but in the controller the objects are not filled, being null. I tried to serialize with serializeArray() and with serialize(). I don’t know why it’s not working.

HTML of the Forms

<form id="hiddenForms" method="POST">
    <input type="hidden" id="idhiddenFormPlaca" name="namehiddenFormPlaca" value="" />
    <input type="hidden" id="idhiddenFormFabricante" name="namehiddenFormFabricante" value="" />
    <input type="hidden" id="idhiddenFormAnoModelo" name="namehiddenFormAnoModelo" value="" />
    <input type="hidden" id="idhiddenFormOficina" name="namehiddenFormOficina" value="" />
    <input type="hidden" id="idhiddenFormCarrinho" name="namehiddenFormCarrinho" value="" />
    <input type="hidden" id="idhiddenFormAlteracao" name="namehiddenFormAlteracao" value="" />
</form>

<form id="containerForm" method="POST">
    <input type="text" id="idPlaca" name="namePlaca" value="@Model.strPlacaVeiculo" />
    <div class="radio" style="display:none;">
        <label><input type="radio" id="idRbCarros" name="optradio" value="Carros e Utilitários Pequenos">Carros</label>
    </div>
    <div class="radio" style="display:none;">
        <label><input type="radio" id="idRbMotos" name="optradio" value="Motos">Motos</label>
    </div>
    <div class="radio" style="display:none;">
        <label><input type="radio" id="idRbCaminhoes" name="optradio" value="Caminhões e Micro-Ônibus">Caminhões</label>
    </div>
</form>

Javascript of sending

function enviar() {
     var form = $("#containerForm").serialize();
     var formhidden = $("#hiddenForms").serialize();
     $.ajax({
                type: "POST",
                url: '@Url.Action("Salvar", "Home")',
                data: { ParametroformCollection: form, ParametroFormHidden: formhidden, ParametroView: "Placa", ParametroStrDirecao: ParametroDirecao },
                success: function (result) {

                }
     });
}

Controller

    [HttpPost]
    public ActionResult Salvar(PlacaForm ParametroformCollection, FormHidden ParametroFormHidden, string ParametroView, string ParametroStrDirecao)
    {
      ....
    }

Model

public class FormHidden
{
    public string namehiddenFormPlaca { get; set; }
    public string namehiddenFormFabricante { get; set; }
    public string namehiddenFormAnoModelo { get; set; }
    public string namehiddenFormOficina { get; set; }
    public string namehiddenFormCarrinho { get; set; }
    public string namehiddenFormAlteracao { get; set; }
}

public class PlacaForm
{
    public string namePlaca { get; set; }
}

Answer 1

The form to make it work:

Observing: placed in the form fields, their values.

<form id="hiddenForms" method="POST">
    <input type="hidden" id="idhiddenFormPlaca" name="namehiddenFormPlaca" value="0" />
    <input type="hidden" id="idhiddenFormFabricante" name="namehiddenFormFabricante" value="1" />
    <input type="hidden" id="idhiddenFormAnoModelo" name="namehiddenFormAnoModelo" value="2" />
    <input type="hidden" id="idhiddenFormOficina" name="namehiddenFormOficina" value="3" />
    <input type="hidden" id="idhiddenFormCarrinho" name="namehiddenFormCarrinho" value="4" />
    <input type="hidden" id="idhiddenFormAlteracao" name="namehiddenFormAlteracao" value="5" />
</form>

<form id="containerForm" method="POST">
    <input type="text" id="namePlaca" name="namePlaca" value="100" />
    <div class="radio" style="display:none;">
        <label><input type="radio" id="idRbCarros" name="optradio" value="Carros e Utilitários Pequenos">Carros</label>
    </div>
    <div class="radio" style="display:none;">
        <label><input type="radio" id="idRbMotos" name="optradio" value="Motos">Motos</label>
    </div>
    <div class="radio" style="display:none;">
        <label><input type="radio" id="idRbCaminhoes" name="optradio" value="Caminhões e Micro-Ônibus">Caminhões</label>
    </div>
    <button type="button" onclick="enviarData()">Enviar</button>
</form>

In the code Javascript, should send an item serialized with all the information, then, was made the junction of the two form:

function enviarData() {

    var data = $("#hiddenForms").serialize();
    data = data + "&" + $("#containerForm").serialize();

    //console.log(data);

    $.ajax({
        type: "POST",
        url: '@Url.Action("Salvar", "Home")',
        data: data,
        success: function (data) {
            console.log(data);
        },
        "error": function (result) {
            var response = result.responseText;
            alert('Erro: ' + response);
        }
    });
}

On the send button, on event onClick I passed the function name enviarData();, and finally in the controller:

[HttpPost()]
public ActionResult Salvar(FormHidden formHidden, PlacaForm placaForm)
{
   //code ...
}