Home > Back-end >  @bind-Value doesn't fill the spaces when i want to modify an object
@bind-Value doesn't fill the spaces when i want to modify an object

Time:11-01

I'm using Radzen in a Blazor WebAssembly app.

@page "/modificarRiesgo"
@page "/modificarRiesgo/{Nombre}"
@inject NavigationManager navManager
@inject IModuloRiesgosServices _riesgosService

<h3>ModificarRiesgo</h3>
@if(riesgo == null){
    <p>Loading...</p>
}
else{
    <p style="color:red;text-align:center">Seguro que desea modificar este archivo?</p>
<RadzenTemplateForm Data="@riesgo" TItem="RiesgoDTO">
    <div >
        <div >
            <RadzenFieldset Text="Detalle de Riesgos">
                <div >
                    <div >
                        <RadzenLabel Text="Nombre" />
                    </div>
                    <div >
                        <RadzenTextBox Name="Nombre" Style="width:100%" @bind-Value="@riesgo.Nombre" />
                    </div>
                </div>
                <div >
                    <div >
                        <RadzenLabel Text="Descripcion" />
                    </div>
                    <div >
                        <RadzenTextArea Name="Descripcion" Style="width:100%" @bind-Value="@riesgo.Descripcion" />
                    </div>
                </div>
                <div >
                    <div >
                        <RadzenLabel Text="Viabilidad" />
                    </div>
                    <div >
                        <RadzenNumeric Name="Viabilidad" Style="width:100%" @bind-Value="@riesgo.Viabilidad" />
                    </div>
                </div>
                <div >
                    <div >
                        <RadzenLabel Text="Impacto" />
                    </div>
                    <div >
                        <RadzenNumeric Name="Impacto" Style="width:100%" @bind-Value="@riesgo.Impacto" />
                    </div>
                </div>
                <div >
                    <div >
                        <div >
                            <RadzenButton Text="Cancelar" ButtonStyle="ButtonStyle.Danger" Click=@(args => cancel()) />
                        </div>
                    </div>
                </div>
            </RadzenFieldset>
        </div>
    </div>

    
</RadzenTemplateForm>
}


@code {
    [Parameter]
    public string? Nombre { get; set; }

    public RiesgoDTO riesgo { get; set; } = new RiesgoDTO();

    protected override async Task OnInitializedAsync(){
        obtener(Nombre);
    }
    public async void obtener(string nombre){
        var response = await _riesgosService.ObtenerTodosLosRiesgos();
        foreach(var r in response.Data){
            if (r.Nombre == nombre)
                riesgo = r;
        }
    }
    protected void cancel()
    {
        navManager.NavigateTo("/gestionarRiesgos");
    }
}

I'm not using "id" as paramater cause I use "Guid", and it cannot be sent as a paramater, so I'm using the string value "Nombre" OnInitializedAsync has a method that looks for the object based on its "Nombre" and assigns it to the variable "riesgo"

If anybody had any idea, please. I've been working onthis for 3 days

CodePudding user response:

Because you have marked your obtener method as async void you have made it unawaitable. When it resolves and finds the object you're looking for in your collection the page has already rendered and there is no event to cause Blazor to re-render your page. You have a couple options: 1) you can add a StateHasChanged() call to your obtener method, but I don't recommend this approach because it's brute force and you shouldn't need to do this; 2) you can change obtener to return async Task and then await it in your OnInitializedAsync method.

Option 2:

protected override async Task OnInitializedAsync(){
    await obtener(Nombre);
}

public async Task obtener(string nombre){
    var response = await _riesgosService.ObtenerTodosLosRiesgos();
    foreach(var r in response.Data){
        if (r.Nombre == nombre)
            riesgo = r;
    }
}

CodePudding user response:

OnInitializedAsync does not await obtener.

I would also reccomend using async Task on the obtener method instead of async void.

  • Related