How do I trigger a method with MudSelect dropdown?

<MudSelect T="ManufacturerDto" Label="Select Manufacturer" @bind-Value="_selectedManufacturer" Variant="Variant.Outlined">
         @foreach (var manufacturer in _filteredManufacturers)
         {
             <MudSelectItem T="ManufacturerDto"  Value="@manufacturer">@manufacturer.ManufacturerName</MudSelectItem>
         }
</MudSelect>

I have to trigger this method OnManufacturerChanged() each time a variable _selectedManufacturer has been changed.

Is there any way I can do this? Onclick doesn't work, OnClose works after 2 closing and etc, I tried many ways.

Pre-requistite

In order for data binding to work there have to be two things in place:

• A parameter {Name} (in your case Value) of a certain type T
• a method {Name}Changed() which is of type EventCallback<T>(in your case ValueChanged)

Blazor then handles passing the parameter and invoking this callback for you once you define the binding using @bind-Value and the value changes. So there is no magic. So with that in mind you have different options available. Which one you pick depends on your .NET version and use case.

I will outline all of those methods on a simple example where I just log the new select value to the console after it has changed.

> If you have a look at the API of the <MudSelect /> component you will see those two things are provided for you.

Manually implement binding

Instead of using the automatic binding you can of course also just supply the two things (mentioned above) manually and handle them accordingly. This would look something like this:

<MudSelect T="string" 
           Label="Manufacturer" 
           AnchorOrigin="Origin.BottomCenter"
           Value=@_selectedManufacturer
           ValueChanged=@OnManufacturerChanged>
    @foreach (var manufacturer in _allManufacturers)
    {   
        <MudSelectItem Value=@manufacturer>
            @manufacturer
        </MudSelectItem>
    }
</MudSelect>

@code {
    private List<string> _allManufacturers = new List<string>() 
    {
        "A",
        "B",
        "C"
    };
    private string _selectedManufacturer = String.Empty;

    private void OnManufacturerChanged(string manufacturer){
        _selectedManufacturer = manufacturer; // update selected manufacturer
        Console.WriteLine($"Manufacturer has changed to '{_selectedManufacturer}'");
    }
}

Pros

• Allows to use asynchronous calls in the ValueChanged handler (Here OnManufacturerChanged)
• Access to previous value

Cons

• More manual setup required, since built-in binding cannot be used

Using setter

Of course you can also use the built-in binding and then trigger some functionality in the setter which implies that you have to use a property.

<MudSelect T="string" 
           Label="Manufacturer" 
           AnchorOrigin="Origin.BottomCenter"
           @bind-Value=@SelectedManufacturer>
    @foreach (var manufacturer in _allManufacturers)
    {   
        <MudSelectItem Value=@manufacturer>
            @manufacturer
        </MudSelectItem>
    }
</MudSelect>

@code {
    private List<string> _allManufacturers = new List<string>() 
    {
        "A",
        "B",
        "C"
    };
    private string _selectedManufacturer = String.Empty;
    private string SelectedManufacturer {
        get { return _selectedManufacturer; }
        set {
            _selectedManufacturer = value;
            Console.WriteLine($"Manufacturer has changed to '{_selectedManufacturer}'");
        }
    }
}

Pros

• Uses built-in data binding
• Access to previous value

Cons

• Cannot use asynchronous operations
• Cannot use auto-properties

@bind:after for >= .NET 7

On .NET 7 you can use @bind:after to trigger some function after a value in a binding has changed. So the following will work:

<MudSelect T="string" 
           Label="Manufacturer" 
           AnchorOrigin="Origin.BottomCenter"
           @bind-Value=@_selectedManufacturer
           @bind-Value:after=@AfterManufacturerChanged>
    @foreach (var manufacturer in _allManufacturers)
    {   
        <MudSelectItem Value=@manufacturer>
            @manufacturer
        </MudSelectItem>
    }
</MudSelect>

@code {
    private List<string> _allManufacturers = new List<string>() 
    {
        "A",
        "B",
        "C"
    };
    private string _selectedManufacturer = String.Empty;

    private void AfterManufacturerChanged(){
        Console.WriteLine($"Manufacturer has changed to '{_selectedManufacturer}'");
    }
}

Pros

• Uses built-in data binding
• No extra setup required, just define @bind:after=MethodToExecute
• Works with asynchronous operations

Cons

• No direct access to previous value in method being invoke after the binding has occurred