ABP.IO Stories

Customize ABP Blazor Application UI with MudBlazor

Tue, 05 Apr 2022 00:54:06 Z

In this video, you'll learn how to customize your ABP Blazor application's UI with MudBlazor components.
Go to the Video

MudBlazor Theme in ABP Blazor WebAssembly (FINAL)

Wed, 30 Mar 2022 02:21:24 Z

MudBlazor Theme in ABP Blazor WebAssembly FINAL

Introduction

In this part, I will show you how to customize/override pre-built Blazor pages of the Identity Module using MudBlazor components. I assume that Tenant and Setting management pages are rarely used by end-users, so these modules are not covered in this sample to keep it short. You can customize every page using the principles shown here. All you need to do is:

Deriving a class that inherits the class you want to override
And adding the following attributes to the derived class:

@* to the razor file *@
@attribute [ExposeServices(typeof(BASE-CLASS))]
@attribute [Dependency(ReplaceServices = true)]

// or to the C# file
[ExposeServices(typeof(BASE-CLASS))]
[Dependency(ReplaceServices = true)]

See Blazor UI: Customization / Overriding Components for more information.

16. Make Sure You Have Completed Previous Parts

You must complete the steps in Part 1, Part 2, Part 3, and Part 4 to continue.

17. Create Required Files

Create Identity folder under Acme.BookStore.Blazor/Pages/.

Create the following files in this folder:

MudPermissionManagementModal.razor
MudPermissionManagementModal.razor.cs
MudRoleManagement.razor
MudRoleManagement.razor.cs
MudUserManagement.razor
MudUserManagement.razor.cs

18. Modify These Files' Content As Shown Below

MudPermissionManagementModal.razor

@using Microsoft.Extensions.Localization
@using Volo.Abp.PermissionManagement.Blazor.Components
@using Volo.Abp.PermissionManagement.Localization
@inherits PermissionManagementModal


    
                            
            @L["Permissions"] - @_entityDisplayName
        
    
    
        
            
                @L["SelectAllInAllTabs"]
            
            
            @if (_groups != null)
            {
                
                    
                        
                            @* ?! *@
                                
                        
                    
                    
                        @foreach (var group in _groups)
                        {
                            
                                
                                    
                                        
                                            @group.DisplayName
                                            
                                        
                                        
                                            
                                            @L["SelectAllInThisTab"]
                                        
                                        
                                        
                                        @foreach (var permission in group.Permissions)
                                        {
                                            
                                            
                                            
                                                
                                                    @GetShownName(permission)
                                                
                                            
                                        }
                                    
                                
                            
                        }
                    
                
            }
        
    
    
        
            @L["Cancel"]
        
        
            @L["Save"]

MudPermissionManagementModal.razor.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using MudBlazor;
using Volo.Abp.AspNetCore.Components.Web.Configuration;
using Volo.Abp.PermissionManagement;
using Volo.Abp.PermissionManagement.Localization;

namespace Acme.BookStore.Blazor.Pages.Identity;

public partial class MudPermissionManagementModal
{
    [Inject] private IPermissionAppService PermissionAppService { get; set; }
    [Inject] private ICurrentApplicationConfigurationCacheResetService CurrentApplicationConfigurationCacheResetService { get; set; }

    private bool _isVisible;

    protected virtual DialogOptions DialogOptions
    {
        get => new()
        {
            CloseButton = true,
            CloseOnEscapeKey = true,
            DisableBackdropClick = true,
            MaxWidth = MaxWidth.Medium
        };
    }

    private string _providerName;
    private string _providerKey;

    private string _entityDisplayName;
    private List _groups;

    private readonly List _disabledPermissions = new();

    private int _grantedPermissionCount = 0;
    private int _notGrantedPermissionCount = 0;

    private bool GrantAll
    {
        get => _notGrantedPermissionCount == 0;
        set
        {
            if (_groups == null) return;

            _grantedPermissionCount = 0;
            _notGrantedPermissionCount = 0;

            foreach (var permission in _groups.SelectMany(x => x.Permissions))
            {
                if (IsDisabledPermission(permission)) continue;

                permission.IsGranted = value;

                if (value)
                    _grantedPermissionCount++;
                else
                    _notGrantedPermissionCount++;
            }
        }
    }

    public MudPermissionManagementModal()
    {
        LocalizationResource = typeof(AbpPermissionManagementResource);
    }

    public async Task OpenDialogAsync(string providerName, string providerKey, string entityDisplayName = null)
    {
        try
        {
            _providerName = providerName;
            _providerKey = providerKey;

            var result = await PermissionAppService.GetAsync(_providerName, _providerKey);

            _entityDisplayName = entityDisplayName ?? result.EntityDisplayName;
            _groups = result.Groups;

            _grantedPermissionCount = 0;
            _notGrantedPermissionCount = 0;
            foreach (var permission in _groups.SelectMany(x => x.Permissions))
            {
                if (permission.IsGranted && permission.GrantedProviders.All(x => x.ProviderName != _providerName))
                {
                    _disabledPermissions.Add(permission);
                    continue;
                }

                if (permission.IsGranted)
                    _grantedPermissionCount++;
                else
                    _notGrantedPermissionCount++;
            }

            _isVisible = true;
            StateHasChanged();
        }
        catch (Exception e)
        {
            await HandleErrorAsync(e);
        }
    }

    private async Task CloseModalAsync()
    {
        await InvokeAsync(() => { _isVisible = false; });
    }

    private async Task SaveAsync()
    {
        try
        {
            var updateDto = new UpdatePermissionsDto
            {
                Permissions = _groups
                    .SelectMany(g => g.Permissions)
                    .Select(p => new UpdatePermissionDto { IsGranted = p.IsGranted, Name = p.Name })
                    .ToArray()
            };

            await PermissionAppService.UpdateAsync(_providerName, _providerKey, updateDto);

            await CurrentApplicationConfigurationCacheResetService.ResetAsync();

            await CloseModalAsync();
        }
        catch (Exception e)
        {
            await HandleErrorAsync(e);
        }
    }

    private void GroupGrantAllChanged(bool value, PermissionGroupDto permissionGroup)
    {
        foreach (var permission in permissionGroup.Permissions)
        {
            if (!IsDisabledPermission(permission))
                SetPermissionGrant(permission, value);
        }
    }

    private void PermissionChanged(bool value, PermissionGroupDto permissionGroup, PermissionGrantInfoDto permission)
    {
        SetPermissionGrant(permission, value);

        if (value && permission.ParentName != null)
        {
            var parentPermission = GetParentPermission(permissionGroup, permission);

            SetPermissionGrant(parentPermission, true);
        }
        else if (value == false)
        {
            var childPermissions = GetChildPermissions(permissionGroup, permission);

            foreach (var childPermission in childPermissions)
            {
                SetPermissionGrant(childPermission, false);
            }
        }
    }

