Parameters and Events

Data goes down, notifications come up. A parent passes values into a child through parameters. The child reads them and does not change them. When something happens that the parent needs to know about, the child raises an event and lets the parent decide what to do.

That single rule is what keeps a screen built from twenty components debuggable. For any piece of state there is exactly one component that owns it, so when the state is wrong you know which file to open.

<tr>
    <td>@Employee.Name</td>
    <td>@Employee.Department</td>
    <td>
        <button type="button" @onclick="RaiseSelected">
            View @Employee.Name
        </button>
    </td>
</tr>

@code {
    [Parameter, EditorRequired]
    public Employee Employee { get; set; } = default!;

    [Parameter]
    public EventCallback<Employee> OnSelected { get; set; }

    private Task RaiseSelected() => OnSelected.InvokeAsync(Employee);
}

• [Parameter] makes a property settable from markup. A public property without it cannot be set as an attribute, so the attribute marks the component's intended inputs rather than exposing everything public.
• EditorRequired turns a missing value into a build warning instead of a null reference at render time. The default! suffix tells the compiler you accept responsibility for it being supplied.
• EventCallback<Employee> is the way out. It is a parameter too, so the parent provides it. The child does not know what happens when it is invoked, and that ignorance is what makes the component reusable.
• InvokeAsync runs whatever the parent supplied and tells the parent's renderer that it should render again. A plain Action would run the method but not trigger that render, which produces a screen that updates one click late.
• Returning the Task rather than marking the handler async void lets Blazor await it, so an exception inside the parent's handler surfaces instead of disappearing.
• Nothing in this component decides what selection means. It reports that a button was pressed and which employee it was pressed for.

<tbody>
    @foreach (var employee in employees)
    {
        <EmployeeRow @key="employee.Id"
                     Employee="employee"
                     OnSelected="Show" />
    }
</tbody>

@if (selected is not null)
{
    <EmployeeDetail Employee="selected" />
}

@code {
    private Employee? selected;

    private void Show(Employee employee) => selected = employee;
}

• Attributes on a component set its parameters. Employee="employee" is a C# expression, not the string employee — Razor treats component attribute values as C#.
• OnSelected="Show" hands the child a callback built from the parent's method. Blazor converts the method group to an EventCallback for you, and the compiler checks that the signatures agree.
• The parent owns selected. Both children receive what they need through parameters, and neither of them assigns to it.
• Because Show changed the parent's state, the parent re-renders and EmployeeDetail appears. The child that raised the event did nothing to make that happen.
• Reading this file tells you the whole flow: what each row receives, what it announces, and what the screen does in response. That is the contract a page template cannot express.

<label for="employee-name">Full name</label>
<input id="employee-name" @bind="draft.Name" @bind:event="oninput" />

<label for="employee-department">Department</label>
<select id="employee-department" @bind="draft.Department">
    @foreach (var name in departments)
    {
        <option value="@name">@name</option>
    }
</select>

<p role="status">Preview: @draft.Name in @draft.Department</p>

• @bind does two jobs: it writes the current value into the element, and it assigns the element's new value back to draft.Name.
• By default the write-back happens on the change event, which for a text box means when it loses focus. @bind:event="oninput" moves it to every keystroke, which is what you want when something else on screen mirrors the value.
• This is the pair from the previous lesson, collapsed into one directive. Knowing what it expands to is what lets you drop back to the long form when you need to do something extra in the handler.
• Every field has a label whose for matches the input's id, so clicking the label focuses the field and a screen reader reads the two together. Placeholder text is not a label: it disappears as soon as someone types.
• draft is a private field on this component. It is deliberately not the employee object that arrived as a parameter, which is what the next section is about.