Cannot fire onchange event for InputRadio in Blazor Server app

In a Blazor Server page I can't find any way of detecting when a different radio item in the radio group has been selected.

Here's an example where the onchange event never works:

<InputRadioGroup @bind-Value="selectedValue">
    <InputRadio Value="1" @onchange="()=>IsDirty = true">Option 1</InputRadio>
    <InputRadio Value="2" @onchange="()=>IsDirty = true">Option 2</InputRadio>
    <InputRadio Value="3" @onchange="()=>IsDirty = true">Option 3</InputRadio>
</InputRadioGroup>

@code 
{
    private string selectedValue;
    private bool IsDirty { get; set; }
}

Is there a way to set the IsDirty flag in Blazor Server?

This is dotnet 7 using dotnet new blazorserver-empty to generate the template project.

You can use a new property with get and set:

<InputRadioGroup @bind-Value="SelectedValue">
    <InputRadio Value="1">Option 1</InputRadio>
    <InputRadio Value="2">Option 2</InputRadio>
    <InputRadio Value="3">Option 3</InputRadio>
</InputRadioGroup>

@code 
{
    private string selectedValue;
    public string SelectedValue 
    { 
        get { return selectedValue; } 
        set { selectedValue = value; IsDirty = true;}
    }

    private bool IsDirty { get; set; }
}

However, be aware of a few things :

• When initializing selectedValue, don't use the property because you would set the boolean as well.
• The boolean just states that the value has been changed at some point, but it does not tell if the value differs from its original value.
• @bind:set, @bind:get and @bind:after can be used for the same purpose as in @MrCakaShaunCurtis, however it is only available from .Net7 and have a known issue for its early versions making it impossible to use, you must use a VS version that has the issue fixed.

Here's a working example of your code, showing two ways to achieve what you want. I don't use lambda anonymous methods as they are expensive: they have to be created every time the component renders.

The events are all triggered on the InputRadioGroup component, not the individual items: it's a component, not a group of unlinked elements.

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<div class="m-2">
    <InputRadioGroup @bind-Value:get=_selectedValue @bind-Value:set=ValueSet>
        <InputRadio Value="1">Option 1</InputRadio>
        <InputRadio Value="2">Option 2</InputRadio>
        <InputRadio Value="3">Option 3</InputRadio>
    </InputRadioGroup>
</div>

<div class="m-2">
    <InputRadioGroup @bind-Value=_selectedValue @bind-Value:after=ValueSet>
        <InputRadio Value="1">Option 1</InputRadio>
        <InputRadio Value="2">Option 2</InputRadio>
        <InputRadio Value="3">Option 3</InputRadio>
    </InputRadioGroup>
</div>

<div class="bg-dark text-white m-2 p-2">
    <pre>Value : @_selectedValue</pre>
    <pre>State: @(_isDirty? "Dirty" : "Clean")</pre>
</div>
@code
{
    private string? _selectedValue;

    private bool _isDirty { get; set; }

    private void ValueSet(string? value)
    {
        _isDirty = true;
        _selectedValue = value;
    }

    private void ValueSet()
    {
        _isDirty = true;
    }
}

As you are obviously trying to track state then here's a different approach using an edit context object and records. There's no need to manually set or unset IsDirty: the edit context tracks state automatically.

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<div class="m-2">
    <InputRadioGroup @bind-Value=_recordEditContext.Value>
        <InputRadio Value=1>Option 1</InputRadio>
        <InputRadio Value=2>Option 2</InputRadio>
        <InputRadio Value=3>Option 3</InputRadio>
    </InputRadioGroup>
</div>

<div class="bg-dark text-white m-2 p-2">
    <pre>Value : @_recordEditContext.Value</pre>
    <pre>State: @(_recordEditContext.IsDirty? "Dirty" : "Clean")</pre>
</div>
@code
{
    private Model _model = new() {Value=2 };
    private ModelEditContext _recordEditContext = new(new());

    protected override void OnInitialized()
    {
        _recordEditContext = new(_model);
    }

    // Treat all data as immutable
    public record Model {
        public int Value { get; init; }
    }

    // Create an edit context for the record:
    //  - that tracks the state 
    //  - provides a record representing the new state for passing back to the data store 
    public class ModelEditContext
    {
        public Model BaseRecord { get; private set; }
        public int Value { get; set; }

        public ModelEditContext(Model model)
        {
            this.BaseRecord = model;
            this.Value = model.Value;
        }

        public Model AsRecord => new()
        {
            Value = this.Value
        };

        public bool IsDirty => this.BaseRecord != this.AsRecord;
    }
}