    private void SetPermissionGrant(PermissionGrantInfoDto permission, bool value)
    {
        if (permission.IsGranted == value) return;

        if (value)
        {
            _grantedPermissionCount++;
            _notGrantedPermissionCount--;
        }
        else
        {
            _grantedPermissionCount--;
            _notGrantedPermissionCount++;
        }

        permission.IsGranted = value;
    }

    private static PermissionGrantInfoDto GetParentPermission(PermissionGroupDto permissionGroup, PermissionGrantInfoDto permission)
    {
        return permissionGroup.Permissions.First(x => x.Name == permission.ParentName);
    }

    private static List GetChildPermissions(PermissionGroupDto permissionGroup, PermissionGrantInfoDto permission)
    {
        return permissionGroup.Permissions.Where(x => x.Name.StartsWith(permission.Name)).ToList();
    }

    private bool IsDisabledPermission(PermissionGrantInfoDto permissionGrantInfo)
    {
        return _disabledPermissions.Any(x => x == permissionGrantInfo);
    }

    private string GetShownName(PermissionGrantInfoDto permissionGrantInfo)
    {
        if (!IsDisabledPermission(permissionGrantInfo))
            return permissionGrantInfo.DisplayName;

        return string.Format(
            "{0} ({1})",
            permissionGrantInfo.DisplayName,
            permissionGrantInfo.GrantedProviders
                .Where(p => p.ProviderName != _providerName)
                .Select(p => p.ProviderName)
                .JoinAsString(", ")
        );
    }
}

MudRoleManagement.razor

@using MudBlazor;
@using Blazorise
@using Blazorise.DataGrid
@using Volo.Abp.BlazoriseUI
@using Volo.Abp.BlazoriseUI.Components
@using Volo.Abp.Identity
@using Microsoft.AspNetCore.Authorization
@using Volo.Abp.PermissionManagement.Blazor.Components
@using Volo.Abp.Identity.Localization
@using Volo.Abp.AspNetCore.Components.Web
@using Volo.Abp.AspNetCore.Components.Web.Theming
@using Volo.Abp.BlazoriseUI.Components.ObjectExtending
@using Volo.Abp.AspNetCore.Components.Web.Theming.Layout
@using Volo.Abp.DependencyInjection
@using Volo.Abp.Identity.Blazor.Pages.Identity
@attribute [Authorize(IdentityPermissions.Roles.Default)]
@attribute [ExposeServices(typeof(RoleManagement))]
@attribute [Dependency(ReplaceServices = true)]
@inject AbpBlazorMessageLocalizerHelper LH

@inherits RoleManagement

@* ************************* DATA GRID ************************* *@

    
        @L["Roles"]
        
        
            @L["NewRole"]
        
    
    
        
            
                @if (HasUpdatePermission)
                {
                    
                    
                }
                @if (HasDeletePermission)
                {   
                    
                }
            
        
        
        
            
                @if (context.Item.IsDefault)
                {
                    
                        @L["DisplayName:IsDefault"]
                    
                }
                @if (context.Item.IsPublic)
                {
                    
                        @L["DisplayName:IsPublic"]
                    
                }
            
        
    


@* ************************* CREATE MODAL ************************* *@
@if (HasCreatePermission)
{
    
        
            @L["NewRole"]
        
        
            
                
                    
                         NewEntity.Name) />
                    
                    
                        
                            @L["DisplayName:IsDefault"]
                        
                    
                    
                        
                            @L["DisplayName:IsPublic"]
                        
                    
                
            
        
        
            
                @L["Cancel"]
            
            
                @L["Save"]
            
        
    
}

@* ************************* EDIT MODAL ************************* *@
@if (HasUpdatePermission)
{
    
        
            @L["Edit"]
        
        
            
                
                    
                         EditingEntity.Name) />
                    
                    
                        
                            @L["DisplayName:IsDefault"]
                        
                    
                    
                        
                            @L["DisplayName:IsPublic"]
                        
                    
                
            
        
        
            
                @L["Cancel"]
            
            
                @L["Save"]
            
        
    
}

@if (HasManagePermissionsPermission)
{
    
}

MudRoleManagement.razor.cs

using System.Threading.Tasks;
using MudBlazor;
using Volo.Abp.Application.Dtos;
using Volo.Abp.Identity;

namespace Acme.BookStore.Blazor.Pages.Identity;

public partial class MudRoleManagement
{
    private MudForm _createForm;
    private MudForm _editForm;
    private bool _createDialogVisible;
    private bool _editDialogVisible;
    private MudDataGrid _dataGrid;
    private MudPermissionManagementModal _permissionManagementModal;

    protected async Task> LoadServerData(GridState state)
    {
        if (GetListInput is PagedAndSortedResultRequestDto pageResultRequest)
        {
            pageResultRequest.MaxResultCount = state.PageSize;
            pageResultRequest.SkipCount = state.Page * state.PageSize;
        }
        var result = await AppService.GetListAsync(GetListInput);
        return new()
        {
            Items = result.Items,
            TotalItems = (int)result.TotalCount
        };
    }

    protected override Task OpenCreateModalAsync()
    {
        NewEntity = new();
        _createDialogVisible = true;
        return Task.CompletedTask;
    }

    protected override Task CloseCreateModalAsync()
    {
        _createDialogVisible = false;
        return Task.CompletedTask;
    }

    protected override async Task CreateEntityAsync()
    {
        if (_createForm.IsValid)
        {
            var createDto = MapToCreateInput(NewEntity);
            await AppService.CreateAsync(createDto);
            await _dataGrid.ReloadServerData();
            _createDialogVisible = false;
        }
    }

    protected override Task OpenEditModalAsync(IdentityRoleDto entity)
    {
        EditingEntityId = entity.Id;
        EditingEntity = MapToEditingEntity(entity);
        _editDialogVisible = true;
        return Task.CompletedTask;
    }

    protected override Task CloseEditModalAsync()
    {
        _editDialogVisible = false;
        return Task.CompletedTask;
    }

    protected override async Task UpdateEntityAsync()
    {
        if (_editForm.IsValid)
        {
            await base.UpdateEntityAsync();
            await _dataGrid.ReloadServerData();
            _editDialogVisible = false;
        }
    }

    protected override async Task DeleteEntityAsync(IdentityRoleDto entity)
    {
        if (await Message.Confirm(GetDeleteConfirmationMessage(entity)))
        {
            await base.DeleteEntityAsync(entity);
            await _dataGrid.ReloadServerData();
        }
    }

    protected override Task OnUpdatedEntityAsync()
    {
        return Task.CompletedTask;
    }

    protected virtual async Task OpenPermissionsModalAsync(IdentityRoleDto entity)
    {
        await _permissionManagementModal.OpenDialogAsync(PermissionProviderName, entity.Name);
    }

    protected virtual DialogOptions DialogOptions
    {
        get => new()
        {
            CloseButton = true,
            CloseOnEscapeKey = true,
            DisableBackdropClick = true
        };
    }
}

