Recharger un composant Blazor après un OnChange d’un HTML sélectionné

Question

I cannot reload "ContenuCongelateur" composant after the "update" method found in the onchange of the html select list, Is there a solution?

Thank you from a newbie in Blazor ^^

Index.razor

<select class="form-control" style="width: 100%" @onchange="Update">
    @if (indexModel?.Congelateurs != null)
    {
        @foreach (var cong in indexModel.Congelateurs)
        {
            <option value="@cong.Num_Congelateur">@cong.Nom_Congelateur</option>
        }
    }
</select>

<hr />

<ContenuCongelateur CongelateurSelected="indexModel.CongelateurSelected"></ContenuCongelateur>

@code {
    CongelateurService congelateurService = new CongelateurService(DBContextConstant.ConnectionString);

    IndexViewModel indexModel;

    protected override void OnInitialized()
    {
        indexModel = new IndexViewModel();
        indexModel.Congelateurs = congelateurService.GetListeCongelateurs();
    }

    private void Update(ChangeEventArgs args)
    {
        indexModel.CongelateurSelected = int.Parse(args.Value.ToString());
    }
}

ContenuCongelateur.razor

<div>
    <div class="card card-body">
        @if (Contenu_Congelateur != null)
        {
            <table class="cell">
                @foreach (var ligne in Contenu_Congelateur)
                {
                    <tr class="cell">
                        @foreach (var cell in ligne.Cells)
                        {
                            <td class="@cell.Class_Color" id="@cell.Num_Boite" @onclick="(() => ChargerBoite(cell.Num_Boite))">
                                @cell.Num_Boite + ":" @cell.Quantite_Restante
                            </td>
                        }
                    </tr>
                }
            </table>
        }
    </div>
</div>

@code {

    [Parameter]
    public int CongelateurSelected { get; set; }

    CongelateurService congelateurService = new CongelateurService(DBContextConstant.ConnectionString);

    public List<LigneCongelateurDto> Contenu_Congelateur { get; set; }

    protected override void OnInitialized()
    {
        Contenu_Congelateur = congelateurService.GetListeDetailleeDispoCongel(CongelateurSelected);
    }
}

When updating the component, it must fetch data from the service.

Answer 1

Try using StateHasChanged() to notify Blazor that some information on the page has changed and needs to be redrawn. If you need to update it from an async method you would use await InvokeAsync(()=>StateHasChanged()) instead.

private void Update(ChangeEventArgs args)
{
    indexModel.CongelateurSelected = int.Parse(args.Value.ToString());
    StateHasChanged();
}