Blazor 复选框绑定不起作用 - 服务器端

Posted 2023-03-27

【中文标题】Blazor 复选框绑定不起作用 - 服务器端

【英文标题】：Blazor checkbox binding is not working - server-side

【发布时间】：2020-01-22 07:15:53

【问题描述】：

TLDR； 就像字符串/文本框绑定在输入控件上工作得很好，但布尔属性支持的复选框绑定不起作用。我知道复选框值的绑定需要使用“checked”属性而不是“value”属性，但 Blazor 应该可以跨不同的控件类型进行处理。

我正在使用 RC1 做一些 Blazor 工作（服务器端应用程序），但似乎无法将布尔值绑定到输入复选框控件。我相信使用的语法是正确的（见下文）。作为一个简单的测试，我创建了一个新项目，并简单地将 index.razor 页面替换为下面的示例代码。运行时注意：

文本框输入控件的“测试值”初始化正常。 复选框的初始值为true，但未选中复选框。 更改文本框输入控件的文本，然后更改控件 重点。请注意，在“输出”的“调试”窗口中打印了一条消息 Visual Studio 选项卡（预期行为） 更改复选框输入控件的值（选中或取消选中），然后更改控件焦点。请注意，在 Visual Studio 的“输出”选项卡的“调试”窗口中没有出现任何消​​息（非预期行为）。

@page "/"

<div class="form-group">
    <label for="last-name">Textbox Binding Test</label>
    <input @bind="TestString" type="text" class="form-control" id="last-name" placeholder="Enter Last Name" />
</div>
<div class="form-group">
    <label for="send-email-updates">Checkbox Binding Test</label>
    <input type="checkbox" bind="@TestBool" id="send-email-updates" />
</div>

@code 
    private bool _testBool = true;
    protected bool TestBool
    
        get  return _testBool; 
        set
        
            _testBool = value;
            System.Diagnostics.Debug.WriteLine($"Value of nameof(TestBool) = value");
        
    

    private string _testString = "Test Value";
    protected string TestString
    
        get  return _testString; 
        set
        
            _testString = value;
            System.Diagnostics.Debug.WriteLine($"Value of nameof(TestString) = value");
        
    

无论是公开属性、使用自动属性（无私有变量）还是删除控件名称/ID 属性值，都会观察到此行为。无论我是在页面上使用@code 指令还是分离出从 ComponentBase 继承的视图模型，这似乎都会发生。

最重要的是，当用户提交表单时，我能够获取基于文本的值，但所有布尔属性似乎都保持在第一次初始化时的状态。

【参考方案1】：

当您查看两个控件时：

<input @bind="TestString" type="text" class="form-control" id="last-name" placeholder="Enter Last Name" />
<input bind="@TestBool" type="checkbox"  id="send-email-updates" />

很明显，您正在混合使用 bind 和 @bind 符号，可能来自较早的 Blazor 版本。 这个在 rc1 中工作：

<input type="checkbox" @bind="TestBool" id="send-email-updates" />

但总的来说，我会主张使用<EditForm> 和相关标签：

<EditForm Model="this">
        <InputCheckbox @bind-Value="TestBool" />    
</EditForm>

【讨论】：

我真的需要第二眼看这个 - 谢谢你，亨克！ @bind="TestBool" 工作得很好，并且该格式也适用于我正在构建的更复杂的解决方案/模态形式。另外，感谢 EditForm 的建议。