Send multiple values from my CheckBox to an Ajax call

4

I have a button that when I click calls my ajax function. I want to send the values that were selected in my checkBox. But what comes to my controller is just the first value of my CheckBox.

  

Sunday

And you should send all values selected by the user, of type

  

Sunday WednesdaySex night

Possible problem:

 var myCheckboxes = new Array();
            $("input:checked").each(function () {
                myCheckboxes.push($(this).val());
            });

Script:

  $(document).ready(function () {       
        var itensCatequizandos = $("#SelectedCatequizandos");

        itensCatequizandos.empty();
        $("#procurarCatequizandos").click(function () {
            itensCatequizandos.empty();

            var myCheckboxes = new Array();
            $("input:checked").each(function () {
                myCheckboxes.push($(this).val());
            });

                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("GetCatequizandosByDiasDisponiveis")', // chamar o metodo em json
                    dataType: 'json',
                    data: { diasPertendidos: myCheckboxes },
                    success: function (catequizandos) {
                        $.each(catequizandos, function (i, catequizando) {
                            itensCatequizandos.append('<option value="' + catequizando.PessoaID + '">' + catequizando.Nome + '</option>');
                        });
                    },
                    error: function (ex) {
                    }
                });        
        });

    });

Html:

<div class="modal-body">
<input type="button" id="procurarCatequizandos" name="procurarCatequizandos" value="Procurar" class="btn btn-primary" />
<br />
<input type="checkbox" name="myCheckboxes[]" value="Domingo" class="checkbox-inline" />
@Html.Label("Domingo", new { @class = "control-label" })
<br />
<input type="checkbox" name="myCheckboxes[]" value="Segunda-Feira" class="checkbox-inline" />
@Html.Label("Segunda-Feira", new { @class = "control-label" })
<br />
<input type="checkbox" name="myCheckboxes[]" value="Terça-Feira" class="checkbox-inline" />
@Html.Label("Terça-Feira", new { @class = "control-label" })
<br />
<input type="checkbox" name="myCheckboxes[]"   value="Quarta-Feira" class="checkbox-inline" />
@Html.Label("Quarta-Feira", new { @class = "control-label" })
<br />
<input type="checkbox" name="myCheckboxes[]"   value="Quinta-Feira" class="checkbox-inline" />
@Html.Label("Quinta-Feira", new { @class = "control-label" })
<br />
<input type="checkbox" name="myCheckboxes[]"  value="Sexta-Feira" class="checkbox-inline" />
@Html.Label("Sexta-Feira", new { @class = "control-label" })
<br />
<input type="checkbox" name="myCheckboxes[]" value="Sábado" class="checkbox-inline" />
@Html.Label("Sábado", new { @class = "control-label" })                                           
</div>
    
asked by anonymous 15.04.2016 / 13:04

1 answer

1

Friend your code is correct, just add a traditional: true your ajax that everything will work.

  

The traditional attribute changes the way the data is sent to the   server, without it ASP.NET can not bind because the data   will look like this:

     

'diasPertendidos[]="Segunda"&diasPertendidos[]="Quarta"&diasPertendidos[]="Quinta'

     

With it enabled the data will go like this:

diasPertendidos="Segunda"&diasPertendidos="Quarta"&diasPertendidos="Quinta"

JavaScript:

$.ajax({
    type: 'POST',
    url: '@Url.Action("GetCatequizandosByDiasDisponiveis")', // chamar o metodo em json
    dataType: 'json',
    data: { diasPertendidos: myCheckboxes },
    traditional: true,
    //succes and error
});

Action:

[HttpPost]
public ActionResult GetCatequizandosByDiasDisponiveis(string[] diasPertendidos)
{
    return null;
}
    
15.04.2016 / 14:12