从 UI 更改导航侧菜单项标签后，如何刷新导航侧菜单项标签，而无需在 blazor 中重新加载整个页面

Question

我有一个剃刀页面，在页面右侧显示一个导航菜单，其中包含项目列表。用户可以从 UI 更改这些项目的标签，并且标签名称会在 UI 上刷新，即除了导航菜单之外的所有位置。我也可以更改导航菜单中的标签名称，但前提是重新加载整个页面。我不希望那样，因为它很慢。有没有办法重新加载导航菜单剃须刀页面而不重新加载整个页面？

请找到下面的导航剃刀页面和辅助方法，我可以从中使用 setLabel 更新标签。

NavMenuTree.razor

<AuthorizeView Context="Home">
    <Authorized>
       
        <div class="k-card-header mb-3">
            <span class="tb-icon-container">
                <TelerikSvgIcon Icon="@SvgIcon.Search" Size="@size" />
                <TelerikTextBox Value="@FilteredValue" ValueChanged="@((string input) => ChangeValues(input))" Id="filter-value" Size="@size" Rounded="@size" Placeholder="@MOM.UI.Client.Constants.Common.SearchBox" />
            </span>
        </div> 
        <div class="menu">

            <TelerikTreeView @ref="treeView" Data="@MenuData" Size="@size" OnItemClick="OnTreeViewItemClick"
                             SelectionMode="TreeViewSelectionMode.Single"
                             @bind-SelectedItems="@SelectedItems"
                             @bind-ExpandedItems="@ExpandedItems">
                <TreeViewBindings>
                    <TreeViewBinding TextField="Text" IconField="Icon" IdField="Id" ParentIdField="ParentId" UrlField="Route">
                        <ItemTemplate>
                            @{
                                MenuItem itm = context as MenuItem;
                                if (itm?.Type == "Screen")
                                {
                                    <a href="@itm.Route" class="no-decoration">
                                        @if (!string.IsNullOrEmpty(itm.Icon))
                                        {
                                            <span class="@itm.Icon"></span>
                                        }
                                        @itm.Text
                                    </a>
                                }
                                else
                                {
                                    @if (!string.IsNullOrEmpty(itm?.Icon))
                                    {
                                        <span class="@itm.Icon"></span>
                                    }
                                    @itm?.Text
                                }
                            }
                        </ItemTemplate>
                    </TreeViewBinding>
                </TreeViewBindings>
            </TelerikTreeView>
        </div>
    </Authorized>
</AuthorizeView>


@code {


    [CascadingParameter]
    public Task<AuthenticationState>? AuthenticationState { get; set; }
    [CascadingParameter(Name = "size")]
    public string? size { get; set; }
    public bool firstTimeLoad = true;

    public TelerikTreeView? treeView { get; set; }
    private IEnumerable<object>? ExpandedItems { get; set; } = new List<object>();
    private IEnumerable<object>? SelectedItems { get; set; } = new List<object>();
    private IEnumerable<MenuItem>? MenuData { get; set; }
    private IEnumerable<MenuItem>? AllData { get; set; }

    public string FilteredValue { get; set; }

    public AuthenticationState? authState;
    public System.Security.Claims.Claim? authClaim;
    public System.Security.Claims.Claim? entityActionClaim;
    private ClaimsPrincipal? AuthenticationStateUser { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        try
        {
            AuthenticationState? authenticationState;

            authenticationState = await AuthenticationState;
            this.AuthenticationStateUser = authenticationState.User;

            if (MenuData == null)
            {
                List<MenuItem> result = (from Menu in MenuItem.GetMenuItems()
                                         from Perm in AuthenticationStateUser.Claims
                                     where ((Perm.Value.Contains(Menu.AuthorizationKey) && Perm.Type == EntityAction._contextType && Menu.Type == "Screen") ||
                                     (Perm.Value.Contains(Menu.AuthorizationKey) && Perm.Type == Module._contextType && Menu.Type == "Menu"))
                                         orderby Menu.ParentId, Menu.Rank
                                         select Menu).ToList();

                result.RemoveAll(x => x.Type == "Menu" && !result.Any(y => y.ParentId == x.Id));
                result.Add(
                new MenuItem
                {
                    Id = 25,
                    Text = "Logout",
                    Icon = @"fa-solid fa-sign-out fa-sm",
                    Type = "Screen",
                    HasChildren = false,
                    level = 1,
                    Rank = 14,
                    Route = "logout",
                    AuthorizationKey = null,
                });
                MenuData = result.AsEnumerable();
                AllData = result.AsEnumerable();
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }

    }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        try
        {
            if (treeView != null)
            {
                if (ExpandedItems?.Count() == 0)
                {
                    if (_navMan.BaseUri != _navMan.Uri)
                    {
                        string selectedRoute = _navMan.Uri.Replace(_navMan.BaseUri, "/");

                        var selectedItem = MenuData?.FirstOrDefault(x => x.Type == "Screen" && selectedRoute.ToLower().Contains(x.Route.ToLower()));
                        if (selectedItem != null)
                        {
                            SelectedItems = new List<object>() { selectedItem };
                            while (selectedItem != null)
                            {
                                ExpandedItems = ExpandedItems.Concat(new[] { MenuData.FirstOrDefault(x => x.Type == "Menu" && x.Id == selectedItem.ParentId) });
                                selectedItem = MenuData.FirstOrDefault(x => x.Type == "Menu" && x.Id == selectedItem.ParentId);
                            }
                        }
                    }
                }
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
        await base.OnAfterRenderAsync(firstRender);
    }
    protected override void OnInitialized()
    {
        firstTimeLoad = true;
        base.OnInitialized();
    }

}

菜单助手.cs

using MOM.Model.Setup;

namespace MOM.UI.Client.Helper
{
    public static class UserLabelHelper
    {
        private static List<LabelDTO> _labels { get; set; }

        public static void SetUserLabel(string type, string label)
        {
            try
            {
                if (_labels.Any(x => x.Type == type))
                {
                    _labels.FirstOrDefault(x => x.Type == type).UserLabel = label;
                }

            }
            catch (System.Exception ex)
            {
                throw ex;
            }
        }
    }
}

请帮我解决这个问题。

Answer 1

如果您在更新标签后使用 StateHasChanged()。 这将驱动整个 DOM 重新渲染，而无需重新加载页面。 有时微小的变化不会被接受，但这会迫使它发生。