MudUserManagement.razor

@using Microsoft.AspNetCore.Authorization
@using Volo.Abp.DependencyInjection
@using Volo.Abp.PermissionManagement.Blazor.Components
@using Volo.Abp.Identity.Localization
@using Volo.Abp.AspNetCore.Components.Web.Theming.Layout
@using Volo.Abp.Identity
@using Volo.Abp.Identity.Blazor.Pages.Identity
@attribute [Authorize(IdentityPermissions.Users.Default)]
@attribute [ExposeServices(typeof(UserManagement))]
@attribute [Dependency(ReplaceServices = true)]
@inject AbpBlazorMessageLocalizerHelper LH

@inherits UserManagement

@* ************************* DATA GRID ************************* *@

    
        @L["Users"]
        
        
            @L["NewUser"]
        
    
    
        
            
                @if (HasUpdatePermission)
                {
                    
                    
                }
                @if (HasDeletePermission)
                {
                    
                }
            
        
        
        
        
    


@* ************************* CREATE MODAL ************************* *@
@if (HasCreatePermission)
{
    
        
            @L["NewUser"]
        
        
            
                
                    
                        
                            
                                
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                            @L["DisplayName:IsActive"]
                                        
                                    
                                    
                                        
                                            @L["DisplayName:LockoutEnabled"]
                                        
                                    
                                
                            
                        
                        
                            
                                
                                    @if (NewUserRoles != null)
                                    {
                                        @foreach (var role in NewUserRoles)
                                        {
                                            
                                                
                                                    @role.Name
                                                
                                            
                                        }
                                    }
                                    else
                                    {
                                        
                                            N/A
                                        
                                    }
                                
                            
                        
                    
                
            
        
        
            
                @L["Cancel"]
            
            
                @L["Save"]
            
        
    
}

@* ************************* EDIT MODAL ************************* *@
@if (HasUpdatePermission)
{
    
        
            @L["Edit"]
        
        
            
                
                    
                        
                            
                                
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                            @L["DisplayName:IsActive"]
                                        
                                    
                                    
                                        
                                            @L["DisplayName:LockoutEnabled"]
                                        
                                    
                                
                            
                        
                        
                            
                                
                                    @if (EditUserRoles != null)
                                    {
                                        @foreach (var role in EditUserRoles)
                                        {
                                            
                                                
                                                    @role.Name
                                                
                                            
                                        }
                                    }
                                    else
                                    {
                                        
                                            N/A
                                        
                                    }
                                
                            
                        
                    
                
            
        
        
            
                @L["Cancel"]
            
            
                @L["Save"]
            
        
    
}

@if (HasManagePermissionsPermission)
{
    
}

MudUserManagement.razor.cs

using System.Linq;
using System.Threading.Tasks;
using MudBlazor;
using Volo.Abp.Application.Dtos;
using Volo.Abp.Identity;
using Volo.Abp.Identity.Blazor.Pages.Identity;

namespace Acme.BookStore.Blazor.Pages.Identity;

public partial class MudUserManagement
{
    private MudForm _createForm;
    private MudForm _editForm;
    private bool _createDialogVisible;
    private bool _editDialogVisible;
    private MudDataGrid _dataGrid;
    private MudPermissionManagementModal _permissionManagementModal;

    protected async Task> LoadServerData(GridState state)
    {
        if (GetListInput is PagedAndSortedResultRequestDto pageResultRequest)
        {
            pageResultRequest.MaxResultCount = state.PageSize;
            pageResultRequest.SkipCount = state.Page * state.PageSize;
        }
        var result = await AppService.GetListAsync(GetListInput);
        return new()
        {
            Items = result.Items,
            TotalItems = (int)result.TotalCount
        };
    }

    protected override Task OpenCreateModalAsync()
    {
        NewEntity = new() { IsActive = true };
        NewUserRoles = Roles.Select(i => new AssignedRoleViewModel
        {
            Name = i.Name,
            IsAssigned = i.IsDefault
        }).ToArray();
        _createDialogVisible = true;
        return Task.CompletedTask;
    }

    protected override Task CloseCreateModalAsync()
    {
        _createDialogVisible = false;
        return Task.CompletedTask;
    }

    protected override async Task CreateEntityAsync()
    {
        if (_createForm.IsValid)
        {
            var createDto = MapToCreateInput(NewEntity);
            await AppService.CreateAsync(createDto);
            await _dataGrid.ReloadServerData();
            await CloseCreateModalAsync();
        }
    }

    protected override async Task OpenEditModalAsync(IdentityUserDto entity)
    {
        var userRoleNames = (await AppService.GetRolesAsync(entity.Id)).Items.Select(r => r.Name).ToList();
        EditUserRoles = Roles.Select(x => new AssignedRoleViewModel
        {
            Name = x.Name,
            IsAssigned = userRoleNames.Contains(x.Name)
        }).ToArray();
        EditingEntityId = entity.Id;
        EditingEntity = MapToEditingEntity(entity);
        _editDialogVisible = true;
    }

    protected override Task CloseEditModalAsync()
    {
        _editDialogVisible = false;
        return Task.CompletedTask;
    }

    protected override async Task UpdateEntityAsync()
    {
        if (_editForm.IsValid)
        {
            await AppService.UpdateAsync(EditingEntityId, EditingEntity);
            await _dataGrid.ReloadServerData();
            await CloseEditModalAsync();
        }
    }

    protected override async Task DeleteEntityAsync(IdentityUserDto entity)
    {
        if (await Message.Confirm(GetDeleteConfirmationMessage(entity)))
        {
            await base.DeleteEntityAsync(entity);
            await _dataGrid.ReloadServerData();
        }
    }

    protected override Task OnUpdatedEntityAsync()
    {
        return Task.CompletedTask;
    }

    protected virtual async Task OpenPermissionsModalAsync(IdentityUserDto entity)
    {
        await _permissionManagementModal.OpenDialogAsync(
            PermissionProviderName, entity.Id.ToString());
    }

    protected virtual DialogOptions DialogOptions
    {
        get => new()
        {
            CloseButton = true,
            CloseOnEscapeKey = true,
            DisableBackdropClick = true
        };
    }
}

Screenshots

Source Code

The source code of this project is available on Github

MudBlazor Theme in ABP Blazor WebAssembly PART 4

Sat, 26 Mar 2022 23:03:22 Z

MudBlazor Theme in ABP Blazor WebAssembly PART 4

Introduction

In this part, I'll show how to create CRUD pages with MudBlazor components.

11. Make Sure You Have Completed Previous Parts

You must complete the steps in Part 1, Part 2, and Part 3 to continue.

12. Create CRUD Pages

Complete the Web Application Development Tutorial in ABP documentation:

13. Update Authors CRUD Page

Add @using MudBlazor to Acme.BookStore.Blazor/_Imports.razor

Update Authors.razor with the following content:

@page "/authors"
@using Acme.BookStore.Authors
@using Acme.BookStore.Localization
@using Volo.Abp.AspNetCore.Components.Web
@inherits BookStoreComponentBase
@inject IAuthorAppService AuthorAppService
@inject AbpBlazorMessageLocalizerHelper LH



    @L["Authors"]
    
    
        @L["NewAuthor"]
    


    
        
            @if (CanEditAuthor)
            {
                
            }
            @if (CanDeleteAuthor)
            {   
                
            }
        
    
    
    
        
            @context.Item.BirthDate?.ToShortDateString()
        
    




    
        @L["NewAuthor"]
    
    
        
             NewAuthor.Name) />
            

            
            

             NewAuthor.ShortBio) />
        
    
    
        
            @L["Cancel"]
        
        
            @L["Save"]
        
    



    
        @EditingAuthor.Name
    
    
        
             EditingAuthor.Name) />
            

            
            

             EditingAuthor.ShortBio) />
        
    
    
        
            @L["Cancel"]
        
        
            @L["Save"]

Then, update Authors.razor.cs code behing file with the following content:

using System;
using System.Threading.Tasks;
using Acme.BookStore.Authors;
using Acme.BookStore.Permissions;
using Microsoft.AspNetCore.Authorization;
using MudBlazor;

namespace Acme.BookStore.Blazor.Pages
{
    public partial class Authors
    {
        private async Task> LoadServerData(GridState state)
        {
            var input = new GetAuthorListDto 
            { 
                Filter = "", 
                MaxResultCount = state.PageSize, 
                SkipCount = state.Page * state.PageSize
            };
            var result = await AuthorAppService.GetListAsync(input);
            return new()
            {
                Items = result.Items,
                TotalItems = (int)result.TotalCount
            };
        }

        private bool CanCreateAuthor { get; set; }
        private bool CanEditAuthor { get; set; }
        private bool CanDeleteAuthor { get; set; }

        private MudDataGrid _authorList;

        private CreateAuthorDto NewAuthor { get; set; }

        private bool _createAuthorDialogVisible;
        private bool _editAuthorDialogVisible;

        private MudForm _createForm;
        private MudForm _editForm;

        private Guid EditingAuthorId { get; set; }
        private UpdateAuthorDto EditingAuthor { get; set; }

        public Authors()
        {
            NewAuthor = new CreateAuthorDto();
            EditingAuthor = new UpdateAuthorDto();
        }

        protected override async Task OnInitializedAsync()
        {
            await SetPermissionsAsync();
        }

        private async Task SetPermissionsAsync()
        {
            CanCreateAuthor = await AuthorizationService
                .IsGrantedAsync(BookStorePermissions.Authors.Create);

            CanEditAuthor = await AuthorizationService
                .IsGrantedAsync(BookStorePermissions.Authors.Edit);

            CanDeleteAuthor = await AuthorizationService
                .IsGrantedAsync(BookStorePermissions.Authors.Delete);
        }

        private void OpenCreateAuthorModal()
        {
            NewAuthor = new CreateAuthorDto();
            _createAuthorDialogVisible = true;
        }

        private void CloseCreateAuthorModal()
        {
            _createAuthorDialogVisible = false;
        }

        private void OpenEditAuthorModal(AuthorDto author)
        {
            EditingAuthorId = author.Id;
            EditingAuthor = ObjectMapper.Map(author);
            _editAuthorDialogVisible = true;
        }

        private async Task DeleteAuthorAsync(AuthorDto author)
        {
            var confirmMessage = L["AuthorDeletionConfirmationMessage", author.Name];
            if (!await Message.Confirm(confirmMessage))
            {
                return;
            }

            await AuthorAppService.DeleteAsync(author.Id);
            await _authorList.ReloadServerData();
        }

        private void CloseEditAuthorModal()
        {
            _editAuthorDialogVisible = false;
        }

        private async Task CreateAuthorAsync()
        {
            if (_createForm.IsValid)
            {
                await AuthorAppService.CreateAsync(NewAuthor);
                _createAuthorDialogVisible = false;
                await _authorList.ReloadServerData();
            }
        }

        private async Task UpdateAuthorAsync()
        {
            if (_editForm.IsValid)
            {
                await AuthorAppService.UpdateAsync(EditingAuthorId, EditingAuthor);
                _editAuthorDialogVisible = false;
                await _authorList.ReloadServerData();
            }
        }
    }
}

Change type of BirthDate property in Author, AuthorDto, CreateAuthorDto, UpdateAuthorDto from DateTime to DateTime?

Now, the Authors page should look like this:

14. Define `MudCrudPageBase` Class

Create MudCrudPageBase.cs file in Volo.Abp.AspNetCore.Components.Web.BasicTheme/Components and paste the following code:

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using JetBrains.Annotations;
using Localization.Resources.AbpUi;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using MudBlazor;
using Volo.Abp.Application.Dtos;
using Volo.Abp.Application.Services;
using Volo.Abp.Authorization;
using Volo.Abp.BlazoriseUI.Components;
using Volo.Abp.AspNetCore.Components.Web.Extensibility.EntityActions;
using Volo.Abp.AspNetCore.Components.Web.Extensibility.TableColumns;

namespace Volo.Abp.AspNetCore.Components.Web.BasicTheme.Components;

public abstract class MudCrudPageBase<
        TAppService,
        TEntityDto,
        TKey>
    : MudCrudPageBase<
        TAppService,
        TEntityDto,
        TKey,
        PagedAndSortedResultRequestDto>
    where TAppService : ICrudAppService<
        TEntityDto,
        TKey>
    where TEntityDto : class, IEntityDto, new()
{
}

public abstract class MudCrudPageBase<
        TAppService,
        TEntityDto,
        TKey,
        TGetListInput>
    : MudCrudPageBase<
        TAppService,
        TEntityDto,
        TKey,
        TGetListInput,
        TEntityDto>
    where TAppService : ICrudAppService<
        TEntityDto,
        TKey,
        TGetListInput>
    where TEntityDto : class, IEntityDto, new()
    where TGetListInput : new()
{
}

public abstract class MudCrudPageBase<
        TAppService,
        TEntityDto,
        TKey,
        TGetListInput,
        TCreateInput>
    : MudCrudPageBase<
        TAppService,
        TEntityDto,
        TKey,
        TGetListInput,
        TCreateInput,
        TCreateInput>
    where TAppService : ICrudAppService<
        TEntityDto,
        TKey,
        TGetListInput,
        TCreateInput>
    where TEntityDto : IEntityDto
    where TCreateInput : class, new()
    where TGetListInput : new()
{
}

public abstract class MudCrudPageBase<
        TAppService,
        TEntityDto,
        TKey,
        TGetListInput,
        TCreateInput,
        TUpdateInput>
    : MudCrudPageBase<
        TAppService,
        TEntityDto,
        TEntityDto,
        TKey,
        TGetListInput,
        TCreateInput,
        TUpdateInput>
    where TAppService : ICrudAppService<
        TEntityDto,
        TKey,
        TGetListInput,
        TCreateInput,
        TUpdateInput>
    where TEntityDto : IEntityDto
    where TCreateInput : class, new()
    where TUpdateInput : class, new()
    where TGetListInput : new()
{
}

