Do you use @bind-Value:after instead of ValueChanged?

When using two-way binding in Blazor with @bind-Value, you might want to execute code when the bound value changes. A common mistake is trying to use both @bind-Value and ValueChanged together, but this causes a compile error because ValueChanged is generated by the @bind-Value directive.

The correct approach is to use @bind-Value:after which triggers a callback after the value changes.

❌ Bad Example - Using ValueChanged with @bind-Value

<RadzenRadioButtonList TValue="bool?" 
    @bind-Value="Question.Answer.BoolValue" 
    ValueChanged="@(() => SaveQuestion())" />

✅ Good Example - Using @bind-Value:after

<RadzenRadioButtonList TValue="bool?" 
    @bind-Value="Question.Answer.BoolValue" 
    @bind-Value:after="@(() => SaveQuestion())" />

How @bind-Value:after works

The @bind-Value:after directive:

• Executes after the bound value is assigned synchronously
• Supports both synchronous and asynchronous delegates
• Works with any component that supports two-way binding
• Can be used with different binding events (e.g., @bind-Value:event="oninput")

Advanced Example

<input @bind="searchText" 
       @bind:event="oninput" 
       @bind:after="PerformSearch" />

@code {
    private string? searchText;
    private string[]? searchResult;

    private async Task PerformSearch() => 
        searchResult = await SearchService.FetchAsync(searchText);
}

References

• ASP.NET Core Blazor data binding - Microsoft Docs