Search code examples
blazorblazor-server-sideblazor-client-side

How can I bind checkbox value and invoke a method on change?


I fill my to do list by invoking api, so some checkboxes can be checked:

enter image description here

I would like to invoke a method if someone click on my checkbox. How can I use bind and onchange together?

@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>
}

Solution

  • @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; }
           
        }
    
    }