public abstract class MudCrudPageBase<
        TAppService,
        TGetOutputDto,
        TGetListOutputDto,
        TKey,
        TGetListInput,
        TCreateInput,
        TUpdateInput>
    : MudCrudPageBase<
        TAppService,
        TGetOutputDto,
        TGetListOutputDto,
        TKey,
        TGetListInput,
        TCreateInput,
        TUpdateInput,
        TGetListOutputDto,
        TCreateInput,
        TUpdateInput>
    where TAppService : ICrudAppService<
        TGetOutputDto,
        TGetListOutputDto,
        TKey,
        TGetListInput,
        TCreateInput,
        TUpdateInput>
    where TGetOutputDto : IEntityDto
    where TGetListOutputDto : IEntityDto
    where TCreateInput : class, new()
    where TUpdateInput : class, new()
    where TGetListInput : new()
{
}

public abstract class MudCrudPageBase<
        TAppService,
        TGetOutputDto,
        TGetListOutputDto,
        TKey,
        TGetListInput,
        TCreateInput,
        TUpdateInput,
        TListViewModel,
        TCreateViewModel,
        TUpdateViewModel>
    : AbpComponentBase
    where TAppService : ICrudAppService<
        TGetOutputDto,
        TGetListOutputDto,
        TKey,
        TGetListInput,
        TCreateInput,
        TUpdateInput>
    where TGetOutputDto : IEntityDto
    where TGetListOutputDto : IEntityDto
    where TCreateInput : class
    where TUpdateInput : class
    where TGetListInput : new()
    where TListViewModel : IEntityDto
    where TCreateViewModel : class, new()
    where TUpdateViewModel : class, new()
{
    [Inject] protected TAppService AppService { get; set; }
    [Inject] protected IStringLocalizer UiLocalizer { get; set; }

    protected virtual int PageSize { get; } = LimitedResultRequestDto.DefaultMaxResultCount;

    protected TGetListInput GetListInput = new();
    protected TCreateViewModel NewEntity;
    protected TKey EditingEntityId;
    protected TUpdateViewModel EditingEntity;

    protected MudDataGrid DataGrid;

    protected bool CreateDialogVisible;
    protected bool EditDialogVisible;
    
    protected MudForm CreateForm;
    protected MudForm EditForm;

    protected DataGridEntityActionsColumn EntityActionsColumn;
    protected EntityActionDictionary EntityActions { get; set; }
    protected TableColumnDictionary TableColumns { get; set; }

    protected string CreatePolicyName { get; set; }
    protected string UpdatePolicyName { get; set; }
    protected string DeletePolicyName { get; set; }

    public bool HasCreatePermission { get; set; }
    public bool HasUpdatePermission { get; set; }
    public bool HasDeletePermission { get; set; }

    protected DialogOptions DialogOptions 
    {
        get => new()
        { 
            CloseButton = true,
            CloseOnEscapeKey = true,
            DisableBackdropClick = true
        };
    }

    protected MudCrudPageBase()
    {
        NewEntity = new TCreateViewModel();
        EditingEntity = new TUpdateViewModel();
        TableColumns = new TableColumnDictionary();
        EntityActions = new EntityActionDictionary();
    }

    protected async override Task OnInitializedAsync()
    {
        await SetPermissionsAsync();
        await SetEntityActionsAsync();
        await SetTableColumnsAsync();
        await InvokeAsync(StateHasChanged);
    }

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await base.OnAfterRenderAsync(firstRender);
            await SetToolbarItemsAsync();
            await SetBreadcrumbItemsAsync();
        }
    }

    protected virtual async Task SetPermissionsAsync()
    {
        if (CreatePolicyName != null)
        {
            HasCreatePermission = await AuthorizationService.IsGrantedAsync(CreatePolicyName);
        }

        if (UpdatePolicyName != null)
        {
            HasUpdatePermission = await AuthorizationService.IsGrantedAsync(UpdatePolicyName);
        }

        if (DeletePolicyName != null)
        {
            HasDeletePermission = await AuthorizationService.IsGrantedAsync(DeletePolicyName);
        }
    }

    private IReadOnlyList MapToListViewModel(IReadOnlyList dtos)
    {
        if (typeof(TGetListOutputDto) == typeof(TListViewModel))
        {
            return dtos.As>();
        }

        return ObjectMapper.Map, List>(dtos);
    }

    protected async Task> LoadServerData(GridState state)
    {
        if (GetListInput is PagedAndSortedResultRequestDto pageResultRequest)
        {
            pageResultRequest.MaxResultCount = state.PageSize;
            pageResultRequest.SkipCount = state.Page * state.PageSize;
        }
        var result = await AppService.GetListAsync(GetListInput);
        return new()
        {
            Items = MapToListViewModel(result.Items),
            TotalItems = (int)result.TotalCount
        };
    }

    protected virtual async Task OpenCreateModalAsync()
    {
        try
        {
            await CheckCreatePolicyAsync();

            NewEntity = new TCreateViewModel();

            // Mapper will not notify Blazor that binded values are changed
            // so we need to notify it manually by calling StateHasChanged
            await InvokeAsync(() =>
            {
                StateHasChanged();
                CreateDialogVisible = true;
            });
        }
        catch (Exception ex)
        {
            await HandleErrorAsync(ex);
        }
    }

    protected virtual Task CloseCreateModalAsync()
    {
        NewEntity = new TCreateViewModel();
        return InvokeAsync(() => { CreateDialogVisible = false; });
    }

    protected virtual async Task OpenEditModalAsync(TListViewModel entity)
    {
        try
        {
            await CheckUpdatePolicyAsync();

            var entityDto = await AppService.GetAsync(entity.Id);

            EditingEntityId = entity.Id;
            EditingEntity = MapToEditingEntity(entityDto);

            await InvokeAsync(() =>
            {
                StateHasChanged();
                EditDialogVisible = true;
            });
        }
        catch (Exception ex)
        {
            await HandleErrorAsync(ex);
        }
    }

    protected virtual TUpdateViewModel MapToEditingEntity(TGetOutputDto entityDto)
    {
        return ObjectMapper.Map(entityDto);
    }

    protected virtual TCreateInput MapToCreateInput(TCreateViewModel createViewModel)
    {
        if (typeof(TCreateInput) == typeof(TCreateViewModel))
        {
            return createViewModel.As();
        }

        return ObjectMapper.Map(createViewModel);
    }

    protected virtual TUpdateInput MapToUpdateInput(TUpdateViewModel updateViewModel)
    {
        if (typeof(TUpdateInput) == typeof(TUpdateViewModel))
        {
            return updateViewModel.As();
        }

        return ObjectMapper.Map(updateViewModel);
    }

    protected virtual Task CloseEditModalAsync()
    {
        InvokeAsync(() => { EditDialogVisible = false; });
        return Task.CompletedTask;
    }

    protected virtual async Task CreateEntityAsync()
    {
        try
        {
            var validate = true;
            if (CreateForm is not null)
            {
                validate = CreateForm.IsValid;
            }
            if (validate)
            {
                await OnCreatingEntityAsync();

                await CheckCreatePolicyAsync();
                var createInput = MapToCreateInput(NewEntity);
                await AppService.CreateAsync(createInput);

                await OnCreatedEntityAsync();
            }
        }
        catch (Exception ex)
        {
            await HandleErrorAsync(ex);
        }
    }

    protected virtual Task OnCreatingEntityAsync()
    {
        return Task.CompletedTask;
    }

    protected virtual async Task OnCreatedEntityAsync()
    {
        NewEntity = new TCreateViewModel();
        await DataGrid.ReloadServerData();

        await InvokeAsync(() => { CreateDialogVisible = false; });
    }

    protected virtual async Task UpdateEntityAsync()
    {
        try
        {
            var validate = true;
            if (EditForm is not null)
            {
                validate = EditForm.IsValid;
            }
            if (validate)
            {
                await OnUpdatingEntityAsync();

                await CheckUpdatePolicyAsync();
                var updateInput = MapToUpdateInput(EditingEntity);
                await AppService.UpdateAsync(EditingEntityId, updateInput);

                await OnUpdatedEntityAsync();
            }
        }
        catch (Exception ex)
        {
            await HandleErrorAsync(ex);
        }
    }

    protected virtual Task OnUpdatingEntityAsync()
    {
        return Task.CompletedTask;
    }

    protected virtual async Task OnUpdatedEntityAsync()
    {
        await DataGrid.ReloadServerData();

        await InvokeAsync(() => { EditDialogVisible = false; });
    }

    protected virtual async Task DeleteEntityAsync(TListViewModel entity)
    {
        try
        {
            await CheckDeletePolicyAsync();
            await OnDeletingEntityAsync();
            await AppService.DeleteAsync(entity.Id);
            await OnDeletedEntityAsync();
        }
        catch (Exception ex)
        {
            await HandleErrorAsync(ex);
        }
    }

    protected virtual Task OnDeletingEntityAsync()
    {
        return Task.CompletedTask;
    }

    protected virtual async Task OnDeletedEntityAsync()
    {
        await DataGrid.ReloadServerData();
        await InvokeAsync(StateHasChanged);
        await Notify.Success(L["SuccessfullyDeleted"]);
    }

    protected virtual string GetDeleteConfirmationMessage(TListViewModel entity)
    {
        return UiLocalizer["ItemWillBeDeletedMessage"];
    }

    protected virtual async Task CheckCreatePolicyAsync()
    {
        await CheckPolicyAsync(CreatePolicyName);
    }

    protected virtual async Task CheckUpdatePolicyAsync()
    {
        await CheckPolicyAsync(UpdatePolicyName);
    }

    protected virtual async Task CheckDeletePolicyAsync()
    {
        await CheckPolicyAsync(DeletePolicyName);
    }

    /// 
    /// Calls IAuthorizationService.CheckAsync for the given .
    /// Throws  if given policy was not granted for the current user.
    ///
    /// Does nothing if  is null or empty.
    /// 
    /// A policy name to check
    protected virtual async Task CheckPolicyAsync([CanBeNull] string policyName)
    {
        if (string.IsNullOrEmpty(policyName))
        {
            return;
        }

        await AuthorizationService.CheckAsync(policyName);
    }

    protected virtual ValueTask SetBreadcrumbItemsAsync()
    {
        return ValueTask.CompletedTask;
    }

    protected virtual ValueTask SetEntityActionsAsync()
    {
        return ValueTask.CompletedTask;
    }

    protected virtual ValueTask SetTableColumnsAsync()
    {
        return ValueTask.CompletedTask;
    }

    protected virtual ValueTask SetToolbarItemsAsync()
    {
        return ValueTask.CompletedTask;
    }
}

