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

Posted 2023-02-23

【中文标题】Recharger un composant Blazor après un OnChange d\'un HTML sélectionné

【英文标题】：Recharger un composant Blazor après un OnChange d’un HTML sélectionnéRecharger un composant Blazor après un OnChange d'un HTML sélectionné

【发布时间】：2021-08-10 13:31:26

【问题描述】：

在html选择列表的onchange中找到“update”方法后无法重新加载“ContenuCongelateur”组合，有解决办法吗？

感谢 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);
    

更新组件时，它必须从服务中获取数据。

【参考方案1】：

尝试使用StateHasChanged() 通知 Blazor 页面上的某些信息已更改，需要重新绘制。如果您需要从 async 方法更新它，您可以改用 await InvokeAsync(()=>StateHasChanged())。

private void Update(ChangeEventArgs args)

    indexModel.CongelateurSelected = int.Parse(args.Value.ToString());
    StateHasChanged();

【讨论】：

“ContenuCongelateur”组件中的 OnInitialized() 方法不以 StateHasChanged() 开头。我在第一条消息中将组件代码添加给您

尝试在最后添加受保护的base.OnInitialized(); 到您的OnInitialized() 方法。

我的参数没有正确发送到子组件

您可以尝试使用ContenuCongelateur 中的属性，这样当CongelateurSelected 的值发生更改时，它会在ContenuCongelateur 组件上调用StateHasChanged()。

我成功使用了 OnParametersSet()