将InputRadio与布尔值一起使用

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当前是可为null的int，因为int似乎是内置的InputRadio控件绑定所期望的。我宁愿将Foo.Bar设置为可为null的bool，而不是int，因为我的应用程序有很多"是/否"问题，在代码中使用true/false会让事情变得更容易、更可读。

Blazor中有没有一种方法可以配置它，使InputRadio控件可以绑定到布尔值？

Answer 1

这适用于.NET 6:

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

Answer 2

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

<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值，但似乎不是，这里有一个repro(也许你可以在他们的repo中用MS记录它(-最初它似乎可以解析，但更改值会抛出，它无法从字符串中解析。这向我表明，他们只支持单选按钮组的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;
}
}

解决方案：

• 如果可以的话，可以使用枚举(它基本上是一个整数，这就是它工作的原因(
• 使用可以解析为所需布尔值的辅助字段(下面的示例(

要计算helper字段，您需要可以解析的字符串，并且您可能需要将它们作为视图模型中的变量，因为仅仅设置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 3

这个问题已经得到了回答，但可能有些人喜欢我提出的解决方案

形成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值存储在数据库中，或者使用它做任何您想做的事情

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

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

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