How to Bind a Model that contains an IEnumerables class - asp.net-core

Question

I have a front end calling an axios request to a web api in ASP.NET Core and for some reason my model will not bind. I am sending email data to the web api and trying to bind it to an email and contact model. It just keeps showing the email object as null. My axios request seems to be working okay as it does send the payload but errors out in the API due to the email object being null.
JS
axios({
method: 'post',
url: window.location.origin + '/MainReview/SendEmail',
data: {
From: this.emailFrom,
To: this.emailToModel,
Cc: this.emailCcModel,
Bcc: this.emailBccModel,
Subject: this.emailSubject,
Body: this.emailBody,
},
headers: {
'Content-Type': 'multipart/form-data',
"RequestVerificationToken": document.forms[0].querySelector('input[name="__RequestVerificationToken"]').value,
}
}).then(response => {
}).catch(error => {
console.log(error.response.data.error);
});
Web API
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult SendEmail([FromBody] Email email)
{
System.Diagnostics.Debug.WriteLine(email.From);
return Ok(new { Result = email.From });
}
Model:
public class Email
{
public string? From { get; set; }
public IEnumerable<Contact>? To { get; set; }
public IEnumerable<Contact>? Cc { get; set; }
public IEnumerable<Contact>? Bcc { get; set; }
public string? Subject { get; set; }
public string? Body { get; set; }
}
public class Contact
{
public string EmailAddress { get; set; }
}
Json data sent in payload:
{ "From":"emailfrom#example.com", "To":[ { "EMAIL_ADDRESS":"emailTo#example.com" }, { "EMAIL_ADDRESS":"emailCC#example.com" } ], "Cc":[ { "EMAIL_ADDRESS":"emailCC2#example.com" } ], "Bcc":[ ], "Subject":"Temporary Placeholder", "Body":"tessdf" }
I believe my issue is something with the IEnumerable. I will be honest I have stayed away from models but I figure I will start trying to use them more since its best practice. However, this is driving me nuts as I do not see why this would not work.

Answer 1

1.You use [FromBody] in backend and post json data in frontend, the Content-Type should be application/json.
headers: {
'Content-Type': 'application/json', //change here....
"RequestVerificationToken": document.forms[0].querySelector('input[name="__RequestVerificationToken"]').value,
}
2.The posted json data is not correct because the property in Contact model is named EmailAddress, but you post json with name EMAIL_ADDRESS.
data: { "From":"emailfrom#example.com", "To":[ { "EmailAddress":"emailTo#example.com" }, { "EmailAddress":"emailCC#example.com" } ], "Cc":[ { "EmailAddress":"emailCC2#example.com" } ], "Bcc":[ ], "Subject":"Temporary Placeholder", "Body":"tessdf" },

Answer 2

Ensure the structure matches methods parameter class.
Here, we've got an email parameter, which is an object {}. And it also has properties which are a list of objects [{}].
data: {
From: this.emailFrom,
To: [{ EmailAddress: this.emailToModel }],
Cc: [{ EmailAddress: this.emailCcModel }],
Bcc: [{ EmailAddress: this.emailBccModel }],
Subject: this.emailSubject,
Body: this.emailBody,
}
Note: If you were passing more than one parameter you need to specify the parameter name as well, with an extra set of {}.
data: {
email: {
From: this.emailFrom,
To: [{ EmailAddress: this.emailToModel }],
Cc: [{ EmailAddress: this.emailCcModel }],
Bcc: [{ EmailAddress: this.emailBccModel }],
Subject: this.emailSubject,
Body: this.emailBody,
},
parameter2:"XXXXXXXXX"
}