How do I send the JavaScript Array to the Controller from Ajax - asp.net-core

Question

Cannot get object values in the controller from the ajax post.
I have a jQuery data table with the first column being checkbox's and I need to return the selected row ids to the controller. I can get everything I need but it is always null in the controller.
Model:
public class Values
{
public Guid ID { get; set; }
}
View JS & Ajax on button click:
function SubAll() {
var values = [];
$('#timesheet').find('input[type="checkbox"]:checked').each(function (index, rowId) {
//this is the current checkbox
var temp = $(this).closest('tr').attr('id');
if (String(temp) === String("undefined")) {
//skip; it is the select all box
}
else {
//push to array
values.push(temp);
}
});
console.log(values);
var data = { ID: values };
console.log(data);
$.ajax({
url: "#Url.Action("ApproveAllTimesheets", "Admin")",
type: 'POST',
data: JSON.stringify(data),
dataType: 'json',
success: function (result) {
alert(result);
},
error: function (xhr, textStatus) {
if (xhr.status == 401) { alert("Session Expired!"); window.location = "/Account"; }
else {
alert('Content load failed!', "info");
}
}
});
};
Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public void ApproveAllTimesheets(List<Values> value)
{}
On button click the array 'values' gets filled with the id if a box was selected (works fine), then it is turned into an object 'data' to match the method signature and model and stringify'd. When the breakpoint is hit on the controller method the values are never there. What am I missing?
**UPDATE:**
function SubAll() {
var values = [];
$('#timesheet').find('input[type="checkbox"]:checked').each(function (index, rowId) {
//this is the current checkbox
var temp = $(this).closest('tr').attr('id');
if (String(temp) === String("undefined")) {
//skip; it is the select all box
}
else {
//push to array
values.push({ Id: temp });
}
});
console.log(values);
$.ajax({
url: "/Admin/ApproveAllTimesheets",
type: "POST",
data: values,
dataType: "html",
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success: function (result) {
alert(result);
},
error: function (xhr, textStatus) {
if (xhr.status == 401) { alert("Session Expired!"); window.location = "/Account"; }
else {
alert('Content load failed!', "info");
}
}
});
};
**Method Signature:**
public IActionResult ApproveAllTimesheets( List<Value> values)
**Class**
public class Value
{
public Guid ID { get; set; }
}
UPDATE #3
Model:
public class Value
{
public string TimeId { get; set; }
}
Ajax:
function SubAll() {
//var selectedValues = $('#timesheet').DataTable().column(0).checkboxes.selected().toArray();
var dataJSON = { TimeId: "test" };
console.log(dataJSON);
$.ajax({
url: "/Admin/ApproveAllTimesheets",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(dataJSON),
success: function (result) {
alert(result);
},
error: function (xhr, textStatus) {
if (xhr.status == 401) { alert("Session Expired!"); window.location = "/Account"; }
else {
alert('Content load failed!', "info");
}
}
});
};
Controller:
public ActionResult ApproveAllTimesheets([FromBody]Value information)

Answer 1

You should insert the ids like javascript normal objects :
values.push({
ID: "d88b44e4-1009-47d6-9f2f-f675dca89fe8",
});
Code below is for your reference :
function SubAll() {
var values = [];
values.push({
ID: "d88b44e4-1009-47d6-9f2f-f675dca89fe6",
});
values.push({
ID: "d88b44e4-1009-47d6-9f2f-f675dca89fe7",
});
values.push({
ID: "d88b44e4-1009-47d6-9f2f-f675dca89fe8",
});
$.ajax({
type: "POST",
url: "/Admin/ApproveAllTimesheets",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(values),
success: function (result) {
alert(result);
},
error: function (xhr, textStatus) {
if (xhr.status == 401) { alert("Session Expired!"); window.location = "/Account"; }
else {
alert('Content load failed!', "info");
}
}
});
};
Controller :
public void ApproveAllTimesheets([FromBody]List<Values> value)
{
}
Model :
public class Values
{
public Guid ID { get; set; }
}

Answer 2

If this is your JSON
{ <-- This here is the start of your object
"id": 1;
}
This would need to get bound to a Model
class AnyModel {
public int Id {get; set;}
}
If you have a list in JSON
{
[
...Some objects
]
}
You would need to accept a model of in your controller
class AnyModel {
public List<SomeOtherModel> ListObject {get; set;}
}
Update
You want to store the list of 'Values' in another model.
class Value {
public Guid Id {get;set;}
}
class ValueContainer {
public List<Value> Values {get; set;}
}
Now you want to bind your JSON to your ValueContainer object. When you send JSON you need the [FromBody] for the JSON to get bound to your Model.
public IActionResult ApproveAllTimesheets([FromBody] ValueContainer values) {}
Update 2
Apologies looking through your JS code (old one) a little bit closer you should be using the following structure:
class ValueContainer {
public List<Guid> Id {get; set;}
}
List<Guid> is your values array which you bind to id in your JSON object. Controller stays the same.
public IActionResult ApproveAllTimesheets([FromBody] ValueContainer values) {}

Answer 3

So my Update #3 is working and now I have a different issue so I will post a new question for that.