Как отобразить настраиваемое оповещение bootstrap из серверной части в компоненте Blazor - PullRequest
Новая
       87

Как отобразить настраиваемое оповещение bootstrap из серверной части в компоненте Blazor

0 голосов
/ 08 мая 2020

Я создал простую форму, которую можно заполнить и сохранить в базе данных, но я не знаю, как реализовать какое-либо сообщение об успехе в компоненте 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 -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);
    }

После оператора ожидания я хочу установить собственное сообщение. Я знаю, что могу сделать это с помощью строкового свойства и установить его для любого текста, но я хочу быть более гибким здесь. Можно ли вообще отобразить пользовательский компонент? Возможно, с настраиваемым компонентом Alert?

1 Ответ

1 голос
/ 08 мая 2020

Edit

Я думал, что это wasm, но вы все равно можете попробовать его для серверной части Blazor.

Есть множество способов сделать это. Я покажу, как я реализовал тосты в blazor.

Я создал ToastContainer как компонент. Он может содержать html для тоста или, если вы используете библиотеку пользовательского интерфейса, такую ​​как Kendo или Syncfusion, он будет содержать их компонент тоста. Я буду использовать Syncfusion. Затем я добавил этот компонент в App.razor, потому что хотел использовать его на каждой странице.

Затем я создал интерфейс IToastService и ToastService с его реализацией. Класс ToastService содержит ссылку на объект тоста, который инициализируется в 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;
    }
}

}

Наконец, я зарегистрировал эту службу как singleton в Program.cs, используя DI.

Program.cs 

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

Использование в WhatEverPage. бритва 

@inject IToastService toastService

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