Open Closed

NullReferenceException in MainHeader from Lepton Theme #8193

User avatar
0
bmulinari created
  • ABP Framework version: v8.3.2
  • UI Type: Blazor Server
  • Database System: EF Core (SQL Server)
  • Exception message and full stack trace:
  • [16:42:28 ERR] Unhandled exception in circuit 'KGhlNtd6BxqzxILhhuZShTmKcJAZivA0bBCtrDKhcKU'. System.AggregateException: One or more errors occurred. (Object reference not set to an instance of an object.) ---> System.NullReferenceException: Object reference not set to an instance of an object. at Volo.Abp.AspNetCore.Components.Web.LeptonTheme.Components.ApplicationLayout.MainHeader.MainHeader.i2Wswldy3T() at Volo.Abp.AspNetCore.Components.Web.LeptonTheme.Components.ApplicationLayout.MainHeader.MainHeader.OnAfterRenderAsync(Boolean firstRender) --- End of inner exception stack trace ---
  • Steps to reproduce the issue:
  • Run the blazor server host and refresh the page a few times, the error seems to occur at random about 50% of the times (possible race condition?). The error can be seen in the browser console and in the app console.

This issue seems to be the same as reported in this issue in GitHub, but I couldn't find a solution (I also asked there).

Markdown supported.
Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Go to accepted answer
10 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Can you share your test project via https://wetransfer.com/?

    liming.ma@volosoft.com

    Thanks.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    bmulinari created

    I sent you an email.

    Thanks!

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    ok, I will check it, thanks.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    We will fix this in 8.3.3.

    Your ticket has been refunded.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
    1
  • User Avatar
    0
    bmulinari created

    Thank you. Are there any workarounds we could use for fixing this issue until we wait for the next release?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Use the MyMainHeader.razor.cs and MyMainHeader.razor to override MainHeader

    MyMainHeader.razor.cs

    using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using Volo.Abp.AspNetCore.Components.Web;
using Volo.Abp.LeptonTheme.Management;

namespace Cns.Modules.Docusign.Blazor.Server.Host.Pages;

public partial class MyMainHeader
{
    [Inject]
    private IAbpUtilsService UtilsService { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            if (Menu != null)
            {
                if (Menu.Placement == MenuPlacement.Top)
                {
                    await UtilsService.AddClassToTagAsync("body", "lp-topmenu");
                }
                else
                {
                    if (Menu.NavBarStatus == MenuStatus.OpenOnHover)
                    {
                        await UtilsService.AddClassToTagAsync("body", "lp-closed");
                        await UtilsService.RemoveClassFromTagAsync("body", "lp-opened-sidebar");
                        await UtilsService.RemoveClassFromTagAsync("body", "lp-body-fixed");
                    }
                    else
                    {
                        await UtilsService.RemoveClassFromTagAsync("body", "lp-closed");
                        await UtilsService.AddClassToTagAsync("body", "lp-opened-sidebar");
                        await UtilsService.AddClassToTagAsync("body", "lp-body-fixed");
                    }
                }
            }

            await InvokeAsync(StateHasChanged);
        }
    }

    async Task MyToggleNavbarStatusAsync()
    {
        if (Menu != null)
        {
            Menu.ToggleNavbarStatus();

            if (Menu.Placement == MenuPlacement.Top)
            {
                await UtilsService.AddClassToTagAsync("body", "lp-topmenu");
            }
            else
            {
                if (Menu.NavBarStatus == MenuStatus.OpenOnHover)
                {
                    await UtilsService.AddClassToTagAsync("body", "lp-closed");
                    await UtilsService.RemoveClassFromTagAsync("body", "lp-opened-sidebar");
                    await UtilsService.RemoveClassFromTagAsync("body", "lp-body-fixed");
                }
                else
                {
                    await UtilsService.RemoveClassFromTagAsync("body", "lp-closed");
                    await UtilsService.AddClassToTagAsync("body", "lp-opened-sidebar");
                    await UtilsService.AddClassToTagAsync("body", "lp-body-fixed");
                }
            }
        }
    }

    protected virtual async Task OnNavBarMouseOverAsync()
    {
        //TODO: MOUSEOVER IS NOT PERFORMANT, WE SHOULD USE MOUSEENTER/MOUSELEAVE

        if (Menu != null)
        {
            if (Menu.NavBarStatus == MenuStatus.OpenOnHover)
            {
                if (await UtilsService.HasClassOnTagAsync("body", "lp-closed"))
                {
                    await UtilsService.AddClassToTagAsync("body", "lp-extended");
                }
            }
        }
    }

    protected virtual async Task OnNavbarMouseOutAsync()
    {
        if (Menu != null)
        {
            if (Menu.NavBarStatus == MenuStatus.OpenOnHover)
            {
                if (await UtilsService.HasClassOnTagAsync("body", "lp-closed"))
                {
                    await UtilsService.RemoveClassFromTagAsync("body", "lp-extended");
                }
            }
        }
    }
    protected virtual void ToggleToolbarNav()
    {
        IsToolbarNavShown = !IsToolbarNavShown;
    }

    protected virtual void ToggleSidebarNav()
    {
        IsSidebarNavShown = !IsSidebarNavShown;
    }

}

    MyMainHeader.razor

    @using Volo.Abp.AspNetCore.Components.Web.LeptonTheme.Components.ApplicationLayout.Navigation
@using Volo.Abp.DependencyInjection
@using Volo.Abp.LeptonTheme.Management
@using Volo.Abp.AspNetCore.Components.Web.LeptonTheme.Components.ApplicationLayout.MainHeader

