How do I display a custom bootstrap alert from backend in blazor component

Question

I have created a simple form which can be filled out and saved to the database but I don't know how I can implement any kind of success message in a blazor component. This is my form:

<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>

The method Speichern() saves the changes to the SQL-Database

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);
    }

After the await statement I want to set a custom message. I know I can do it with a string property and set it to any kind of text but I want to be more flexible here. Is it possible to even display a custom component? Perhaps with a custom Alert component?

Answer 1

Edit

I thought it is wasm, but you can try it anyway for blazor server-side.

---

There are numerous ways how to do it. I'll show how I implemented toasts in blazor.

I created ToastContainer as Component. It may contain html for toast or if you use UI library such Kendo or Syncfusion it will contain their toast component. I'll use Syncfusion. Then, I added this component to App.razor, because I wanted to use it on every page.

Then I created an interface IToastService and ToastService with its implementation. ToastService class contains reference to toast object, which is initialized in 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;
    }
}

}

Lastly, I registered this service as singleton in Program.cs using DI.

Program.cs

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

Usage in WhatEverPage.razor

@inject IToastService toastService

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