Blazor Interactive Server on .NET 9 : InputRadioGroup rerender the page and not preserving selected option - Stack Overflow

admin管理员组

文章数量:1356914

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

Share Improve this question Follow edited Mar 28 at 9:16 sTx asked Mar 28 at 7:17 sTxsTx 1,2751313 silver badges3636 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签：