I need to show different components based on a radio selection so I'm using InputRadioGroup like described here.

When either of the options is selected, the page rerenders, the correct component is shown, but the InputRadioGroup is rerendered again and not preserving the selection. I've tried to put InputRadioGroup in a <EditForm Model="ColorInt" but the same thing happens. I've even tried the checked="@(ColorInt == 1)" approach, but it's not working either. This was a reported bug which have been solved in .NET 7, but it still happens to me.

<InputRadioGroup Name="color" @bind-Value="ColorInt">
    Colors:
    <div style="margin-bottom:5px">
        <div>
            <label>
                <InputRadio Name="color" Value="1" checked="@(ColorInt == 1)" />
                Red
            </label>
        </div>
        <div>
            <label>
                <InputRadio Name="color" Value="2" checked="@(ColorInt == 2)" />
                Green
            </label>
        </div>
        <div>
            <label>
                <InputRadio Name="color" Value="3" checked="@(ColorInt == 3)" />
                Blue
            </label>
        </div>
    </div>
</InputRadioGroup>

@switch (ColorInt)
{
     case 1: { <red /> break; }
     case 2: { <green/> break; }
     case 3: { <blue/> break; }   
}

@code {
    private int ColorInt{ get; set; } = 1;
}

P.S. Just stupid from me...because of need of editing my actual code I've never checked this. My Value actually comes from a static class MagicStrings that holds some const values for my entire app.

<InputRadio Name="color" Value="@MagicStrings.RedColor" />

Now MagicStrings.RedColor type was byte

public const byte RedColor = 1;

@code {
    private int ColorInt{ get; set; } = @MagicStrings.RedColor; // which was byte
}

I need to show different components based on a radio selection so I'm using InputRadioGroup like described here.

When either of the options is selected, the page rerenders, the correct component is shown, but the InputRadioGroup is rerendered again and not preserving the selection. I've tried to put InputRadioGroup in a <EditForm Model="ColorInt" but the same thing happens. I've even tried the checked="@(ColorInt == 1)" approach, but it's not working either. This was a reported bug which have been solved in .NET 7, but it still happens to me.

<InputRadioGroup Name="color" @bind-Value="ColorInt">
    Colors:
    <div style="margin-bottom:5px">
        <div>
            <label>
                <InputRadio Name="color" Value="1" checked="@(ColorInt == 1)" />
                Red
            </label>
        </div>
        <div>
            <label>
                <InputRadio Name="color" Value="2" checked="@(ColorInt == 2)" />
                Green
            </label>
        </div>
        <div>
            <label>
                <InputRadio Name="color" Value="3" checked="@(ColorInt == 3)" />
                Blue
            </label>
        </div>
    </div>
</InputRadioGroup>

@switch (ColorInt)
{
     case 1: { <red /> break; }
     case 2: { <green/> break; }
     case 3: { <blue/> break; }   
}

@code {
    private int ColorInt{ get; set; } = 1;
}

P.S. Just stupid from me...because of need of editing my actual code I've never checked this. My Value actually comes from a static class MagicStrings that holds some const values for my entire app.

<InputRadio Name="color" Value="@MagicStrings.RedColor" />

Now MagicStrings.RedColor type was byte

public const byte RedColor = 1;

@code {
    private int ColorInt{ get; set; } = @MagicStrings.RedColor; // which was byte
}

• blazor
• blazor-server-side
• radio-group
• -9.0

1 Answer 1

I'm not sure how you set up your solution, but here's my demo page [basically the same yours] which works:

• Blazor Server
• Interactivity: Global

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<InputRadioGroup Name="color" @bind-Value="ColorInt">
    Colors:
    <div style="margin-bottom:5px">
        <div>
            <label>
                <InputRadio Name="color" Value="1"/>
                Red
            </label>
        </div>
        <div>
            <label>
                <InputRadio Name="color" Value="2"/>
                Green
            </label>
        </div>
        <div>
            <label>
                <InputRadio Name="color" Value="3"/>
                Blue
            </label>
        </div>
    </div>
</InputRadioGroup>

@switch (ColorInt)
{
    case 1:
        {
            <span>Red</span>
            break;
        }
    case 2:
        {
            <span>Green</span>
            break;
        }
    case 3:
        {
            <span>Blue</span>
            break;
        }
}

@code {
    private int ColorInt { get; set; } = 1;
}

Demo Repo: https://github/ShaunCurtis/SO79540762