c# - Setting chekbox value using Blazor without binding
问题描述
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.
this is my input:
<input type="checkbox" class="form-control" value="test" @BoolChecker() @onchange="@function1()" />
and this is the function BoolChecker():
public string BoolChecker()
{
if (mybool != null) {
return (mybool == true) ? "checked" : "");
}
else
{
return "";
}
}
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)
解决方案
This is another answer:
@* 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.
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.
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;
}
Of course you can use the @bind directive to create a two-way data-binding like this:
<input type="checkbox" value="test" @bind="@ticked" />
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.
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)"
You should use parentheses only if you are going to pass a value to function1, like this: @onchange="@(() => function1 (true))"
Also, @BoolChecker()
must be a value assigned to an attribute. You can't use it like this... You could do:
@onchange="@(() => BoolChecker)"
推荐阅读
- reactjs - handleExpand 函数正在更改网格中的多个 Material UI 卡片
- spring - [] 中构造函数的参数 0 需要一个无法找到的 [] 类型的 bean
- python - Linux 上的 Jupyter:URL 错误:
我目前正在学习如何使用 pandas 库的教程,我可以解决这个错误。我对整个场景还是新手,所以我不完全确定发生了什么或如何解释这个错误:
----------------------------
- javascript - 将 mailgun 合并到控制器中
- c# - Try and Catch 块不扔任何东西
- php - PHP 回声样式
- java - 如何在底部工作表对话框片段中设置文本按钮?
- python - pycharm 刽子手游戏中的问题。这里是初学者(显然)。TypeError: 'builtin_function_or_method' 类型的对象没有 len()
- c++ - 创建 GL_TEXTURE_2D_ARRAY 后访问冲突
- python - 为什么加密中的AES加密会产生汉字