Double Initialization of Custom Toolbar Component #8800

10 Answer(s)

• 

  0

  berkansasmaz created one month ago

  Support Team .NET Developer

  Hello,

  Can you send the code of the component you created?

  The problem may be caused by the lifecycle of Blazor Components. See more: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-9.0#after-component-render-onafterrenderasync

  Save Cancel
• 

  0

  roberto.fiocchi created one month ago

  Hi,

  I modified the component in the guide to log "Notification component initialized!" when the componenent initalizes. The code is the following:

  @using Microsoft.Extensions.Logging
  @inherits Volo.Abp.AspNetCore.Components.AbpComponentBase
  <div style="color: white; margin: 8px;">
      <i class="far fa-bell" @onclick="ShowNotifications"></i>
  </div>
  @code {
      private async Task ShowNotifications()
      {
          await Message.Info("TODO: Show notifications");
      }
  
      protected override Task OnInitializedAsync()
      {
          Logger.LogInformation("Notification component initialized!");
  
          return base.OnInitializedAsync();
      }
  }
  

  As you can see in the following screenshot when i load in the application it prints the Log 2 times:

  Same thing is noticed if you put a breakpoint onto the "Logger.LogInformation" line, it runs 2 times.

  How can we fix this?

  Save Cancel
• 

  0

  berkansasmaz created one month ago

  Support Team .NET Developer

  As far as I understand, the problem does not seem to be related to ABP. I found a content like below in ASP.NET's Blazor documentation:

  To prevent developer code in OnInitializedAsync from running twice when prerendering, see the Stateful reconnection after prerendering section. The content in the section focuses on Blazor Web Apps and stateful SignalR reconnection. To preserve state during the execution of initialization code while prerendering, see Prerender ASP.NET Core Razor components.

  Reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-9.0#component-initialization-oninitializedasync

  You can also look here on how to prevent this.

  Save Cancel
• 

  0

  roberto.fiocchi created one month ago

  Hi,

  The problem and solution you describe are not actually what is causing this problem because prerender is already set to "false" in the base ABP framework Blazor WASM project:

  It seems the problem is specifically the toolbar because if i make a copy of the "Notification" component and add it to a page, the "OnInitializedAsync" function only runs once.

  This is what happens when the component is in the Toolbar:

  This is what happens when the component is in the Page:

  Hope this clarifies the problem i'm facing.

  Save Cancel
• 

  0

  enisn created one month ago

  Support Team .NET Developer

  Hi,

  I assume you're using LeptonX Theme right?

  In the leptonx, Desktop Toolbar and Mobile Toolbar are separated and this component is rendered twice, one for desktop toolbar and one for mobile toolbar. That's why you see 2 different logs in your console.

  If you wish to use it in the only for desktop view, I suggest you to use LeptonXToolbars.Main or LeptonXToolbars.MainMobile instead directly using StandardToolbars.Main from the framework:

  if (context.Toolbar.Name == LeptonXToolbars.Main)
  {
      context.Toolbar.Items.Insert(0, new ToolbarItem(typeof(Notification)));
  }
  

  If you want to share a state between those 2 component instances, you can use a Singleton or Scoped service to get data from a service and keep the data in that service and render directly from that service. In that case, you'll make a single request and share data that obtained once.

  Save Cancel
• 

  0

  roberto.fiocchi created one month ago

  Hi,

  Thanks for the reply, i understand now what the issue is. I have a few questions reguarding this approach. Why would leptonX render both toolbars regardless of if im viewing the page from mobile or desktop? Wouldn't it be better perfomance wise if they only rendered when necessary? Is there an option to achieve this rather then having them both render always?

  Save Cancel
• 

  0

  enisn created one month ago

  Support Team .NET Developer

  Hi,

  Thanks for the reply, i understand now what the issue is. I have a few questions reguarding this approach. Why would leptonX render both toolbars regardless of if im viewing the page from mobile or desktop? Wouldn't it be better perfomance wise if they only rendered when necessary? Is there an option to achieve this rather then having them both render always?

  Unfortunately it's not a programming decision. The HTML structure of the LeptonX theme requires 2 different usage since desktop toolbar and mobile toolbar has completely different html tree. It cannot change menu & toolbars only visually by using CSS. The html structure also is different and both should be added separately. That's why we have 2 different component to match leptonx html structure in blazor.

  https://x.leptontheme.com/side-menu/index.html

  Save Cancel
• 

  0

  roberto.fiocchi created 23 days ago

  I ask you to update the documentation by adding this clarification and an example how to avoid the problem.

  Thanks

  Save Cancel

  1
• 

  0

  berkansasmaz created 23 days ago

  Support Team .NET Developer

  Thanks, we will review the relevant document and update it if we need to update it. I created an internal issue for this.

  ---

  I'm closing this issue for now. If you have a different question, feel free to create a new question.

  Save Cancel
• 

  0

  berkansasmaz created 22 days ago

  Support Team .NET Developer

  We've added it to the documents, for your information. See: https://github.com/abpframework/abp/pull/22218

  Save Cancel