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

Posted 2023-03-27

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

【英文标题】：How do I display a custom bootstrap alert from backend in blazor component

【发布时间】：2020-08-24 04:19:46

【问题描述】：

我创建了一个可以填写并保存到数据库的简单表单，但我不知道如何在 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);
    

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

【参考方案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");
                    

【讨论】：

感谢您的回复。我不想使用 toast 通知。我想显示一个静态引导 HTML 警报。 getbootstrap.com/docs/4.0/components/alerts

这是一个很好的答案，但不幸的是它依赖于订阅服务SyncFusion。这将一些用户（包括我自己）排除在实施此解决方案之外。