将 InputRadio 与 bool 值一起使用

Question

我有一个如下所示的 InputRadio 控件：

<InputRadioGroup Name="FooBar" @bind-Value="Foo.Bar">
    <InputRadio Name="FooBar" Value=1 />Yes<br>
    <InputRadio Name="FooBar" Value=0 />No<br>
</InputRadioGroup>

Foo.Bar 当前是可空的 int，因为看起来 int 是内置 InputRadio 控件绑定所期望的。我宁愿将 Foo.Bar 设置为可为 null 的 bool 而不是 int，因为我的应用程序有很多 Yes/No 问题并且在代码中使用 true/false会让事情变得更容易和更易读。

在 Blazor 中有没有办法配置它以便 InputRadio 控件可以绑定到布尔值？

Answer 1

首先，获取布尔值通常是一个复选框，因此您可以先尝试一下。

<EditForm Model="@Foo">

    Type: @Foo.Bar.GetType()
    <br />
    Value: @Foo.Bar
    <br /><br />

    <InputCheckbox @bind-Value="@Foo.Bar">I understand</InputCheckbox>

</EditForm>

@code{
    MyClass Foo { get; set; } = new MyClass();

    public class MyClass
    {
        public bool Bar { get; set; } = true;
    }
}

如果您确实必须使用单选按钮，请继续阅读。

我认为这在理想情况下应该与真实的 bool 值一起使用，但它似乎不能，这是一个重现（也许你可以在他们的回购中用 MS 记录它） - 最初它似乎解析 OK，但是 更改值会抛出 它无法从字符串解析。这向我表明他们只支持单选按钮组的 string 和 int。

<EditForm Model="@Foo">

    Type: @Foo.Bar.GetType()
    <br />
    Value: @Foo.Bar
    <br /><br />

    <InputRadioGroup Name="FooBar" @bind-Value="@Foo.Bar">
        <InputRadio Name="FooBar" Value="@true" />Yes<br>
        <InputRadio Name="FooBar" Value="@false" />No<br>
    </InputRadioGroup>

</EditForm>

@code{
    MyClass Foo { get; set; } = new MyClass();

    public class MyClass
    {
        public bool Bar { get; set; } = true;
    }
}

解决方案：

尽可能使用枚举（它基本上是一个整数，这就是它起作用的原因）
使用可以解析为所需布尔值的辅助字段（示例如下）

为了使辅助字段生效，您需要可以解析的字符串，并且您可能需要将它们作为视图模型中的变量，因为只需设置 Value="@true" 或 Value="true" 实际上要么尝试查找字段，或使用布尔值，而 HTML 元素匹配为字符串。语法有点难懂。

<EditForm Model="@Foo">

    Type: @Foo.Bar.GetType()
    <br />
    Value: @Foo.Bar
    <br />
    String Value @Foo.BarString
    <br /><br />

    <InputRadioGroup Name="FooBar" @bind-Value="@Foo.BarString">
        <InputRadio Name="FooBar" Value="@trueVal" />Yes<br>
        <InputRadio Name="FooBar" Value="@falseVal" />No<br>
    </InputRadioGroup>

</EditForm>

@code{
    string trueVal = "true";
    string falseVal = "false";
    MyClass Foo { get; set; } = new MyClass();

    public class MyClass
    {
        public string BarString { get; set; } = "true";
        public bool Bar { get { return bool.Parse(BarString); } set { BarString = value.ToString().ToLowerInvariant(); } }
    }
}

Answer 2

这个问题已经得到解答，但也许有些人喜欢我提供的解决方案。

形成一个InputRadioGroup我希望你可以像这样简单地绑定它

<InputRadioGroup Name="FooBar" @bind-Value="@Foo.Bar">
    <InputRadio Name="FooBar" Value="@true" />Yes<br>
    <InputRadio Name="FooBar" Value="@false" />No<br>
</InputRadioGroup>

而 @Foo.Bar 是对还是错，但这不起作用。使用 InputCheckbox 和反向值可以解决此问题。

在你的页面写

<InputCheckbox @bind-Value="Foo.Bar" type="checkbox" /> Text 1
<InputCheckbox @bind-Value="Foo.ReversedBar" type="checkbox" /> Text 2

并在您的 Foo 模型中写入

    public bool Bar
    {
        get => _bar;
        set
        {
            _bar = value;
            _reversedBar = !value;
        }
    }
    private bool _bar;

    public bool ReversedBar
    {
        get => _reversedBar;
        set
        {
            _reversedBar = value;
            _bar = !value;
        }
    }
    private bool _reversedBar;

然后您可以简单地将 Foo.Bar 值存储在您的数据库中或用它做任何您想做的事情。

如果您希望其中一个值在页面加载时已经为真，那么您可以这样做。

protected override void OnInitialized()
{
    Foo.Bar = true;
}

如果你想要 InputCheckbox 是圆的，你可以使用一些 css。

Answer 3

这适用于 .NET 6：

<InputRadioGroup Name="FooBar" @bind-Value="@Foo.Bar">
    <InputRadio Name="FooBar" Value="@true" />Yes<br>
    <InputRadio Name="FooBar" Value="@false" />No<br>
</InputRadioGroup>

将 InputRadio 与 bool 值一起使用

Using InputRadio with bool values

blazor

blazor-server-side

blazor-client-side