Change event handling in Blazor for child component bound to array

I have a model that's binding to the form controls just fine and more or less doing what it's told (which is software is a great start).

The data model is pretty vanilla:

public class Enrolment  {      public string Id { get; set; }      public Parent[] Parents { get; set; }      public Child[] Children { get; set; }      ...  }    public class Parent  {      public string FamilyName { get; set; }      public string FirstName { get; set; }      public string Email { get; set; }      public string Phone { get; set; }  }  

When I click a button on my "Enrolment.razor" top level form (the 'parent' form, but if I start talking about parents and children too much, this may get confusing), I add one more Parent onto the Parents[] array. Given I may want to add between 1 and 4 parents, I figured I'd do a component to handle that part of the form:

    @foreach(Parent parent in newEnrolment.Parents){          <Caregiver RegisteredParent=parent OnEdit=CaregiverEdit />      }  

The Caregiver component looks like this:

<div className="row">      <div className="column">          <label htmlFor="lastName">Last name</label>          <input type="text" placeholder="Last name" id="lastName" @bind=RegisteredParent.FamilyName />      </div>      <div className="column">          <label htmlFor="firstName">Name</label>          <input type="text" placeholder="First name" @bind=RegisteredParent.FirstName id="firstName" />      </div>      <div className="column">          <label htmlFor="email">Email</label>          <input type="text" placeholder="Email" id="email" @bind=RegisteredParent.Email />      </div>  </div>  <button type="button" @onclick="OnSaveClick">Save</button>    @code {      [Parameter]      public Parent RegisteredParent { get; set; }        [Parameter]      public EventCallback<Parent> OnEdit { get; set; }          private async Task OnSaveClick(MouseEventArgs e)      {          Console.WriteLine($"Saved {RegisteredParent.FirstName} {RegisteredParent.FamilyName}.");          await OnEdit.InvokeAsync(RegisteredParent);      }    }  

What I'd ideally like to do is have the chosen Parent record updated on the onchange event rather than clicking a button to invoke the OnEdit method there. How might I achieve that?

I also have the problem of tracking which Parent I'm editing. Because these are just arrays, I'm not working with IDs or anything, so is there a clever way to identify which Parent in the array index my user is actually working on?

https://stackoverflow.com/questions/66450654/change-event-handling-in-blazor-for-child-component-bound-to-array March 03, 2021 at 12:07PM