Blazor: закрыть диалоговое окно MatBlazor PopUp после успешного входа в дочерний компонент

У меня есть Login.razor страница, на которой происходят все действия.

@page "/login"
@inject IAuthService AuthService
@inject NavigationManager NavigationManager

@if (ShowErrors)
{
    <div class="alert alert-danger" role="alert">
        <p>@Error</p>
    </div>
}

<div class="card">
    <div class="card-body">
        <EditForm Model="loginModel" OnValidSubmit="HandleLogin">
            <DataAnnotationsValidator />
            <ValidationSummary />

            <div class="form-group">
                <label for="email">Email address</label>
                <InputText Id="email" Class="form-control" @bind-Value="loginModel.Email" />
                <ValidationMessage For="@(() => loginModel.Email)" />
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <InputText Id="password" type="password" Class="form-control" @bind-Value="loginModel.Password" />
                <ValidationMessage For="@(() => loginModel.Password)" />
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </EditForm>
    </div>
</div>

@code {

    private LoginModel loginModel = new LoginModel();
    private bool ShowErrors;
    private string Error = "";

    private async Task HandleLogin()
    {
        ShowErrors = false;

        var result = await AuthService.Login(loginModel);

        if (result.Successful)
        {
            NavigationManager.NavigateTo("/");
        }
        else
        {
            Error = result.Error;
            ShowErrors = true;
        }
    }
}

И мой MainLayout.razor содержит всплывающее диалоговое окно Matblazor.

<MatDialog @bind-IsOpen="@signInOpen">
    <MatTabGroup>
        <MatTab Label="SIGN IN">
            <BlazorCom.Client.Pages.Login />
        </MatTab>
    </MatTabGroup>
</MatDialog>

@code
{
    public bool signInOpen = false;

    void OpenDialog()
    {
        signInOpen = true;
    }
}

Когда я вхожу в систему, используя это диалоговое окно, окно не закрывается само по себе, так как я не знаю, как это сделать. Теперь я хочу закрыть всплывающее диалоговое окно после успешного входа в систему. Кто-нибудь может мне с этим помочь?


blazor blazor-webassembly matblazor
person Abdullah-Al-Nahian    schedule 07.07.2020    source источник
comment
Вам может понравиться mudblazor.com, пользоваться им намного проще.   -  person henon    schedule 21.10.2020

Ответы (1)


arrow_upward
1
arrow_downward

Установите для signInOpen значение false, и диалоговое окно закроется.

Изменить: если вам нужно установить его извне, добавьте метод Close следующим образом:

@code {

public void CloseDialog() {
  signInOpen=false;
  StateHasChanged();
}

Затем в Login.razor вы можете вызвать функцию CloseDialog () в событии @onclick кнопки отправки.

person henon    schedule 21.10.2020
comment
Как мне установить для signInOpen значение false на странице Login.razor? - person Abdullah-Al-Nahian; 28.10.2020
comment
Я отредактировал свой ответ, чтобы показать, как настроить его извне. - person henon; 28.10.2020
comment
Я хочу закрыть всплывающее окно при успешной отправке. Не просто нажав кнопку отправки. Есть ли способ это сделать? - person Abdullah-Al-Nahian; 29.10.2020
comment
Да, в вашем методе HandleLogin, когда result.Successful истинно, вызовите CloseDialog () в диалоговом окне. Используйте @ref, чтобы получить ссылку на диалоговое окно, чтобы вы могли вызвать для него CloseDialog (). И, конечно же, вам нужно найти способ передать диалог в компонент входа в систему. Или вы используете EventCallBack, чтобы сообщить Main, что вход в систему был успешным, и закрыть диалоговое окно там. Наверное, так лучше. - person henon; 29.10.2020