Blazor Web 应用程序 - 在用户登录时根据详细信息更改导航菜单选项

Question

我有一个 Blazor Web 应用程序 - .net 8。我使用 Microsoft Entra 登录用户。然后，该用户将被添加到我们自己的数据库中，并且必须链接到一个帐户。如果它们是链接的，导航菜单应该向他们显示更多选项。当用户登录时，将从我们的数据库中读取用户的详细信息。我无法让 NavMenu 看到某些内容发生了变化。或者告诉 NavMenu 重新渲染。我正在查看这个项目 - https://blazorhelpwebsite.com/ViewBlogPost/28 并设置了一个虚拟项目，但它也不起作用。菜单上不显示计数器。

所以这是“CounterState”类

public class CounterState
{
    // _currentCount holds the current counter value
    // for the entire application
    private int _currentCount = 0;
    // StateChanged is an event handler other pages
    // can subscribe to 
    public event EventHandler StateChanged;
    // This method will always return the current count
    public int GetCurrentCount()
    {
        return _currentCount;
    }
    // This method will be called to update the current count
    public void SetCurrentCount(int paramCount)
    {
        _currentCount = paramCount;
        StateHasChanged();
    }
    // This method will allow us to reset the current count
    public void ResetCurrentCount()
    {
        _currentCount = 0;
        StateHasChanged();
    }
    private void StateHasChanged()
    {
        // This will update any subscribers
        // that the counter state has changed
        // so they can update themselves
        // and show the current counter value
        StateChanged?.Invoke(this, EventArgs.Empty);
    }
}

然后在Program.cs中注册它

builder.Services.AddScoped<CounterState>();

导航菜单是

@using BlazorWebApp.SessionState
@inject CounterState CounterState
 

@implements IDisposable

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorWebApp</a>
    </div>
</div>

<input type="checkbox" title="Navigation menu" class="navbar-toggler" />

<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
            </NavLink>

            <div>
                <p style="color:white">Counter State: @CounterState.GetCurrentCount()</p>
            </div>
        </div>

        <AuthorizeView>
         @*    <div class="nav-item px-3">
                <NavLink class="nav-link" href="weather">
                    <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
                </NavLink>
            </div> *@

            <div class="nav-item px-3">
                <NavLink class="nav-link" href="unauthenticate">
                    <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Unauthenticated
                </NavLink>
            </div>

            <div class="nav-item px-3">
                <NavLink class="nav-link" href="authenticate">
                    <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Authenticated
                </NavLink>
            </div>

            <div class="nav-item px-3">
                <NavLink class="nav-link" href="userdetails">
                    <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Details
                </NavLink>
            </div>


        </AuthorizeView>
    </nav>
</div>

@code {

    // This method is called when the control is initialized
    protected override void OnInitialized()
    {
        // Subscribe to the StateChanged EventHandler
        CounterState.StateChanged +=
        OnCounterStateAdvancedStateChanged;
    }
    // This method is fired when the CounterState object
    // invokes its StateHasChanged() method
    // This will cause this control to invoke its own
    // StateHasChanged() method refreshing the page
    // and displaying the updated counter value
    void OnCounterStateAdvancedStateChanged(
        object sender, EventArgs e) => StateHasChanged();

    void IDisposable.Dispose()
    {
        // When this control is disposed of
        // unsubscribe from the StateChanged EventHandler
        CounterState.StateChanged -=
        OnCounterStateAdvancedStateChanged;
    }
}

计数器页面是

@page "/counter"
@rendermode InteractiveServer
@using BlazorWebApp.SessionState
@inject CounterState CounterState
 

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @CounterState.GetCurrentCount()</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<!-- Add a button to reset the current count -->
<!-- that calls the CounterState class directly -->
<button class="btn btn-primary"
        @onclick="CounterState.ResetCurrentCount">
    Reset Count
</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        // Call the GetCurrentCount() method
        // to get the current count
        int CurrentCount = CounterState.GetCurrentCount();
        // Increase the count
        CurrentCount++;
        // Set Current count on the Session State object
        CounterState.SetCurrentCount(CurrentCount);
    }
}

 

计数器页面可以工作，但导航菜单上的计数器仍为零。任何想法出了什么问题 - 我假设自 2019 年以来发生了一些变化，但我找不到任何建议。

或者任何其他想法来做我想做的事。

谢谢

Answer 1

今天早上我找到了解决方案。在 NavMenu 组件中 - 添加行

@rendermode InteractiveServer