Blazor 复选框绑定不起作用 - 服务器端
Blazor checkbox binding is not working - server-side
TLDR;
这就像 string/textbox 绑定在输入控件上工作得很好,但布尔属性支持的复选框绑定不起作用。我知道复选框值的绑定需要使用 'checked' 属性而不是 'value' 属性,但 Blazor 应该跨不同的控件类型处理它。
我正在使用 RC1 做一些 Blazor 工作(服务器端应用程序),但似乎无法获得绑定到输入复选框控件的布尔值。我相信所使用的语法是正确的(见下文)。作为一个简单的测试,我创建了一个新项目,并用下面的示例代码简单地替换了 index.razor 页面。当你 运行 它时,请注意:
- 文本框输入控件的 "Test Value" 初始化正常。
- 复选框的初始值为真,但未选中复选框。
- 更改文本框输入控件的文本,然后更改控件
重点。请注意在输出中的调试 window 中打印了一条消息
Visual Studio 的选项卡(预期行为)
- 更改复选框输入控件的值(选中或取消选中),然后更改控件焦点。请注意,Visual Studio 的输出选项卡中的调试 window 中没有显示任何消息(不是预期的行为)。
@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}");
}
}
}
无论制作属性 public、使用自动属性(无私有变量)还是删除控件 name/id 属性值,都会观察到此行为。无论我是在页面上使用 @code 指令还是分离出从 ComponentBase 继承的视图模型,这似乎都会发生。
最重要的是,当用户提交表单时,我能够获取基于文本的值,但所有布尔属性似乎都保持在首次初始化时的状态。
当您查看两个控件时:
<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>
TLDR; 这就像 string/textbox 绑定在输入控件上工作得很好,但布尔属性支持的复选框绑定不起作用。我知道复选框值的绑定需要使用 'checked' 属性而不是 'value' 属性,但 Blazor 应该跨不同的控件类型处理它。
我正在使用 RC1 做一些 Blazor 工作(服务器端应用程序),但似乎无法获得绑定到输入复选框控件的布尔值。我相信所使用的语法是正确的(见下文)。作为一个简单的测试,我创建了一个新项目,并用下面的示例代码简单地替换了 index.razor 页面。当你 运行 它时,请注意:
- 文本框输入控件的 "Test Value" 初始化正常。
- 复选框的初始值为真,但未选中复选框。
- 更改文本框输入控件的文本,然后更改控件 重点。请注意在输出中的调试 window 中打印了一条消息 Visual Studio 的选项卡(预期行为)
- 更改复选框输入控件的值(选中或取消选中),然后更改控件焦点。请注意,Visual Studio 的输出选项卡中的调试 window 中没有显示任何消息(不是预期的行为)。
@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}");
}
}
}
无论制作属性 public、使用自动属性(无私有变量)还是删除控件 name/id 属性值,都会观察到此行为。无论我是在页面上使用 @code 指令还是分离出从 ComponentBase 继承的视图模型,这似乎都会发生。
最重要的是,当用户提交表单时,我能够获取基于文本的值,但所有布尔属性似乎都保持在首次初始化时的状态。
当您查看两个控件时:
<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>