Migration Guide for the Blazor UI from the v3.2 to the v3.3

Startup Template Changes

All these changes should be done for the .Blazor project in your solution;

  • Update theAddOidcAuthentication options in your YourProjectBlazorModule class as described in the issue #5913.
  • Add a Components/Layout/MainFooterComponent.razor file with the following content:
<span class="copyright-text">@DateTime.Now.Year © MyProjectName</span>
HTML

Change MyProjectName with your own project name or completely modify the footer based on your preference.

  • For the .Blazor.csproj file, remove the Volo.Abp.Account.Pro.Public.Blazor package and add these packages: Volo.Abp.SettingManagement.Blazor, Volo.Saas.Host.Blazor, Volo.Abp.LeptonTheme.Management.Blazor, Volo.Abp.Account.Pro.Admin.Blazor, Volo.Abp.TextTemplateManagement.Blazor, Volo.Abp.AuditLogging.Blazor, Volo.Abp.LanguageManagement.Blazor.
  • Add the following module dependencies for YourProjectBlazorModule class:
typeof(SaasHostBlazorModule),
typeof(AbpSettingManagementBlazorModule),
typeof(LeptonThemeManagementBlazorModule),
typeof(AbpAccountAdminBlazorModule),
typeof(AbpAuditLoggingBlazorModule),
typeof(TextTemplateManagementBlazorModule),
typeof(LanguageManagementBlazorModule)
C#
  • Add the following code into the ConfigureServices method of YourProjectBlazorModule class:
Configure<LeptonThemeOptions>(options =>
{
    options.FooterComponent = typeof(MainFooterComponent);
});
C#

This sets the footer component you've created before.

  • You may want to add (or change the existing) menu contributor to re-order the menu items added by the depended modules:
using System.Threading.Tasks;
using MyCompanyName.MyProjectName.Localization;
using Volo.Abp.AuditLogging.Blazor.Menus;
using Volo.Abp.Identity.Pro.Blazor.Navigation;
using Volo.Abp.LanguageManagement.Blazor.Menus;
using Volo.Abp.SettingManagement.Blazor.Menus;
using Volo.Abp.TextTemplateManagement.Blazor.Menus;
using Volo.Abp.UI.Navigation;
using Volo.Saas.Host.Blazor.Navigation;

namespace MyCompanyName.MyProjectName.Blazor.Navigation
{
    public class MyProjectNameMenuContributor : IMenuContributor
    {
        public Task ConfigureMenuAsync(MenuConfigurationContext context)
        {
            if (context.Menu.DisplayName != StandardMenus.Main)
            {
                return Task.CompletedTask;
            }

            var l = context.GetLocalizer<MyProjectNameResource>();

            context.Menu.AddItem(new ApplicationMenuItem(
                MyProjectNameMenus.Home,
                l["Menu:Home"],
                "/",
                icon: "fas fa-home",
                order: 1
            ));

            //Administration
            var administration = context.Menu.GetAdministration();
            administration.Order = 2;

            //Administration->Saas
            administration.SetSubItemOrder(SaasHostMenus.GroupName, 1);

            //Administration->Identity
            administration.SetSubItemOrder(IdentityProMenus.GroupName, 2);

            //Administration->Language Management
            administration.SetSubItemOrder(LanguageManagementMenus.GroupName, 3);

            //Administration->Text Template Management
            administration.SetSubItemOrder(TextTemplateManagementMenus.GroupName, 4);

            //Administration->Audit Logs
            administration.SetSubItemOrder(AbpAuditLoggingMenus.GroupName, 5);

            //Administration->Settings
            administration.SetSubItemOrder(SettingManagementMenus.GroupName, 6);

            return Task.CompletedTask;
        }
    }
}
C#
  • You may need to add or update the MyProjectNameMenus.cs for your project:
namespace MyCompanyName.MyProjectName.Blazor.Navigation
{
    public class MyProjectNameMenus
    {
        private const string Prefix = "MyProjectName";

        public const string Home = Prefix + ".Home";
    }
}
C#
  • Add the missing files into the wwwroot folder. The best way to do that is to create a new Blazor UI solution, open the wwwroot folder and copy the missing files. In the next versions, we will work to build a 3rd party library management system for automatic upgrades. However, please consider the current Blazor UI is not so complete.
  • Open the wwwroot/index.html file and make the following changes;

Remove the following line:

<link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.LeptonTheme/theme.css" rel="stylesheet" />
HTML

Add the following lines in the head section, before the main.css:

<link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.LeptonTheme/themes/lepton/styles/lepton1.css" rel="stylesheet" id="LeptonStyle" />
<link href="flag-icon-css/css/flag-icon.min.css" rel="stylesheet"/>
HTML

Remove the following code (since the ABP Framework now provides a better error handling system):

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>
HTML

Remove the following line:

<script src="_content/Volo.Abp.AspNetCore.Components.WebAssembly.LeptonTheme/theme.js"></script>
HTML

Add the following lines instead:

<script src="_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/abp_theming.js"></script>
<script src="_content/Volo.Abp.AspNetCore.Components.WebAssembly.LeptonTheme/themes/lepton/scripts/lepton.js"></script>
HTML
  • Upgrade Microsoft.Extensions.* packages to 3.1.8+.

If you have trouble, it is best to download a new solution and compare the files with yours. There are not so many files in the startup template.

BlazoriseCrudPageBase to AbpCrudPageBase

Renamed BlazoriseCrudPageBase to AbpCrudPageBase. Just update the usages. It also has some changes, you may need to update method calls/usages manually.

Contributors

Avatar hikalkan
Last updated: October 23, 2020 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

Real World Problems and Solutions with AI

27 Feb, 17:00
Online
Watch the Event
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
Do you need assistance from an ABP expert?
Schedule a Meeting
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book