使用Blazor设置Chekbox值而无需绑定 [英] Setting chekbox value using Blazor without binding

问题描述

这可能很容易，但是我有点卡住了.我正在从数据库读取数据，并且需要一个复选框来反映bool的当前状态，我可以在代码中获取该状态，但无法弄清楚如何添加或删除复选框输入的"checked"属性.我正在使用 @onchange 来调用函数，并且无法使用 @Bind .我假设我可以创建一个返回值的函数:" 或"checked" ，然后在标记内调用它，但这行不通.

this is probably easy, but i'm kind of stuck. I'm reading data from a DB and need a chekbox to reflect the current status of a bool, I can get the status in code but cant figur out how to add or remove the "checked" property of the checkbox input. I'm using @onchange to call a function and can't use @Bind. I asume that i can creat a function that returns the values: "" or "checked" and just call it inside of the tag, but this won't work.

这是我的输入:

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

这是函数BoolChecker():

and this is the function BoolChecker():

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

我在哪里可以放置BoolChecker函数来完成这项工作?如果不清楚，则假设BoolChecker函数返回"checked"(并且mybool为true)使复选框显示为选中状态.

where can i place the BoolChecker function to make this work? if it isen't clear it is suppose to make the checkbox appear checked if the BoolChecker function returns "checked" (and mybool is true)

推荐答案

这是另一个答案:

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

@* Note: This code snippet use the check box to create two-way data binding: From the variable called ticked, defined in the @code block below, to the input checkbox. Initially we set its value to false, which is why when you run the code you'll notice that the check box is not checked. This was a one way binding.

要创建从控件到变量的绑定，应在事件处理程序中添加@onchange指令，该事件处理程序将从系统获取新值并更新选中的变量.

To create a binding from the control to the variable, you should add the @onchange directive with an event handler that gets a new value from the system and update the ticked variable.

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

As you've probably noticed unlike most of the input elements that are bound to their value attribute, the input checkbox is bound to with the *checked** attribute

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

The value attribute store the value that should be posted to the database@

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

@code {
    bool ticked = false;
}

当然，您可以使用@bind指令来创建双向数据绑定，如下所示:

Of course you can use the @bind directive to create a two-way data-binding like this:

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

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

Note that you cannot use the @onchange directive with the @bind directive because the @bind directive is a compiler directive telling the compiler to create the binding as I did manually in the first input, and of course you are not allowed to have two @onchange attributes.

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

note: you can't do this: @onchange="@function1()" The value assigned to the @onchange directive should be a lambda expression, as for instance:

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

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

You should use parentheses only if you are going to pass a value to function1, like this: @onchange="@(() => function1 (true))"

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

Also, @BoolChecker() must be a value assigned to an attribute. You can't use it like this... You could do:

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

这篇关于使用Blazor设置Chekbox值而无需绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！