如何在 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 组件。我将使用 Syncfusion。然后，我将此组件添加到 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");
     }               
}