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

Question

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 class="row">
        <div class="col-10">
            <RadzenFieldset Text="Detalle de Riesgos">
                <div class=" row">
                    <div class="col-md-2 align-items-center d-flex">
                        <RadzenLabel Text="Nombre" />
                    </div>
                    <div class="col-md-6">
                        <RadzenTextBox Name="Nombre" Style="width:100%" @bind-Value="@riesgo.Nombre" />
                    </div>
                </div>
                <div class=" row">
                    <div class="col-md-2 align-items-center d-flex">
                        <RadzenLabel Text="Descripcion" />
                    </div>
                    <div class="col-md-6">
                        <RadzenTextArea Name="Descripcion" Style="width:100%" @bind-Value="@riesgo.Descripcion" />
                    </div>
                </div>
                <div class=" row">
                    <div class="col-md-2 align-items-center d-flex">
                        <RadzenLabel Text="Viabilidad" />
                    </div>
                    <div class="col-md-6">
                        <RadzenNumeric Name="Viabilidad" Style="width:100%" @bind-Value="@riesgo.Viabilidad" />
                    </div>
                </div>
                <div class=" row">
                    <div class="col-md-2 align-items-center d-flex">
                        <RadzenLabel Text="Impacto" />
                    </div>
                    <div class="col-md-6">
                        <RadzenNumeric Name="Impacto" Style="width:100%" @bind-Value="@riesgo.Impacto" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2 align-items-center d-flex">
                        <div class="col-md-6">
                            <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

score 1 · Accepted Answer · answered Oct 31 '22 at 21:30

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;
    }
}

Here's an article that supports this answer: https://medium.com/@deep_blue_day/long-story-short-async-await-best-practices-in-net-1f39d7d84050 — Kevon, Nov 01 '22 at 00:01

score 0 · Answer 2 · answered Oct 31 '22 at 21:18

0

OnInitializedAsync does not await obtener.

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

answered Oct 31 '22 at 21:18

Sebastian

64
1
7

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

2 Answers2