Null parameters in controller when sending post via ajax

0

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

Before signing the controller method it was as follows:

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

Sending forms was done 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 serialize() . I do not know why it's not working.

Forms HTML

<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>

Shipping Javascript

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; }
}
    
asked by anonymous 12.09.2016 / 15:31

1 answer

0

The form to work looks like this:

Note: 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 code Javascript , you should send a serialized item with all the information, then the two form was added:

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);
        }
    });
}

In the submit button, in the event onClick I passed the name of the function enviarData(); , and lastly in controller :

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