主页 / coding / 问题 / 79540762
Accepted
sTx
Asked: 2025-03-28 15:17:53 +0800 CST

.NET 9 上的 Blazor Interactive Server：InputRadioGroup 重新渲染页面但不保留选定的选项

  • 772

我需要根据单选按钮选择显示不同的组件，因此我使用此处InputRadioGroup描述的方法。

当选择任一选项时，页面会重新渲染，并显示正确的组件，但InputRadioGroup会再次重新渲染，并且不会保留选择。我尝试过放入， InputRadioGroup但<EditForm Model="ColorInt"发生了同样的事情。我甚至尝试过这种checked="@(ColorInt == 1)"方法，但它也不起作用。这是一个已报告的错误，已在 .NET 7 中解决，但它仍然发生在我身上。

<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;
}

PS 这只是我的愚蠢行为...因为需要编辑我的实际代码，所以我从未检查过这一点。我的代码Value实际上来自一个静态类MagicStrings，该类保存了我整个应用程序的一些const值。

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

现在MagicStrings.RedColor类型是byte

public const byte RedColor = 1;

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

1 个回答

  1. Best Answer

    我不确定您如何设置您的解决方案，但这是我的演示页面 [基本上与您的相同]，它可以工作：

    • Blazor 服务器
    • 互动性：全球
    @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;
}

    演示仓库：https://github.com/ShaunCurtis/SO79540762

    在此处输入图片描述

    • 1

相关问题