MudCheckbox event call

Question

Currently I have this:

 @foreach (var rol in Rollenlist)
 {
    <InputCheckbox class="form-check" @bind-Value=@rol.IsSelected @onclick="(() => RolSelected(rol.Id.Value))" />
 }

and

void RolSelected(int id) 
{
  ...
}

I would like to use MudCheckbox:

<MudCheckBox @bind-Checked="@rol.IsSelected" Label="@rol.Name" LabelPosition="LabelPosition.Start" Color="Color.Primary"
                               Size="MudBlazor.Size.Large" CheckedChanged="RolSelected(rol.Id.Value)"></MudCheckBox>

But it is not working.

RZ1OO1O: The component parameter 'CheckedChanged' is used two or more times for this component. Parameters must be unique (case-insensitive). The component parameter 'CheckedChanged' is
generated by the '@bind-Checked' directive attribute.

CS1503: Argument 2: cannot convert from 'void' to 'Microsoft.AspNetCore.Components.EventCallback

How can I fix this?

Answer 1

First error

@bind-Checked is the shorthand of using Checked and CheckedChanged, that's why you're seeing the first error because you can't use both.

Second error

CheckedChanged is an EventCallback<T> so:-

1. T should be declared, i.e. T="bool".
2. When the checkbox changes the CheckedChanged fires the T event payload. If you place the handler method like CheckedChanged="RolSelected", then the method will implicitly receive the changed T value that the event fires.

<MudCheckBox Checked="@rol.IsSelected" CheckedChanged="RolSelected" T="bool"/>
    void RolSelected(bool newValue) // implicitly receives the value
    {
        rol.IsSelected = newValue;
    }

However, since you need to pass additional parameters to the method then you need to explicitly pass the changed value to the method along with other parameters.

<MudCheckBox Checked="@rol.IsSelected" T="bool"
             CheckedChanged="(newValue => RolSelected(newValue,rol.Id.Value))"/>

@code{
    
    void RolSelected(bool newValue,int id) 
    {
        // you need to change the variable in Checked
        rol.IsSelected = newValue;
        // rest of your code
    }
}

Note: If you use CheckedChanged then you must change the variable you have placed in Checked as it will not auto update like when using @bind-Checked. Unless you're handling binding across multiple components.