This class will be used to replace AbpCrudPageBase.

15. Update Books CRUD Page

Change type of PublishDate property in Book, BookDto, CreateUpdateBookDto from DateTime to DateTime?

Update Books.razor with the following content:

@page "/books"
@attribute [Authorize(BookStorePermissions.Books.Default)]
@using Acme.BookStore.Permissions
@using Microsoft.AspNetCore.Authorization
@using Volo.Abp.Application.Dtos
@using Acme.BookStore.Books
@using Acme.BookStore.Localization
@using Microsoft.Extensions.Localization
@using Volo.Abp.AspNetCore.Components.Web.BasicTheme.Components
@inherits MudCrudPageBase
@inject AbpBlazorMessageLocalizerHelper LH



    @L["Books"]
    
    
        @L["NewBook"]
    


    
        
            @if (HasUpdatePermission)
            {
                
            }
            @if (HasDeletePermission)
            {   
                
            }
        
    
    
    
        
            @L[$"Enum:BookType:{(int)context.Item.Type}"]
        
    
    
    
        
            @if (@context.Item.PublishDate.HasValue)
                @context.Item.PublishDate.Value.ToShortDateString()
        
    
    




    
        @L["NewBook"]
    
    
        
            
                
                    @L["PickAnAuthor"]
                
                @foreach (var author in authorList)
                {
                    
                        @author.Name
                    
                }
            
            

             NewEntity.Name) />
            

            
                @foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
                {
                    
                        @L[$"Enum:BookType:{(int)bookTypeValue}"]
                    
                }
            
            

            
            

             NewEntity.Price) />
        
    
    
        
            @L["Cancel"]
        
        
            @L["Save"]
        
    



    
        @EditingEntity.Name
    
    
        
            
                
                    @L["PickAnAuthor"]
                
                @foreach (var author in authorList)
                {
                    
                        @author.Name
                    
                }
            
            

             EditingEntity.Name) />
            

            
                @foreach (BookType bookTypeValue in Enum.GetValues(typeof(BookType)))
                {
                    
                        @L[$"Enum:BookType:{(int)bookTypeValue}"]
                    
                }
            
            

            
            

             EditingEntity.Price) />
        
    
    
        
            @L["Cancel"]
        
        
            @L["Save"]
        
    


@code
{
    //ADDED A NEW FIELD
    IReadOnlyList authorList = Array.Empty();

    public Books() // Constructor
    {
        LocalizationResource = typeof(BookStoreResource);

        CreatePolicyName = BookStorePermissions.Books.Create;
        UpdatePolicyName = BookStorePermissions.Books.Edit;
        DeletePolicyName = BookStorePermissions.Books.Delete;
    }

    //GET AUTHORS ON INITIALIZATION
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        authorList = (await AppService.GetAuthorLookupAsync()).Items;
    }
}

