Submit multiple tabs within one view ASP.NET MVC - asp.net-mvc

Question

I have an ASP .NET application with multiple tabs on a view, each tab containing several inputs for each course attendee (name, phone number, job title, etc).
I created a jquery function to collect data from views and generate the JSON accordingly:
function getAttendees() {
var sections = [];
$(".divWithInputs").each(function (i, val) {
var tab = $(val).serializeArray();
sections.push(tab);
});
return sections;
}
And the submit function:
$("#checkoutAttendees").click(function () {
var formData = new FormData();
formData.append("Attendees", JSON.stringify(getAttendees()));
$.ajax({
url: "/controllerURL",
type: 'POST',
contentType: "application/json; charset=utf-8",
cache: false,
contentType: false,
processData: false,
data: formData,
success: function (response) {
alert(response);
}
});
});
I have an issue when reading the JSON, because I need an IEnumerable of Attendee objects to populate with this sort of data:
[
[
{
"name":"first-name-attendee-0",
"value":"Jon"
},
{
"name":"last-name-attendee-0",
"value":"Stark"
},
{
"name":"email-attendee-0",
"value":"jon.stark#northwall.com"
},
{
"name":"phone-attendee-0",
"value":"0181042981029840"
},
{
"name":"company-attendee-0",
"value":"Nightwatch"
},
{
"name":"job-title-attendee-0",
"value":"King"
}
],
[
{
"name":"first-name-attendee-1",
"value":"Aria"
},
{
"name":"last-name-attendee-1",
"value":"Stark"
},
{
"name":"email-attendee-1",
"value":"noemail#nodomain.com"
},
{
"name":"phone-attendee-1",
"value":"000000000000000"
},
{
"name":"company-attendee-1",
"value":"No organization"
},
{
"name":"job-title-attendee-1",
"value":"Killer"
}
],
[
{
"name":"first-name-attendee-2",
"value":"Mad"
},
{
"name":"last-name-attendee-2",
"value":"King"
},
{
"name":"email-attendee-2",
"value":"mad.king#yahoo.com"
},
{
"name":"phone-attendee-2",
"value":"019209840921840219"
},
{
"name":"company-attendee-2",
"value":"Kingdom"
},
{
"name":"job-title-attendee-2",
"value":"King"
}
]
]
Any advise on how to properly transform data from JSON into a list of Attendees ?
Thank you.

Answer 1

Solution: in backend I had to create a list of lists of NameValuePair
The Action method looks like this:
[HttpPost]
public ActionResult TrainingBook(FormCollection formCollection)
var viewModel = new TrainingFormViewModel();
var attendeesListJSON = formCollection["Attendees"];
var attendeesJson = JsonConvert.DeserializeObject<List<List<KeyValuePair<string, string>>>>(attendeesListJSON);
List<Attendees> attendees = new List<Attendees>();
foreach (var item in attendeesJson)
{
attendees.Add(new Attendees {
FirstName = item[0].Value,
LastName = item[1].Value,
WorkEmailAddress = item[2].Value,
PhoneNumber = item[3].Value,
Organization = item[4].Value,
JobTitle = item[5].Value
});
}
A key value pair is name and value for an input, the first list of key value pairs is one attendee, the the list of lists, ofc, all the attendees.