@inherits Volo.Abp.AspNetCore.Components.Web.LeptonTheme.Components.ApplicationLayout.MainHeader.MainHeader
@attribute [Dependency(ReplaceServices = true)]
@attribute [ExposeServices(typeof(Volo.Abp.AspNetCore.Components.Web.LeptonTheme.Components.ApplicationLayout.MainHeader.MainHeader))]

<header>
    <MainHeaderBranding/>
    <nav class="navbar navbar-expand-xl navbar-dark d-lg-none nav-mobile">
        <button @onclick="ToggleToolbarNav" class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToolbar" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-user"></i>
        </button>
        <button @onclick="ToggleSidebarNav" class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSidebar" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-align-justify"></i>
        </button>
    </nav>
    <nav class="navbar navbar-expand-lg user-nav-mobile">
        <div class="collapse navbar-collapse d-lg-block toolbar-nav-wrapper @(IsToolbarNavShown ? "show" : "")" id="navbarToolbar">
            <ul class="navbar-nav toolbar-nav ms-auto">
                <MainHeaderToolbar/>
            </ul>
        </div>
    </nav>
    <div class="lp-sidebar collapse navbar-collapse d-lg-block @(IsSidebarNavShown ? "show" : "")" id="navbarSidebar" @onmouseover="OnNavBarMouseOverAsync" @onmouseout="OnNavbarMouseOutAsync">
        <div class="lp-sidebar-header">
            <div class="lp-toggle-sidebar" @onclick="MyToggleNavbarStatusAsync">
                <i class="fa fa-align-left material-icons lp-open-icon"></i>
                <i class="fa fa-align-justify material-icons lp-close-icon"></i>
            </div>
        </div>
        <div class="lp-sidebar-wrapper">
            <MainSiderbar/>
        </div>
    </div>
</header>
    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
    1
  • User Avatar
    0
    bmulinari created

    Thank you. Just a feedback: while your workaround prevents the exception from throwing, the layout is sometimes broken as shown below:

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    MyMainHeader.razor.cs

    using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using Volo.Abp.AspNetCore.Components.Web;
using Volo.Abp.LeptonTheme.Management;

namespace Cns.Modules.Docusign.Blazor.Server.Host.Pages;

public partial class MyMainHeader
{
    [Inject]
    private IAbpUtilsService UtilsService { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            Menu ??= await MainMenuProvider.GetMenuAsync();
            if (Menu.Placement == MenuPlacement.Top)
            {
                await UtilsService.AddClassToTagAsync("body", "lp-topmenu");
            }
            else
            {
                if (Menu.NavBarStatus == MenuStatus.OpenOnHover)
                {
                    await UtilsService.AddClassToTagAsync("body", "lp-closed");
                    await UtilsService.RemoveClassFromTagAsync("body", "lp-opened-sidebar");
                    await UtilsService.RemoveClassFromTagAsync("body", "lp-body-fixed");
                }
                else
                {
                    await UtilsService.RemoveClassFromTagAsync("body", "lp-closed");
                    await UtilsService.AddClassToTagAsync("body", "lp-opened-sidebar");
                    await UtilsService.AddClassToTagAsync("body", "lp-body-fixed");
                }
            }

            await InvokeAsync(StateHasChanged);
        }
    }

    async Task MyToggleNavbarStatusAsync()
    {
        Menu ??= await MainMenuProvider.GetMenuAsync();
        Menu.ToggleNavbarStatus();

        if (Menu.Placement == MenuPlacement.Top)
        {
            await UtilsService.AddClassToTagAsync("body", "lp-topmenu");
        }
        else
        {
            if (Menu.NavBarStatus == MenuStatus.OpenOnHover)
            {
                await UtilsService.AddClassToTagAsync("body", "lp-closed");
                await UtilsService.RemoveClassFromTagAsync("body", "lp-opened-sidebar");
                await UtilsService.RemoveClassFromTagAsync("body", "lp-body-fixed");
            }
            else
            {
                await UtilsService.RemoveClassFromTagAsync("body", "lp-closed");
                await UtilsService.AddClassToTagAsync("body", "lp-opened-sidebar");
                await UtilsService.AddClassToTagAsync("body", "lp-body-fixed");
            }
        }
    }

    protected virtual async Task OnNavBarMouseOverAsync()
    {
        //TODO: MOUSEOVER IS NOT PERFORMANT, WE SHOULD USE MOUSEENTER/MOUSELEAVE

        Menu ??= await MainMenuProvider.GetMenuAsync();
        if (Menu.NavBarStatus == MenuStatus.OpenOnHover)
        {
            if (await UtilsService.HasClassOnTagAsync("body", "lp-closed"))
            {
                await UtilsService.AddClassToTagAsync("body", "lp-extended");
            }
        }
    }

    protected virtual async Task OnNavbarMouseOutAsync()
    {
        Menu ??= await MainMenuProvider.GetMenuAsync();
        if (Menu.NavBarStatus == MenuStatus.OpenOnHover)
        {
            if (await UtilsService.HasClassOnTagAsync("body", "lp-closed"))
            {
                await UtilsService.RemoveClassFromTagAsync("body", "lp-extended");
            }
        }
    }
    protected virtual void ToggleToolbarNav()
    {
        IsToolbarNavShown = !IsToolbarNavShown;
    }

    protected virtual void ToggleSidebarNav()
    {
        IsSidebarNavShown = !IsSidebarNavShown;
    }
}
    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
    1
  • User Avatar
    0
    bmulinari created

    Hi there. I see that 8.3.3 is out, but I couldn't find a mention of this in the release notes. Could you please confirm whether this issue was fixed in this release?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    8.3.3 will fix your problem. you can give it a try.

    Thanks.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Assignee
User avatar maliming
Labels
None yet
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.8.0-preview. Updated on September 09, 2026, 11:56
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.