使用 Blazor 设置 chekbox 值而不绑定

Question

这可能很容易，但我有点卡住了。 我正在从数据库读取数据，需要一个 chekbox 来反映 bool 的当前状态，我可以在代码中获取状态，但无法弄清楚如何添加或删除复选框输入的“已检查”属性。 我正在使用@onchange调用函数，但不能使用@Bind 。 我假设我可以创建一个返回值的函数： ""或"checked"并在标签内调用它，但这不起作用。

这是我的输入：

<input type="checkbox" class="form-control" value="test" @BoolChecker() @onchange="@function1()" />

这是函数 BoolChecker()：

public string BoolChecker()
        {
            if (mybool != null) {
                return (mybool == true) ? "checked" : "");
            }
            else
            {
                return "";
            }
        }

我可以在哪里放置 BoolChecker 函数来完成这项工作？ 如果不清楚，如果 BoolChecker 函数返回“已选中”（并且 mybool 为真），则假设使复选框显示为选中状态

Answer 1

这是另一个答案：

@* 注意：此代码片段使用复选框来创建双向数据绑定：从下面的@code 块中定义的名为 ticked 的变量到输入复选框。 最初我们将它的值设置为 false，这就是为什么当您运行代码时，您会注意到复选框未被选中。 这是一种单向绑定。

要创建从控件到变量的绑定，您应该添加带有事件处理程序的 @onchange 指令，该事件处理程序从系统获取新值并更新 ticked 变量。

您可能已经注意到，与绑定到 value 属性的大多数输入元素不同，输入复选框绑定到 *checked** 属性

value 属性存储应该发布到数据库的值@

<input type="checkbox" value="test" checked="@ticked" @onchange="@((args) => { ticked = (bool)
        args.Value; Console.WriteLine(ticked.ToString());} )" />

@code {
    bool ticked = false;
}

当然，您可以使用 @bind 指令来创建这样的双向数据绑定：

<input type="checkbox" value="test" @bind="@ticked" />

请注意，您不能将@onchange 指令与@bind 指令一起使用，因为@bind 指令是一个编译器指令，它告诉编译器像我在第一个输入中手动所做的那样创建绑定，当然您不允许有两个@ onchange 属性。

注意：你不能这样做： @onchange="@function1()"分配给 @onchange 指令的值应该是一个 lambda 表达式，例如：

@onchange="@(() => function1)"

仅当您要将值传递给 function1 时才应使用括号，如下所示： @onchange="@(() => function1 (true))"

此外， @BoolChecker()必须是分配给属性的值。 你不能这样使用它......你可以这样做：

@onchange="@(() => BoolChecker)"

Answer 2

以下代码片段创建了一个带有十个输入复选框的表格元素。 将代码复制到您的 Index 组件中并运行以进行测试。 然后检查代码并尝试了解它应该如何在 Blazor 中完成

<table class="table table-hover">
   <thead>
    <tr>
        <th>Select</th>
        <th>Number</th>
        <th>Text</th>
    </tr>
</thead>
<tbody>
    @foreach (var row in rows)
    {

    <tr @onclick="@(() => { row.Selected = !row.Selected; 
        Console.WriteLine(row.Selected.ToString()); })">
         <td><input type="checkbox" checked="@row.Selected" 
    @onchange="@((args) => { row.Selected = (bool)
    args.Value; Console.WriteLine(row.Selected.ToString());} )" /></td>
        <td>@row.Number</td>
        <td>@row.Text</td>
    </tr>
    }
 </tbody>
 </table>

 @code
 {
    List<Row> rows = Enumerable.Range(1, 10).Select(i => new Row
     {
    Selected =
         false,
    Number = i,
    Text = $"Item {i}"
    }).ToList();

   private class Row
 {
    public bool Selected { get; set; }
    public int Number { get; set; }
    public string Text { get; set; }

}
}

Answer 3

绑定有什么问题？ 如果你需要，你可以挂钩到二传手