Установка значения chekbox с помощью Blazor без привязки

Question

это, наверное, легко, но я застрял. Я читаю данные из БД и мне нужен чекбокс, чтобы отобразить текущее состояние bool, я могу получить статус в коде, но не могу понять, как добавить или удалить свойство «флажок» для ввода флажка. Я использую @ onchange для вызова функции и не могу использовать @ Bind . Я полагаю, что могу создать функцию, которая возвращает значения: "" или "флажок" и просто вызывает ее внутри тега, но это не сработает.

это мой ввод:

<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 имеет значение true)

Answer 1

Это еще один ответ:

@ * Примечание. В этом фрагменте кода используется флажок для создания двусторонней привязки данных: от переменной с именем ticked, определенной в блоке @code ниже, до ввода флажок. Изначально мы устанавливаем для него значение false, поэтому при запуске кода вы заметите, что флажок не установлен. Это было односторонним связыванием.

Чтобы создать привязку элемента управления к переменной, вы должны добавить директиву @onchange с обработчиком событий, который получает новое значение из системы и обновляет отмеченную переменную.

По мере того как вы Возможно, вы заметили, что в отличие от большинства элементов ввода, которые связаны с их атрибутом значения, флажок ввода связан с атрибутом * 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.

note : вы не можете сделать это: @onchange="@function1()" Значение, присвоенное директиве @onchange, должно быть лямбда-выражением, например: * 10 18 *

@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

в чем проблема с bind? если вам нужно, вы можете подключиться к сеттеру