如何在 blazor 组件中显示来自后端的自定义引导警报

Question

我创建了一个简单的表单，可以填写并保存到数据库，但我不知道如何在 blazor 组件中实现任何类型的成功消息。这是我的表格：

<EditForm Model=@Input OnValidSubmit="Speichern">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div class="form-row">
        <div class="form-group col-md-6">
            <label>Vorname</label>
            <InputText class="form-control" @bind-Value="Input.FirstName" />
            <ValidationMessage For="() => Input.FirstName" />
        </div>
        <div class="form-group col-md-6">
            <label>Nachname</label>
            <InputText class="form-control" @bind-Value="Input.LastName" />
            <ValidationMessage For="() => Input.LastName" />
        </div>
    </div>
    <div class="form-group">
        <label>Username</label>
        <InputText class="form-control" @bind-Value="Input.Username" />
        <ValidationMessage For="() => Input.Username" />
    </div>
    <div class="form-group">
        <label>E-Mail</label>
        <InputText class="form-control" @bind-Value="Input.Email" />
        <ValidationMessage For="() => Input.Email" />
    </div>
    <div class="form-group">
        <label>Telefonnummer</label>
        <InputText class="form-control" @bind-Value="Input.PhoneNumber" />
        <ValidationMessage For="() => Input.PhoneNumber" />
    </div>
    <button type="submit" class="btn btn-primary">Speichern</button>
</EditForm>

Speichern() 方法将更改保存到 SQL 数据库

public async void  Speichern()
    {

        Mitarbeiter.UserName = Input.Username;
        Mitarbeiter.FirstName = Input.FirstName;
        Mitarbeiter.LastName = Input.LastName;
        Mitarbeiter.Email    = Input.Email;
        Mitarbeiter.PhoneNumber = Input.PhoneNumber;
        Mitarbeiter.EmailConfirmed = true;

        await UserManager.UpdateAsync(Mitarbeiter);
    }

在等待语句之后，我想设置一条自定义消息。我知道我可以使用字符串属性来实现并将其设置为任何类型的文本，但我想在这里更加灵活。是否可以显示自定义组件？也许使用自定义警报组件？

Answer 1

编辑

我以为是 wasm，但无论如何你都可以在 blazor 服务器端尝试一下。

有很多种方法可以做到这一点。我将展示如何在 blazor 中实现 toast。

我创建了 ToastContainer 作为组件。它可能包含 toast 的 html，或者如果您使用 Kendo 或 Syncfusion 等 UI 库，它将包含其 toast 组件。我将使用同步融合。然后，我将此组件添加到 App.razor 中，因为我想在每个页面上使用它。

然后我创建了一个接口 IToastService 和 ToastService 及其实现。ToastService 类包含对 toast 对象的引用，该对象在 ToastContainer 中初始化。

IToastService.cs

public interface IToastService
{
    SfToast SfToast{ get; set; }

    void ShowMessage(string title, string content = null);
}

ToastService.cs

public class ToastService : IToastService
{
    public SfToast SfToast { get; set; }

    public void ShowError(string title, string content = null)
    {
        SfToast.Show(new ToastModel
        {
            Title = title,
            Content = content
        });
    }       
}

ToastContainer.razor

@using Syncfusion.Blazor.Notifications

<SfToast @ref="@_sfToast" TimeOut="5000" >
<ToastPosition X="Right"></ToastPosition>
<ToastAnimationSettings>
    <ToastAnimationSettingsShow Effect="@ShowEffect" Easing="@ShowEasing" Duration="@ShowDuration"></ToastAnimationSettingsShow>
    <ToastAnimationSettingsHide Effect="@HideEffect" Easing="@HideEasing" Duration="@HideDuration"></ToastAnimationSettingsHide>
</ToastAnimationSettings>
</SfToast>

@code {
[Inject] private Client.Services.Contracts.IToastService ToastService { get; set; }

private SfToast _sfToast;

public string ShowEasing { get; set; } = "ease";
public string HideEasing { get; set; } = "ease";
public string ShowEffect { get; set; } = "SlideRightIn";
public string HideEffect { get; set; } = "SlideRightOut";
public double ShowDuration = 400;
public double HideDuration = 400;

protected override void OnAfterRender(bool firstRender)
{
    if (firstRender)
    {
        ToastService.SfToast = _sfToast;
    }
}

}

最后，我使用 DI 在 Program.cs 中将此服务注册为单例。

程序.cs

builder.Services.AddSingleton<IToastService, ToastService>();

WhatEverPage.razor 中的用法

@inject IToastService toastService

@code {
     protected override async Task OnInitialized() {
          toastService.ShowMessage("title", "content");
     }               
}