ICollection property is empty during OnValidSubmit() - entity-framework-core

Question

I am trying the free community version of Syncfusion Blazor SfGrid for my basic CRUD of a ICollection property. But while I am able to add, edit, delete at runtime (data is perfectly shown in the datagrid), my ICollection property is always empty during OnValidSubmit()...
1st: My data models look like this:
public class Contact
{
public int ID { get; set; }
public string AccountName { get; set; }
public ICollection<ContactPerson> ContactPersons { get; set; }
}
public class ContactPerson
{
public int ID { get; set; }
public string FirstName { get; set; }
public string MiddleName { get; set; }
public string LastName { get; set; }
}
2nd: My create.razor uses my ContactForm.razor for reusability
<h1>Create</h1>
<hr />
<div style="margin: 50px">
<ContactForm Contact="contact" OnValidSubmit="#CreateRecord" OnCancelButton="#CancelRecord"/>
</div>
#code {
private Contact contact = new Contact
{
ContactPersons = new ContactPerson[0],
ContactAddresses = new ContactAddress[0]
};
void CancelRecord()
{
uriHelper.NavigateTo("contact");
}
async Task CreateRecord()
{
await http.PostAsJsonAsync("api/Contact", contact);
uriHelper.NavigateTo("contact");
}
}
3rd: My ContactForm.razor looks like this (which I use for creating and editing a record):
#if (Contact == null)
{
<text>Loading...</text>
}
else
{
<EditForm Model="#Contact" OnValidSubmit="#OnValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-row">
<div class="form-group col-md-3">
<SfTextBox #bind-Value="#Contact.AccountName" Placeholder="Account Name"></SfTextBox>
<ValidationMessage For="#(() => Contact.AccountName)"></ValidationMessage>
</div>
</div>
<!-- List of Contact Persons -->
<div class="form-row">
<div class="form-group col-md-10">
<SfGrid DataSource="#Contact.ContactPersons" Toolbar="#(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" AllowPaging="true">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
<GridColumns>
<GridColumn Field=#nameof(ContactPerson.ID) IsPrimaryKey="true" HeaderText="ID"></GridColumn>
<GridColumn Field=#nameof(ContactPerson.FirstName) HeaderText="First Name"></GridColumn>
<GridColumn Field=#nameof(ContactPerson.MiddleName) HeaderText="Middle Name"></GridColumn>
<GridColumn Field=#nameof(ContactPerson.LastName) HeaderText="Last Name"></GridColumn>
</GridColumns>
</SfGrid>
</div>
</div>
<!-- Post and Back Link -->
<hr />
<div>
<SfButton type="submit" CssClass="e-primary">Sumbit</SfButton>
<SfButton type="button" CssClass="e-danger" #onclick="#OnCancelButton">Cancel</SfButton>
</div>
</EditForm>
}
#code {
[Parameter] public Contact Contact { get; set; }
[Parameter] public EventCallback OnValidSubmit { get; set; }
[Parameter] public EventCallback OnCancelButton { get; set; }
}
The problem I encounter is that Contact.ContactPersons is empty when I pass it to my controller (webapi), and when I break at CreateRecord() which is `` OnValidSubmit, and watch the variable Contact.ContactPersons in VS2019, the variable is empty and says
Unable to Evaluate.
Please help me understand what's going on.

Answer 1

Issue not related to Blazor...
Since ContactPersons is of ICollection<ContactPerson> type, you should instantiate the ContactPersons field with a collection of ContactPerson objects like this:
private Contact contact = new Contact
{
ContactPersons = new List<ContactPerson>()
};