Understanding Blazor’s EventCallback and @bind-Value: Making Your Components Speak to Parents

Blazor makes building interactive web apps in C# seamless. But if you’ve ever wondered how your child components talk to their parent components, you’re not alone. Let’s break it down in a simple, beginner-friendly way.

---

The Problem

Imagine you have a custom textbox component:

<AnantaTextBox
    Label="Username"
    @bind-Value="username"
    OnBlur="HandleBlur"
/>

You want:

1. The parent to know when the input loses focus (blur event).
2. Two-way binding of the textbox value (username) automatically.

How does Blazor handle this behind the scenes?

---

@bind-Value Magic

@bind-Value is syntactic sugar. It expands into:

<AnantaTextBox
    Value="username"
    ValueChanged="@(v => username = v)"
/>

• Value → passes current value from parent to child
• ValueChanged → notifies parent when child changes value

Every time the user types:

1. The input fires @oninput.
2. The child component updates Value.
3. ValueChanged.InvokeAsync(newValue) updates the parent.

Boom! Two-way binding without extra code.

---

EventCallback: The Parent Whisperer

Sometimes, you don’t just want to update a value—you want to notify the parent about an event like blur, focus, or key press. That’s where EventCallback comes in.

In your textbox:

[Parameter] public EventCallback<FocusEventArgs> OnBlur { get; set; }

private async Task HandleBlur(FocusEventArgs e)
{
    await OnBlur.InvokeAsync(e);
}

• HandleBlur is called when the DOM blur event happens.
• InvokeAsync tells the parent: “Hey! Blur just happened!”
• It does not cause blur—the input is already blurred.

Flow in one picture:

User clicks outside input
        ↓
Browser fires blur event
        ↓
Child component HandleBlur() runs
        ↓
OnBlur.InvokeAsync() notifies parent
        ↓
Parent reacts (validation, logging, etc.)

---

Why This Matters

• Separation of concerns

  • Child handles UI + styling
  • Parent handles logic + state

• Safe and async-aware

  • EventCallback works with async methods

  • Automatically schedules Blazor re-renders

• Predictable flow

  • DOM event → Child handler → Notify parent

---

Mental Model for Beginners

Think of it like a walkie-talkie:

• Child sees an event → “Shout into the walkie-talkie”
• Parent hears the shout → “Do something with that info”

No hidden magic. No surprises. Just communication.

---

Takeaways

• @bind-Value → automatic two-way binding
• EventCallback → safe way to notify the parent
• InvokeAsync → calls the parent handler, does not manipulate the DOM

Once you grasp this, building reusable, interactive Blazor components becomes intuitive.

---

Bonus Tip

Every professional Blazor component library (like MudBlazor, Radzen) follows this pattern. If you build your components this way, your library will feel natural to use.

---

Next Steps:

• Try adding OnInput or OnEnterPressed callbacks.
• Experiment with EditForm + validation messages using ValueExpression.
• Watch your parent and child components “talk” seamlessly.

---

💡 Remember: Child → Event → Notify parent → Parent reacts. That’s Blazor communication in its simplest, most predictable form.