Setting chekbox value using Blazor without binding

Question

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)

Answer 1

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)"

Answer 2

The following code snippet creates a table element with ten input check boxes. Copy the code into your Index component and run to test. Then inspect the code and try to understand how it should be done in 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

what is the problem with bind? if you need, you can hook into the setter