Как я могу привязать значение флажка и вызвать метод при изменении?

#blazor #blazor-server-side #blazor-client-side

#blazor #blazor-на стороне сервера #blazor-на стороне клиента

Вопрос:

Я заполняю свой список дел, вызывая api, поэтому некоторые флажки можно установить:

введите описание изображения здесь

Я хотел бы вызвать метод, если кто-то нажмет на мой флажок. Как я могу использовать bind и onchange вместе?

 @foreach (var todo in todos)
{
    <li style="margin: 20px;">
        <input type="hidden" @bind="todo.Id" />
        <input type="checkbox" @bind="todo.IsComplete" @onchange="eventArgs => { CheckboxClicked(todo, eventArgs.Value); }" />
        <input @bind="todo.Name" />
    </li>
}
 

Комментарии:

1. вместо этого вызовите CheckboxClicked установщик свойств IsComplete.

Ответ №1:

 @foreach (var todo in todos)
{
    <li style="margin: 20px;">
        <input type="hidden" @bind="todo.ID" />
       @* <input type="checkbox" checked="@todo.IsComplete" @onchange="eventArgs => 
         { CheckboxClicked(todo, eventArgs.Value); }" /> *@

         <input type="checkbox" checked="@todo.IsComplete" @onchange="@((args) => 
         { todo.IsComplete = (bool) args.Value; } )" />

        <input @bind="todo.Name" />
    </li>
}

@code{

   private List<ToDo> todos = new List<ToDo>{new Todo{ID = 1, IsComplete = false, Caption = "I have a bike", Name = "Name1"},
new Todo{ID = 1, IsComplete = false, Caption = "I have a car", Name = "Name2"},
new Todo{ID = 1, IsComplete = false, Caption = "I have a boat", Name = "Name3"}};

 //   private async Task CheckboxClicked(ToDo todo, ChangeEventArgs e)
  //  {

  //  }
    

    public class ToDo
    {
        public int ID { get; set; }
        public bool IsComplete{ get; set; }
        public string Caption { get; set; }
        public string Name { get; set; }
       
    }

}
 

Комментарии:

1. Ваш прокомментированный код работает — спасибо: @* <тип ввода =»флажок» установлен =»@todo. IsComplete» @onchange=»EventArgs => { CheckboxClicked(todo, EventArgs. Значение); }» /> *@