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'm not sure how you set up your solution, but here's my demo page [basically the same yours] which works:
@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.com/ShaunCurtis/SO79540762