How do I force the Blazor toolbar to refresh #3592

3 Answer(s)

• 

  2

  enisn created 2 years ago

  Support Team .NET Developer

  Hi @TonyH

  You can publish an event inside the application to call StateHasChanged() method.

  I'll share an example for UnreadCount for notifications. Firstly I'll create a NotificationData class and register it as scoped into service collection. Scoped is important here because if you define it as Transient, a new instance will be created each time and it can't keep its state. If you define it as Singleton, it's ok in Blazor WASM but it won't work on Blazor Server, all the connected users will use the same instance of that object. So, Scoped is the best way in here.

  1- Define NotificationData.cs first.

  public class NotificationData : IScopedDependency
  {
      private int unreadCount;
  
      public int UnreadCount
      {
          get => unreadCount;
          set
          {
              unreadCount = value;
              UnreadCountChanged?.Invoke(this, new EventArgs());
          }
      }
  
      public event EventHandler UnreadCountChanged;
  }
  

  2- Create a notification component with name NotificationsComponent.razor for toolbar

  @inject NotificationData NotificationData
  
  <div class="nav-link">
      <i class="fa fa-bell"></i>
  
      @if (NotificationData.UnreadCount > 0)
      {
          <span class="position-absolute top-0 badge rounded-pill bg-danger">
              @NotificationData.UnreadCount
              <span class="visually-hidden">unread messages</span>
          </span>
      }
  </div>
  
  @code{
      protected override Task OnInitializedAsync()
      {
          NotificationData.UnreadCountChanged += (s, e) => StateHasChanged();
          return base.OnInitializedAsync();
      }
  }
  

  3- Add it to the toolbar

  public class MyToolbarContributor : IToolbarContributor
  {
      public Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
      {
          if(context.Toolbar.Name == StandardToolbars.Main)
          {
              context.Toolbar.Items.Add(new ToolbarItem(typeof(NotificationsComponent)));
          }
  
          return Task.CompletedTask;
      }
  }
  

  4- Don't forget to configure it in the module file

  Configure<AbpToolbarOptions>(options =>
  {
      options.Contributors.Add(new MyToolbarContributor());
  });
  

  5- Inject the NotificationData wherever you want and make changes. (In my case I've injected it into Index.razor)

  @inject NotificationData NotificationData
  
  <Button Color="Color.Success" @onclick="@(()=> NotificationData.UnreadCount++)" >Increase Unread Count</Button>
  <Button Color="Color.Danger" @onclick="@(()=> NotificationData.UnreadCount--)" >Decrease Unread Count</Button>
  

  6- See the result:

  

  Save Cancel
• 

  2

  TonyH created 2 years ago

  PERFECT!

  Not only is this exactly what I needed to achieve, your explanation and code samples are some of the best explanations I've seen so far. Nothing assumed, nothing left out.

  Might be worth adding this sample to your official documentation?

  Thanks!

  T

  Save Cancel

  2
• 

  1

  enisn created 2 years ago

  Support Team .NET Developer

  Thanks for your feedback.

  Additionally, Local Event Bus can be used in this scenario, but regular csharp events are much more useful for UI changes. Also, creating a new object like NotificationData allows to manage component's data independently from the component, so it's an abstraction over UI.

  Save Cancel