Blazor, MatBlazor - How to catch the value change of MatSelect component

Question

I have used the MatBlazor framework for my project. In MatSelect, I want to catch its value onchange event to do some other works. I have tried some solutions but the onchange event has not fired yet.

<MatSelect Label="Customer" Value="@customer" ValueChanged="OnChangeCustomer">
    <MatOptionString Value="-1">All</MatOptionString>
    @foreach (var item in customers)
    {
        <MatOption Value="@item.Id">@item.Name</MatOption>
    }                
</MatSelect>

The below is my onchange event handler. But it did not fired when select another value in drop down list:

public void OnChangeCustomer(ChangeEventArgs args)
{
    if (args.Value.ToString() != "-1")
        isAccountDropDownListDisabled = false;            
}

Can anyone help me? Thanks

score 4 · Accepted Answer · answered Nov 13 '20 at 08:38

You could refer the following sample to using the MatSelect control:

    <MatSelect Outlined="true" Label="Category" ValueChanged="(string i) => OnChangeCategory(i)"> 
        <MatOptionString Value="-1">All</MatOptionString>
        @foreach (var cat in GetCategories())
        {
            <MatOptionString Value="@cat.Id.ToString()">@cat.Name</MatOptionString>
        }
    </MatSelect>
    <span>@selectedValue</span>

    @code
    {
        public string selectedValue;
        protected List<Customer> GetCategories()
        {
            //return new List<string>() { "AA", "BB" };
            return new List<Customer>() {
                    new Customer(){Id=1001, Name="Tom"},
                    new Customer(){Id=1002, Name="David"},
                    new Customer(){Id=1003, Name="Lucy"}
                };
        }

        protected void OnChangeCategory(string value)
        {
            //do something
            selectedValue = "Selected Value: " + value;
        } 
    }

The screenshot as below:

More detail information, check the MatSelect document.

score 2 · Answer 2 · answered Mar 08 '21 at 21:40

The code from @ZhiLv works well but if you want a pre filled dynamic select value it will become harder.

I spent so many hours trying to get this to work with MatSelectValue with no luck.

https://www.matblazor.com/SelectValue

I ended up using a simple MatSelect with a property calling my onchange event method. This is the only way I got the select list to prefill correctly.

Example with nullable int but you can change to string, guid etc as well.

https://www.matblazor.com/Select#MatSelectGuid

@inject StateContainer StateContainer

<MatSelect Label="Choose threat" @bind-Value="@SelectThreatId" Outlined="true" FullWidth="true">
    @foreach (var item in selectThreats)
    {
        <MatOption TValue="int?" Value="@item.Id">@item.Threat</MatOption>
    }
</MatSelect>

@code
    {

    [Parameter]
    public ThreatAndCountermeasureDto ThreatAndCountermeasureDto { get; set; }

    List<ThreatDto> selectThreats = new List<ThreatDto>();

    ThreatDto selectedThreat = null;

    private int? threatId = null;

    public int? SelectThreatId
    {
        get { return threatId; }
        set
        {
            threatId = value;
            SelectThreatValueChanged(value);
        }
    }
    
    private void SelectThreatValueChanged(int? id)
    {
        selectedThreat = StateContainer.Threats.Single(x => x.Id == id);
    }
    
    protected override void OnInitialized()
    {
        base.OnInitialized();
        StateContainer.OnChange += StateHasChanged;
        SelectThreatId = ThreatAndCountermeasureDto.Threat.Id;
        selectThreats = StateContainer.Threats.ToList();
    }
    ...

Source:

https://github.com/SamProf/MatBlazor/issues/498

Blazor, MatBlazor - How to catch the value change of MatSelect component

2 Answers2