Blazor WASM Dynamic switching of Layout for specific pages (Previous recommended fix does not work) #8843

5 Answer(s)

• 

  0

  enisn created 24 days ago

  Support Team .NET Developer

  Hi there,

  I can share the following implementation suggestion to you.

  Let's say we have LayoutA.razor, LayoutB.razor and a MyCustomLayout.razor file that manages the current layout

  LayoutA.razor

  @inherits LayoutComponentBase
  
  <div class="layout-container">
      <div class="layout-sidebar">
          <div class="layout-sidebar-header">
              <h1>Layout A</h1>
          </div>
      </div>
      <div class="layout-content">
          @Body
      </div>
  </div>
  

  LayoutB.razor

  @inherits LayoutComponentBase
  
  <div class="layout-container">
      <div class="layout-sidebar">
          <div class="layout-sidebar-header">
              <h1>Layout B</h1>
          </div>
      </div>
      <div class="layout-content">
          @Body
      </div>
  </div>
  

  MyCustomLayout.razor

  @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout
  @inherits LayoutComponentBase
  @implements IDisposable
  @inject NavigationManager NavigationManager
  
  <LayoutView Layout="@CurrentLayout">
      @Body
  </LayoutView>
  
  
  @code {
      public Type CurrentLayout { get; set; } = typeof(SideMenuLayout);
  
      protected override Task OnInitializedAsync()
      {
          NavigationManager.LocationChanged += OnLocationChanged;
          SetLayout(NavigationManager.Uri);
          return base.OnInitializedAsync();
      }
  
      public void Dispose()
      {
          NavigationManager.LocationChanged -= OnLocationChanged;
      }
  
      private void OnLocationChanged(object sender, LocationChangedEventArgs e)
      {
          SetLayout(e.Location);
      }
  
      private void SetLayout(string location)
      {
  
          if (location.Contains("page-a"))
          {
              CurrentLayout = typeof(LayoutA);
          }
  
          else if (location.Contains("page-b"))
          {
              CurrentLayout = typeof(LayoutB);
          }
          else
          {
              CurrentLayout = typeof(SideMenuLayout);
          }
  
          StateHasChanged();
      }
  }
  

  And create two components with path /page-a and /page-b

  PageA.razor

  @page "/page-a"
  <h3>PageA</h3>
  
  <p>
      This is PageA.
  </p>
  

  PageB.razor

  @page "/page-b"
  <h3>PageA</h3>
  
  <p>
      This is PageA.
  </p>
  

  Then configure it to make it work with LeptonX theme as a default layout:

  Configure<LeptonXThemeBlazorOptions>(options =>
  {
      options.Layout = typeof(MyCustomLayout);
  });
  

  

  Save Cancel
• 

  0

  Spospisil created 24 days ago

  Ok. Thank you! That solution worked as how I needed.

  Save Cancel

  1
• 

  0

  Spospisil created 24 days ago

  Ok. Thank you! That solution worked as how I needed.

  Save Cancel
• 

  0

  Spospisil created 24 days ago

  Ok, so now it appears all the pages that still use the standard ABP SideMenuLayout layout are not adding the MainHeaderToolbarUserMenu component to upper right corner of the page.

  Here is my code

  DynamicLayoutPicker.razor

  @inherits LayoutComponentBase
  
  
      @Body
  
  

  DynamicLayoutPicker.razor.cs

  using CFDataSystems.StructureCloud.Blazor.Themes.LeptonX.Layouts.TenantLayout;
  using CFDataSystems.StructureCloud.Components.Layouts;
  using Microsoft.AspNetCore.Components;
  using Microsoft.AspNetCore.Components.Routing;
  using System.Threading.Tasks;
  using System;
  using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout;
  
  namespace CFDataSystems.StructureCloud.Blazor.Themes.LeptonX.Layouts;
  
  public partial class DynamicLayoutPicker : LayoutComponentBase, IDisposable
  {
      [Inject] private NavigationManager _navManager { get; set; }
      public Type CurrentLayout { get; set; } = typeof(SideMenuLayout);
  
      protected override Task OnInitializedAsync()
      {
          _navManager.LocationChanged += OnLocationChanged;
          SetLayout(_navManager.Uri);
          return base.OnInitializedAsync();
      }
  
      public void Dispose()
      {
          _navManager.LocationChanged -= OnLocationChanged;
      }
  
      private void OnLocationChanged(object sender, LocationChangedEventArgs e)
      {
          SetLayout(e.Location);
      }
  
      private void SetLayout(string location)
      {
          Console.WriteLine($"***** CURRENT URL: {location} *****");
  
          if (location.Contains("tenant-procedure-list"))
          {
              CurrentLayout = typeof(ProceduresPageLayout);
              Console.WriteLine($"***** CURRENT Layout: ProceduresPageLayout *****");
          }
          else if (location.Contains("SampleTenantDefault"))
          {
              CurrentLayout = typeof(TenantDefaultLayout);
              Console.WriteLine($"***** CURRENT Layout: TenantDefaultLayout *****");
          }
          else
          {
              CurrentLayout = typeof(SideMenuLayout);
              Console.WriteLine($"***** CURRENT Layout: SideMenuLayout *****");
          }
  
          StateHasChanged();
      }
  }
  

  BlazorModule.cs

          Configure(options =>
          {
              //options.Layout = LeptonXBlazorLayouts.SideMenu;
              options.Layout = typeof(DynamicLayoutPicker);
          });
  

  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

  Save Cancel
• 

  0

  Spospisil created 22 days ago

  Hi,

  So you can disregard this last comment as I tracked down the logic and see that I needed to create my own ToolbarContributor that specificaly look at the LeptonXThemeBlazorOptions and factor in my DynamicLayoutPicker in order to add the SideMenuUserMenu component to the ToolBar.Items collection.

  public class StructureToolbarContributor : IToolbarContributor
  {
      public Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
      {
          if (context.Toolbar.Name == StandardToolbars.Main)
          {
              var options = context.ServiceProvider.GetRequiredService>().Value;
  
              if (options.Layout == typeof(DynamicLayoutPicker))
              {
                  context.Toolbar.Items.Add(new ToolbarItem(typeof(SideMenuUserMenu)));
              }
  
          }
          return Task.CompletedTask;
      }
  }
  
  
  Changes to the Blazor ABP Module class
  
          Configure(options =>
          {
              options.Contributors.Add(new LeptonXThemeToolbarContributor());
              options.Contributors.Add(new StructureToolbarContributor());
              //options.Contributors.Add(new MessageToolBarContributor());
          });
  

  Thanks

  Save Cancel