How to send array from AJAX to Controller in asp.net?

Question

I'm trying to send an array from AJAX POST to my controller. My request:

var selected = [];
$('.unitsCheckBox:checked').each(function () {
    selected.push($(this).val());
});

data = {
    Units: selected
};
console.debug(data);

$.ajax(
{
    url: "/PostVacancies/PostData",
    type: "POST",
    dataType: 'json',
    data: JSON.stringify(data),
    contentType: 'application/json; charset=utf-8',
    success: function (result) {
        console.debug(result);
    },
    error: function (xhr, status, p3, p4) {
        console.debug(xhr);
        console.debug(status);
        console.debug(p3);
        console.debug(p4);
    }
});

The debug shows me that there are selected units in the data variable.

My Controller:

[HttpPost]
    public bool PostData(SelectedUnits Units)
    {


        return true;
    }

The SelectedUnits method:

public class SelectedUnits
{
    public List<int> Units { get; set; }
}

I set a debug point in the return to see the Units parameter data, but it is always null.

Does anyone know what I am doing wrong?

Try adding `[FromBody] SelectedUnits Units` in the controller. Also, instead of wrapping it inside `data ={...}` just send the `selected` itself. — nurdyguy, Feb 12 '18 at 20:49
I'm getting The type or namespace name 'FromBody' could not be found — Max Boy, Feb 12 '18 at 20:54
Make sure you have `using Microsoft.AspNetCore.Mvc;` at the top. — nurdyguy, Feb 12 '18 at 20:56
I'm getting... Could not install package 'Microsoft.AspNetCore.Mvc 2.0.2'. You are trying to install this package into a project that targets '.NETFramework,Version=v4.5.2', but the package does not contain any assembly references or content files that are compatible with that framework — Max Boy, Feb 12 '18 at 20:58
Does it only work using [FromBody]? I thought I could send the data in the same format of a class — Max Boy, Feb 12 '18 at 21:07
Sorry, I thought I saw a `core` reference in one of your story tags. If you are not on .net core then you don't need to worry about the `FromBody` piece. The .net core is a lot pickier about it than pre-core was. — nurdyguy, Feb 12 '18 at 21:16
You need to change the name of the paremeter in the POST method so it does not match the name of the property in the model - e.g. `public bool PostData(SelectedUnits model)` — , Feb 12 '18 at 21:57

score 0 · Answer 1 · answered Feb 12 '18 at 21:22

In your code, Units is always null at client-side. We normally attach to change event of checkbox.

<input type="checkbox" class="unitsCheckBox" value="1" />
<input type="checkbox" class="unitsCheckBox" value="2" />
<input type="checkbox" class="unitsCheckBox" value="3" />
<input type="checkbox" class="unitsCheckBox" value="4" />
<button type="button" id="btnSubmit">Submit</button>

@section Scripts
{
    <script>
        data = { Units: [] };

        $('.unitsCheckBox').change(function() {
            if ($(this).is(':checked')) {
                data.Units.push($(this).val());
            } else {
                data.Units.pop($(this).val());
            }
        });

        $('#btnSubmit').click(function() {

            console.log(JSON.stringify(data));

            $.ajax({
                url: "/Home/Index",
                type: "POST",
                dataType: 'json',
                data: JSON.stringify(data),
                contentType: 'application/json; charset=utf-8',
                success: function(result) {
                    console.debug(result);
                },
                error: function(xhr, status, p3, p4) {
                    console.debug(xhr);
                    console.debug(status);
                    console.debug(p3);
                    console.debug(p4);
                }
            });
        });

    </script>
}

How to send array from AJAX to Controller in asp.net?

1 Answers1