MudBlazor Theme in ABP Blazor WebAssembly PART 3
Introduction
In this part, I will show you how to replace the built-in messaging service to show MudBlazor message boxes.
8. Make Sure You Have Completed PART 1 & Part 2
This project is built on top of MudBlazor Theme in ABP Blazor WebAssembly PART 1 and MudBlazor Theme in ABP Blazor WebAssembly PART 2. Before continuing, you need to complete these parts in order, if you haven't already.
9. Add MudBlazor MessageBox Support to MainLayout
Open MainLayout.razor
and replace it with the code below:
@inherits LayoutComponentBase
<MudThemeProvider />
<MudSnackbarProvider />
<MudDialogProvider />
<MudLayout>
<MudAppBar Elevation="8">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="MudBlazor.Color.Inherit" Edge="Edge.Start"
OnClick="@((e) => DrawerToggle())" />
<Branding />
<MudSpacer />
<NavToolbar />
</MudAppBar>
<MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="8">
<NavMenu />
</MudDrawer>
<MudMainContent>
<MudContainer MaxWidth="MaxWidth.False" Class="mt-4">
<PageAlert />
@Body
<UiPageProgress />
</MudContainer>
</MudMainContent>
</MudLayout>
@code
{
private bool _drawerOpen = true;
private void DrawerToggle()
{
_drawerOpen = !_drawerOpen;
}
}
10. Replace Message Service
In Volo.Abp.AspNetCore.Components.Web.BasicTheme/Services
folder, create a new MudBlazorUiMessageService.cs
file with the following code:
using System;
using System.Threading.Tasks;
using Localization.Resources.AbpUi;
using Microsoft.Extensions.Localization;
using MudBlazor;
using Volo.Abp.AspNetCore.Components.Messages;
using Volo.Abp.DependencyInjection;
namespace Volo.Abp.AspNetCore.Components.Web.BasicTheme.Services;
[Dependency(ReplaceServices = true)]
public class MudBlazorUiMessageService : IUiMessageService, IScopedDependency
{
private readonly IDialogService _dialogService;
private readonly IStringLocalizer<AbpUiResource> _localizer;
public MudBlazorUiMessageService(IDialogService dialogService, IStringLocalizer<AbpUiResource> localizer)
{
_dialogService = dialogService;
_localizer = localizer;
}
public async Task<bool> Confirm(string message, string title = null, Action<UiMessageOptions> options = null)
{
var result = await _dialogService.ShowMessageBox(
title, message, yesText: _localizer["Yes"], noText: _localizer["No"]);
return result ?? false;
}
public Task Error(string message, string title = null, Action<UiMessageOptions> options = null)
{
_dialogService.ShowMessageBox(title, message, yesText: _localizer["Ok"]);
return Task.CompletedTask;
}
public Task Info(string message, string title = null, Action<UiMessageOptions> options = null)
{
_dialogService.ShowMessageBox(title, message, yesText: _localizer["Ok"]);
return Task.CompletedTask;
}
public Task Success(string message, string title = null, Action<UiMessageOptions> options = null)
{
_dialogService.ShowMessageBox(title, message, yesText: _localizer["Ok"]);
return Task.CompletedTask;
}
public Task Warn(string message, string title = null, Action<UiMessageOptions> options = null)
{
_dialogService.ShowMessageBox(title, message, yesText: _localizer["Ok"]);
return Task.CompletedTask;
}
}
This code replaces IUiMessageService
service. See Overriding Services for more information.
Finally, edit Index.razor
to test new message boxes:
@page "/"
@using Volo.Abp.AspNetCore.Components.Messages
@using Volo.Abp.AspNetCore.Components.Notifications
@inherits BookStoreComponentBase
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject IUiNotificationService NotificationService
@inject IUiMessageService MessageService
<div class="container">
<div class="p-5 text-center">
<Button onclick="@(async () => { await NotificationService.Success("Hello, World!"); await NotificationService.Warn("Something went wrong!"); })">
Show Notifications!
</Button>
<hr />
<Button onclick="@(() => { MessageService.Info("Hello, World!"); })">
Show Info!
</Button>
<br />
<Button onclick="@(() => { throw new Exception(); })">
Show Error!
</Button>
</div>
</div>
Comments
rqx110 144 weeks ago
The trouble is how to replace the abp build in module with MudBlazor, like identity module
Ahmet Urel 144 weeks ago
My plan is to cover this in the final part. Stay tuned.
Ahmet Urel 140 weeks ago
https://github.com/yellow-dragon-cloud/AbpMudBlazorFinal