MudBlazor Theme in ABP Blazor WebAssembly FINAL

MudBlazor Theme in ABP Blazor WebAssembly Part 3

Mon, 07 Mar 2022 20:45:06 Z

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






    
        
        
        
        
    
    
        
    
    
        
            
            @Body
            
        
    


@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 _localizer;

    public MudBlazorUiMessageService(IDialogService dialogService, IStringLocalizer localizer)
    {
        _dialogService = dialogService;
        _localizer = localizer;
    }

    public async Task Confirm(string message, string title = null, Action 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 options = null)
    {
        _dialogService.ShowMessageBox(title, message, yesText: _localizer["Ok"]);
        return Task.CompletedTask;
    }

    public Task Info(string message, string title = null, Action options = null)
    {
        _dialogService.ShowMessageBox(title, message, yesText: _localizer["Ok"]);
        return Task.CompletedTask;
    }

    public Task Success(string message, string title = null, Action options = null)
    {
        _dialogService.ShowMessageBox(title, message, yesText: _localizer["Ok"]);
        return Task.CompletedTask;
    }

    public Task Warn(string message, string title = null, Action 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

The Result

MudBlazor Theme in ABP Blazor WebAssembly PART 4

MudBlazor Theme in ABP Blazor WebAssembly PART 2

Thu, 24 Feb 2022 04:53:17 Z

MudBlazor Theme in ABP Blazor WebAssembly PART 2

Introduction

This sample ABP Blazor WebAssembly project shows how to replace built-in Notification service to display notifications with MudBlazor's Snackbar component. The source code is avallable on GitHub.

5. Make Sure You Have Completed PART 1

This project is built on top of MudBlazor Theme in ABP Blazor WebAssembly PART 1. Therefore, you will first need to complete the steps shown in PART 1 to continue following the steps listed here.

6. Add MudBlazor Snackbar Support To MainLayout

Open MainLayout.razor, add and remove . The final content of the file should look like this:

@inherits LayoutComponentBase





    
        
        
        
        
    
    
        
    
    
        
            
            @Body
            
            
        
    


@code 
{
    private bool _drawerOpen = true;

    private void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

7. Replace Notification Service

In Volo.Abp.AspNetCore.Components.Web.BasicTheme project, create a folder named Services. Create MudBlazorUiNotificationService.cs file in this folder, and add the following content:

using System;
using System.Threading.Tasks;
using MudBlazor;
using Volo.Abp.AspNetCore.Components.Notifications;
using Volo.Abp.DependencyInjection;

namespace Volo.Abp.AspNetCore.Components.Web.BasicTheme.Services;

[Dependency(ReplaceServices = true)]
public class MudBlazorUiNotificationService : IUiNotificationService, IScopedDependency
{
    private readonly ISnackbar _snackbar;

    public MudBlazorUiNotificationService(ISnackbar snackbar)
    {
        _snackbar = snackbar;
    }

    public Task Error(string message, string title = null, Action options = null)
    {
        _snackbar.Add(message, Severity.Error);
        return Task.CompletedTask;
    }

    public Task Info(string message, string title = null, Action options = null)
    {
        _snackbar.Add(message, Severity.Info);
        return Task.CompletedTask;
    }

    public Task Success(string message, string title = null, Action options = null)
    {
        _snackbar.Add(message, Severity.Success);
        return Task.CompletedTask;
    }

    public Task Warn(string message, string title = null, Action options = null)
    {
        _snackbar.Add(message, Severity.Warning);
        return Task.CompletedTask;
    }
}

The code shown above automatically replaces the built-in IUiNotificationService service. To learn more about this mechanism see Overriding Services.

Now, modify Index.razor file to test MudBlazor style notifications:

@page "/"
@using Volo.Abp.AspNetCore.Components.Notifications
@inherits BookStoreComponentBase
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject IUiNotificationService NotificationService

The Result

MudBlazor Theme in ABP Blazor WebAssembly PART 3

MudBlazor Theme in ABP Blazor WebAssembly

Wed, 16 Feb 2022 16:32:47 Z

MudBlazor Theme in ABP Blazor WebAssembly PART 1

Introduction

It is quite easy to customize default template and layout of an ABP Blazor application. This sample demonstrates how you can use MudBlazor layouts in your ABP Blazor WebAssembly applications. The source code is available on GitHub

What is MudBlazor?

MudBlazor is a Blazor component library trusted by thousands of users, from hobbyists to enterprises.

1. Create a new ABP Blazor WebAssembly application

Install or update the ABP CLI:

dotnet tool install -g Volo.Abp.Cli || dotnet tool update -g Volo.Abp.Cli

Create a new ABP Blazor WebAssembly application:

abp new Acme.BookStore -u blazor -d mongodb

2. Add packages to your solution

Copy the source code of Basic Theme to your solution:

abp add-package Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme --with-source-code --add-to-solution-file

Then, navigate to downloaded Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme project directory and run:

abp add-package Volo.Abp.AspNetCore.Components.Web.BasicTheme --with-source-code --add-to-solution-file

To add downloaded projects to source control, open .gitignore file and add this line:

!**/packages/*Theme*

3. Add MudBlazor

Navigate to downloaded Volo.Abp.AspNetCore.Components.Web.BasicTheme project directory and install MudBlazor:

dotnet add package MudBlazor

In Volo.Abp.AspNetCore.Components.Web.BasicTheme project, open AbpAspNetCoreComponentsWebBasicThemeModule.cs file, and replace its content with the following code:

using MudBlazor.Services;
using Volo.Abp.AspNetCore.Components.Web.Theming;
using Volo.Abp.Modularity;

namespace Volo.Abp.AspNetCore.Components.Web.BasicTheme;

[DependsOn(
    typeof(AbpAspNetCoreComponentsWebThemingModule)
)]
public class AbpAspNetCoreComponentsWebBasicThemeModule : AbpModule
{
    public override void ConfigureServices(ServiceConfigurationContext context)
    {
        base.ConfigureServices(context);
        context.Services.AddMudServices();
    }
}

And in Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme project, open BasicThemeBundleContributor.cs file, and replace its content with the following code:

using Volo.Abp.Bundling;

namespace Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme;

public class BasicThemeBundleContributor : IBundleContributor
{
    public void AddScripts(BundleContext context)
    {
        context.Add("_content/MudBlazor/MudBlazor.min.js");
    }

    public void AddStyles(BundleContext context)
    {
        context.Add("_content/Volo.Abp.AspNetCore.Components.Web.BasicTheme/libs/abp/css/theme.css");

        context.Add("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
        context.Add("_content/MudBlazor/MudBlazor.min.css");
    }
}

Add the following to your HTML head section of index.html file in Acme.BookStore.Blazor project:

In the same file but located in the end of it add the MudBlazor js file, it should be in the same location as the default blazor script:

Add this line to Volo.Abp.AspNetCore.Components.Web.BasicTheme/Themes/Basic/_Imports.razor and Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/_Imports.razor files:

@using MudBlazor

4. Customize Basic Theme

Open Volo.Abp.AspNetCore.Components.Web.BasicTheme/Themes/Basic/ folder.

Replace Branding.razor file's content with the following code:

@using Volo.Abp.Ui.Branding
@inject IBrandingProvider BrandingProvider


    @BrandingProvider.AppName

Replace FirstLevelNavMenuItem.razor file's content with the following code:

@using Volo.Abp.UI.Navigation

@{
    var elementId = MenuItem.ElementId ?? "MenuItem_" + MenuItem.Name.Replace(".", "_");
    var cssClass = string.IsNullOrEmpty(MenuItem.CssClass) ? string.Empty : MenuItem.CssClass;
    var disabled = MenuItem.IsDisabled ? "disabled" : string.Empty;
    var url = MenuItem.Url == null ? "#" : MenuItem.Url.TrimStart('/', '~');
}

@if (MenuItem.IsLeaf)
{
    if (MenuItem.Url is not null)
    {
        
            @MenuItem.DisplayName
        
    }
}
else
{
    
        @foreach (var childMenuItem in MenuItem.Items.OrderBy(i => i.Order))
        {
            
        }
    
}

Replace SecondLevelNavMenuItem.razor file's content with the following code:

@using Volo.Abp.UI.Navigation

@{
    var elementId = MenuItem.ElementId ?? "MenuItem_" + MenuItem.Name.Replace(".", "_");
    var cssClass = string.IsNullOrEmpty(MenuItem.CssClass) ? string.Empty : MenuItem.CssClass;
    var disabled = MenuItem.IsDisabled ? "disabled" : string.Empty;
    var url = MenuItem.Url == null ? "#" : MenuItem.Url.TrimStart('/', '~');
}

@if (MenuItem.IsLeaf)
{
    if (MenuItem.Url is not null)
    {
        
            @MenuItem.DisplayName
        
    }
}
else
{
    
        @foreach (var childMenuItem in MenuItem.Items.OrderBy(i => i.Order))
        {
            
        }
    
}

Replace NavToolbar.razor file's content with the following code:

@foreach (var render in ToolbarItemRenders)
{
    @render
}

Replace MainLayout.razor file's content with the following code:

@inherits LayoutComponentBase




    
        
        
        
        
    
    
        
    
    
        
            
            @Body
            
            
            
        
    


@code 
{
    private bool _drawerOpen = true;

    private void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

You can use a different layout. See other main layout options.

Now open Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/ folder.

Replace LanguageSwitch.razor file's content with the following code:

@using Volo.Abp.Localization
@using System.Globalization
@using System.Collections.Immutable
@inject ILanguageProvider LanguageProvider
@inject IJSRuntime JsRuntime

@if (_otherLanguages is not null && _otherLanguages.Any())
{
    
        
            
                @_currentLanguage.DisplayName
            
        
        
            @foreach (var language in _otherLanguages)
            {
                
                    @language.DisplayName
                
            }
        
    
}

@code {
    private IReadOnlyList _otherLanguages;
    private LanguageInfo _currentLanguage;

    protected override async Task OnInitializedAsync()
    {
        var selectedLanguageName = await JsRuntime.InvokeAsync(
            "localStorage.getItem",
            "Abp.SelectedLanguage");

        _otherLanguages = await LanguageProvider.GetLanguagesAsync();

        if (!_otherLanguages.Any()) return;

        if (!selectedLanguageName.IsNullOrWhiteSpace())
            _currentLanguage = _otherLanguages.FirstOrDefault(l => l.UiCultureName == selectedLanguageName);

        _currentLanguage ??= _otherLanguages.FirstOrDefault(l => l.UiCultureName == CultureInfo.CurrentUICulture.Name);
        _currentLanguage ??= _otherLanguages.FirstOrDefault();

        _otherLanguages = _otherLanguages.Where(l => l != _currentLanguage).ToImmutableList();
    }

    private async Task ChangeLanguageAsync(LanguageInfo language)
    {
        await JsRuntime.InvokeVoidAsync(
            "localStorage.setItem",
            "Abp.SelectedLanguage", language.UiCultureName);

        await JsRuntime.InvokeVoidAsync("location.reload");
    }
}

Replace LoginDisplay.razor file's content with the following code:

@using Microsoft.Extensions.Localization
@using Volo.Abp.Users
@using Volo.Abp.MultiTenancy
@using global::Localization.Resources.AbpUi
@inherits AbpComponentBase
@inject ICurrentUser CurrentUser
@inject ICurrentTenant CurrentTenant
@inject IJSRuntime JsRuntime
@inject NavigationManager Navigation
@inject IStringLocalizer UiLocalizer


    
        
            
                
                    @CurrentUser.Name
                
            
            
                @if (Menu is not null && Menu.Items.Any())
                {
                    @foreach (var menuItem in Menu.Items)
                    {
                        
                            @menuItem.DisplayName
                        
                    }
                    
                }
                
                    @UiLocalizer["Logout"]
                
            
        
    
    
        
            
                @UiLocalizer["Login"]

The Result

MudBlazor Theme in ABP Blazor WebAssembly PART 2

ABP.IO Stories

Customize ABP Blazor Application UI with MudBlazor

MudBlazor Theme in ABP Blazor WebAssembly (FINAL)

MudBlazor Theme in ABP Blazor WebAssembly FINAL

Introduction

16. Make Sure You Have Completed Previous Parts

17. Create Required Files

18. Modify These Files' Content As Shown Below

Screenshots

Source Code

MudBlazor Theme in ABP Blazor WebAssembly PART 4

MudBlazor Theme in ABP Blazor WebAssembly PART 4

Introduction

11. Make Sure You Have Completed Previous Parts

12. Create CRUD Pages

13. Update Authors CRUD Page

14. Define MudCrudPageBase Class

15. Update Books CRUD Page

Next

MudBlazor Theme in ABP Blazor WebAssembly Part 3

MudBlazor Theme in ABP Blazor WebAssembly PART 3

Introduction

8. Make Sure You Have Completed PART 1 & Part 2

9. Add MudBlazor MessageBox Support to MainLayout

10. Replace Message Service

The Result

Next

MudBlazor Theme in ABP Blazor WebAssembly PART 2

MudBlazor Theme in ABP Blazor WebAssembly PART 2

Introduction

5. Make Sure You Have Completed PART 1

6. Add MudBlazor Snackbar Support To MainLayout

7. Replace Notification Service

The Result

Next

MudBlazor Theme in ABP Blazor WebAssembly

MudBlazor Theme in ABP Blazor WebAssembly PART 1

Introduction

What is MudBlazor?

1. Create a new ABP Blazor WebAssembly application

2. Add packages to your solution

3. Add MudBlazor

4. Customize Basic Theme

The Result

Next

14. Define `MudCrudPageBase` Class