Change visibility of nav item in blazor menu based on condition after index load-CodePudding

I have one Menu in Left Navigation, that will be hide/display based on isAdmin Condition. I am getting the value of isAdmin on Index.Razor page. Now I want to re-render the left navigation if isAdmin is true, Below Nav item should be visible

@if (isAdmin)
                {
                 <a  target="_blank">
                        <div style="width:40px;">
                            <i title="Security"  style="color: white; font-size: 30px;"></i>
                        </div>
                        <span  style="color:white; visibility:@Visibility">Security</span>
                </a>   
                }

Change visibility of nav item in blazor menu

As suggested by above link, I created the AppStateService in Services. Below is my code for AppStateService

public class AppStateService
    {
        private bool isAdmin;
        public event Action OnChange;
        public bool IsAdmin
        {
            get { return isAdmin; }
            set
            {
                if (isAdmin != value)
                {
                    isAdmin = value;
                    NotifyStateChanged();
                }
            }
        }

        private void NotifyStateChanged() => OnChange?.Invoke();
    }

On Index page, I used and assign the

@inject AppStateService AppStateService
AppStateService.IsAdmin = true;

On Left Navigation Component, I used

@inject AppStateService AppStateService
@implements IDisposable

Left Navigation Component

protected override async Task OnInitializedAsync()
        {
            AppStateService.OnChange  = StateHasChanged;
        }


public void Dispose()
        {
            AppStateService.OnChange -= StateHasChanged;
        }

added in Startup class also.

But now how will I get the Value of isAdmin in left Navigation, from Index.Razor page to display / hide the nav item.

CodePudding user response：

Your navigation bar code:

    protected override void OnInitialized()
        => appStateService.OnChange  = OnAppStateChanged; 

    private void OnAppStateChanged()
        => InvokeAsync(StateHasChanged);

    public void Dispose()
        => appStateService.OnChange -= OnAppStateChanged;

And a test page:

@page "/"
@inject AppStateService appStateService; 

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<div>
    <button  @onclick=ChangeState>Change State</button>
</div>

@code{

    private void ChangeState()
         => this.appStateService.IsAdmin = !this.appStateService.IsAdmin; 
}

CodePudding user response：

I think that you are in the right way, but try to add your code in Index page and not in Navigation Component.
Index page

@inject AppStateService AppStateService
@implements IDisposable

protected override void OnAfterRender(bool firstRender)
{
  if (firstRender)
  {
    AppStateService.IsAdmin = true;
    AppStateService.OnChange  = StateHasChanged;
  }
}

public void Dispose()
{
   AppStateService.OnChange -= StateHasChanged;
}

Navigation Component, kept the same.

@if (AppStateService.IsAdmin)
 {
    <a  target="_blank">
       <div style="width:40px;">
         <i title="Security"  style="color: white; font-size: 30px;"></i>
       </div>
       <span  style="color:white; visibility:@Visibility">Security</span>
    </a>   
}