blazor - 使用带 bool 值的 InputRadio

标签 blazor blazor-server-side blazor-client-side

我有一个 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控制绑定(bind)期望。我宁愿设置Foo.Bar成为可以为空的 bool而不是 int因为我的应用程序有很多是/否问题,并且在代码中使用真/假会使事情变得更容易和更具可读性。
Blazor 中有没有办法配置它,所以 InputRadio控件可以绑定(bind)到 bool 值吗?

最佳答案

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

<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,但是 更改值会抛出 它无法从字符串中解析。这向我表明他们只支持 stringint对于单选按钮组。
<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;
    }
}
解决方案:
  • 如果可以,请使用枚举(它基本上是一个整数,这就是它起作用的原因)
  • 使用可以解析为所需 bool 值的辅助字段(示例如下)

  • 要使辅助字段起作用,您需要可以解析的字符串,并且您可能需要将它们作为 View 模型中的变量,因为只需设置 Value="@true"Value="true"实际上会尝试查找字段,或者使用 bool 值,而 HTML 元素作为字符串匹配。语法有点问题 22。
    <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(); } }
        }
    }
    

    关于blazor - 使用带 bool 值的 InputRadio,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65534419/

    相关文章:

    javascript - 带有 <NavLink> 的 Blazor 子菜单

    dependency-injection - 如何在 Blazor 类中注入(inject)服务(AuthenticationStateProvider)

    javascript - 如何在键入时修改输入并让 Blazor 看到更改

    c# - 将 UI 和 API 组合到单个 Blazor 服务器应用程序中?

    blazor - 如何为 Blazor Web 程序集强制使用 https?

    c# - System.Text.Json 未序列化 List<T>

    c# - 如何阻止图像的通用拖放处理程序?

    components - Blazor 创建通用下拉菜单

    在 Blazor 输入上防止默认