Início / coding / Perguntas / 79011986
Accepted
Lucas
Asked: 2024-09-22 23:28:25 +0800 CST

O componente Blazor (.net core 8) nunca é atualizado

  • 772

Estou tentando definir um componente que atua como um wrapper de alerta de bootstrap.

Alerta de Bootstrap.razor

<div class="alert alert-@AlertType d-@(string.IsNullOrEmpty(Message) ? "none" : "block")" role="alert">
    @Message
</div>

@code {
    [ParameterAttribute]
    private string AlertType { get; set; } = "info"; // Default alert type
    [ParameterAttribute]
    private string? Message { get; set; }

    // Method to update the alert type and message
    public async Task ShowAsync(string alertType, string message)
    {
        AlertType = alertType;
        Message = message;
        await InvokeAsync(StateHasChanged);
    }

    // Method to hide the alert
    public async Task HideAsync()
    {
        Message = null;
        await InvokeAsync(StateHasChanged);
    }

     protected override async Task OnParametersSetAsync()
    {
        //Message is ALWAYS null here
        await base.OnParametersSetAsync();
    }

}

Página:

<form class="row" @onsubmit="SubmitForm" @onsubmit:preventDefault>
  <Alert @ref=SaveAlert></Alert>
  <button type="submit">Save</button>        
</form>

@code {
    private Alert? SaveAlert;

private async Task SubmitForm()
{
    try
    {
        await SetIsLoading(true); //DISPLAYS A LOADING SPINNER

        if (SaveAlert != null) await SaveAlert.HideAsync();

        //.......

        if (SaveAlert != null) await SaveAlert.ShowAsync("success", "OK");
    }
    catch (Exception ex)
    {
        if (SaveAlert != null) await SaveAlert.ShowAsync("danger", ex.Message);
    }
    finally
    {
        await SetIsLoading(false);
    }

    StateHasChanged();
}

}

O componente de alerta nunca é atualizado, em "OnParametersSetAsync" o parâmetro "Message" é sempre nulo.

Eu tentei versões não assíncronas dos métodos, colocando "StateHasChanged" em todos os lugares, não chamando o método "Hide", também removendo os atributos [ParameterAttribute] para que fossem usados ​​como variáveis ​​regulares, mas nada parece funcionar para mim

Sou bem novo no blazor, então não sei o que mais poderia ser relevante. Estou usando o aplicativo como RenderMode="Server"

O que estou fazendo errado?

blazor-server-side

1 respostas

  1. Best Answer

    Primeiro: certifique-se de ter o modo de renderização definido globalmente:

    Aplicativo.navalha

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="SO79011986.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

    No momento, seu código não compila corretamente, então não tenho certeza de como você está depurando o código apresentado. Você está declarando os Parâmetros como privados quando eles deveriam ser públicos.

    Em um nível mais geral, você complicou demais o código porque é novo no Blazor e ainda está adquirindo o conhecimento necessário.

    Aqui está uma maneira mais sucinta de construir um alerta usando binding. Capturar instâncias com @refestá OK, mas esse acoplamento tão apertado entre componentes é melhor evitado, se possível.

    Um objeto de dados para manter o estado de alerta.

    public readonly record struct AlertData(bool Show, string AlertType, string Message);

    Alerta.navalha

    <div hidden="@_hidden" class="@_css" role="alert">
    @this.Value.Message
</div>

@code {
    // These are the bind parameters
    [Parameter] public AlertData Value { get; set; }
    [Parameter] public EventCallback<AlertData> ValueChanged { get; set; }

    private string _css => $"alert alert-{this.Value.AlertType}";
    private bool _hidden => !this.Value.Show;

    // If you had a dismiss button
    private void Dismiss()
    {
        this.ValueChanged.InvokeAsync(new AlertData(false, string.Empty, string.Empty));
    }
}

    Demonstração:

    @page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Alert @bind-Value="_alertData" />

<div class="m-2">
    <button class="btn btn-primary" @onclick="this.SubmitForm">Save</button>
</div>
@code {
    private AlertData _alertData = new(false, string.Empty, string.Empty);
    private bool _toggleState;

    private async Task SubmitForm()
    {
        _alertData = new(false, string.Empty, string.Empty);

        // UI Event Handler will render the component here and create a render cascade on sub-components with changed parameters
        await SetIsLoading(true);

        if (_toggleState)
            _alertData = new(true, "success", "Ok");
        else
            _alertData = new(true, "danger", "Failed");

        _toggleState = !_toggleState;

        await SetIsLoading(false);
        // UI Event Handler will render the component here and create a render cascade on sub-components with changed parameters
    }

    private async ValueTask SetIsLoading(bool show)
    {
        // Do whatever
        await Task.Yield();
    }
}
    • 0

relate perguntas