Problem z odświeżeniem stanu komponentu w Blazor.

Problem z odświeżeniem stanu komponentu w Blazor.
V3
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 283
0

Dzień dobry,
mam taki problem że podczas błędnego wprowadzenia hasła powinien pojawić się alert ze jest ono nieprawidłowe. Niestety tak się nie dzieje, ale co ciekawe taki alert pojawi się dopiero jak kliknę drugi raz w przycisk zaloguj. Wygląda to tak jakby za pierwszym razem nie odświeżał się stan tego komponentu. Natomiast w Console.WriteLine ten komunikat pojawia się za pierwszym razem.

Tak to powinno wyglądać:

screenshot-20230426151020.png
Oto kod po stronie Front endu:

Kopiuj
<div>
    @if (ShowAlert)
    {
        <p>ddfdfdf</p>
        <MudAlert Severity="Severity.Warning" Variant="Variant.Filled" NoIcon="true" Class="my-2" ContentAlignment="HorizontalAlignment.Center">Niepoprawne logowanie !!!</MudAlert>
    }
</div>
<div class="page">
    <MudCard Outlined="true" style="min-width:275px   ">
        <MudCardHeader>
            <CardHeaderContent>
                <MudText Typo="Typo.body1"> <div class="tytul_okna">XXXXXX<img src="Grafika/kurczak.png" /></div> </MudText>
            </CardHeaderContent>
        </MudCardHeader>
        <MudCardContent>
            <MudSelect T="int" Label="LOGIN:" HelperText="Proszę wybrać swój login." Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter" Style="padding-bottom:10px" @bind-Value="@ChoosedUser">
            @foreach (var Result in ListOfusers)
                {
                    <MudSelectItem Value="@Result.Id"> @Result.Imie</MudSelectItem>
                }        
           
            </MudSelect>
            <MudTextField @bind-Value="@Password" Label="Hasło:" Variant="Variant.Outlined" Adornment="Adornment.End" OnAdornmentClick="ShowPassword" InputType="@PasswordInput" AdornmentIcon="@PasswordInputIcon"> </MudTextField>
            <div style="padding-top:30px"><MudButton Variant="Variant.Filled" Color="Color.Info" OnClick="@ButtonLogIn" FullWidth>ZALOGUJ</MudButton></div>
            <div class="autor_programu">XXXXX</div>
        </MudCardContent>
    </MudCard>
</div>

Kod po stronie Back endu:

Kopiuj
public async void ButtonLogIn()
        {
            var GetPasswordFoUser = await baza.CheckPassworOfUser(ChoosedUser);

            GetPasswordFoUser.ForEach(item =>
            {
                if (item.Haslo != Password || item.Haslo == null)
                {
                    Console.WriteLine("Bład logowania");

                    @ShowAlert = true;
                }

            }
            );
        }

Poniżej zamiesczam jeszcze przykład kodu z frameworku, który wykorzystuje w aplikacji:
https://mudblazor.com/components/alert#close-icon-and-event

mar-ek1
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 526
1

Spróbuj dodać

Kopiuj
StateHasChanged();

po tym ustawieniu na true.

Wilktar
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 82
1

Zmień z:

Kopiuj
  public async void ButtonLogIn()

na:

Kopiuj
  public async Task ButtonLogIn()

Po każdej akcji w UI jest renderowanie strony, ale jeżeli masz async void to wtedy jest to równoważne z fire and forget czyli renderowanie wykonuje się od razu a nie po zakończeniu metody.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.