0

我正在使用 MudBlazor 库开发 .net5 Blazor WebApp。我正在尝试创建一个显示某些类别和类别页面的导航菜单。但是由于可以添加新类别或添加新类别页面，因此我需要在信息更改时刷新我的组件。在OnInitializedAsync()此调用函数时，按预期呈现导航菜单没有问题。但是，在更新它应该呈现的任何信息后再次调用它时，这个函数似乎不再做它应该做的事情，即重新呈现组件。现在，最简单的解决方案可能是我可以简单地刷新整个页面。但这不是我想要的，因为还有其他逻辑需要继续运行而不会受到页面重新加载的干扰。我的 。

@inject CategoryService categoryService
@inject CategoryPageService categoryPageService

@inherits LayoutComponentBase

<MudText Typo="Typo.h6" Class="px-4" Style="margin-bottom: 10px; margin-top: 10px; text-align:center">Categories</MudText>
<MudDivider />
<MudNavMenu Style="color:white">
@foreach (Category category in NavCategories)
{
    @if(NavCategoryPages.Count > 0)
    {
        @foreach(CategoryPage categoryPage in NavCategoryPages)
        {
            @if(categoryPage.CategoryId == category.Id)
            {
                <MudNavGroup Title=@category.Name>
                    @foreach(CategoryPage categoryPage1 in NavCategoryPages.Where(c => c.CategoryId == category.Id))
                    {
                        <MudNavLink>@categoryPage1.PageName</MudNavLink>
                    }
                </MudNavGroup>
            }
            else
            {
                <MudNavLink>@category.Name</MudNavLink> 
            }
        }
    }
}
</MudNavMenu>

@code
{
    private List<Category> NavCategories = new List<Category>();
    private List<CategoryPage> NavCategoryPages = new List<CategoryPage>();

    protected override async Task OnInitializedAsync()
    {
        await GetCategoriesNav(); //Function that should grab the new information from the database
    }

    public async Task GetCategoriesNav()
    {
        NavCategories = await categoryService.GetCategories();
        NavCategoryPages = await categoryPageService.GetCategoryPages();
        //This delay is to have enough time to view if the StateHasChanged has any effect on first call.
        await Task.Delay(5000);

        StateHasChanged();
    }
}

我已经仔细检查了它们必须显示的所有值，并在调试中相应地显示出来。如果您需要任何额外的信息，请不要犹豫。

第一个电话是在：

  • 类别选择器.razor
protected override async Task OnInitializedAsync()
    {
        await GetCategoriesNav();
    }

此调用按预期呈现 NavMenu。之后，唯一一次在其他地方调用它是在我编辑/添加类别时。这是在：

  • 类别管理
//These 2 functions are called via a button.
async Task AddCategory()
    {
        Category thisCategory = new();

        var param = new DialogParameters { ["category"] = thisCategory };

        IDialogReference dialog = DialogService.Show<CategoryDialog>("Add Category", param);

        DialogResult result = await dialog.Result;
        if(!result.Cancelled)
        {
            GetCategories();
            //if a category has succesfully been added, it calls the same method which also gets called in the "OnInitializedAsync()"
            await GetCategoriesNav();
        }
    }


    async Task EditCategory(Category category)
    {
        category = await categoryService.EditCategory(category);

        var param = new DialogParameters { ["category"] = category };

        var dialog = DialogService.Show<CategoryDialog>("Edit Category", param);

        DialogResult result = await dialog.Result;
        if (!result.Cancelled)
        {
            GetCategories();
//if a category has succesfully been edited, it calls the same method which also gets called in the "OnInitializedAsync()"
            await GetCategoriesNav();
        }
    }

这是唯一被调用的外部位置，但 CategoryAdministration 继承自 Category 选择器。

4

1 回答 1

0

我假设您有一个管理页面 CategoryAdmin.razor，其中包含使用编辑器打开对话框的按钮 - 类别对话框。

NavCategoriesComponent在该页面中，您有一个显示 NavCategories的组件（我假设称为）。

您单击其中一个按钮并编辑/添加一个类别，但在退出对话框时，NavCategories 组件中的列表不会更新。

您还有一个CategoryService我假设获取类别列表的内容。

在NavCategoriesComponent你的代码看起来像这样：

private List<Category> NavCategories = new List<Category>();
private List<CategoryPage> NavCategoryPages = new List<CategoryPage>();

//OnInit code
       NavCategories = await categoryService.GetCategories();
        NavCategoryPages = await categoryPageService.GetCategoryPages();
        //not required
        await Task.Delay(5000);

然后在您的主要组件中调用以下代码进行添加/编辑：

            GetCategories();
//if a category has succesfully been edited, it calls the same method which also gets called in the "OnInitializedAsync()"
            await GetCategoriesNav();

那么您希望第二次调用更新哪个列表？中的列表是NavCategoriesComponent完全独立的。编辑后调用 GetCategories() 不会更新NavCategoriesComponent. 这只发生在您重新加载页面时。 OnInitializedAsync顾名思义，只运行一次。

如果这是您的基本情况，那么：

  1. 您的List<Category和List<CategoryPage>列表需要位于CategoryService. 现在只有一个版本的真相。
  2. await categoryService.GetCategories()当您需要填充该列表时，请致电获取该列表。
  3. 直接在 中使用列表NavCategoriesComponent。
  4. 给. event_ RecordListChanged_CategoryService
  5. 为该事件注册一个事件处理程序NavCategoriesComponent并调用StateHasChaged该事件。
  6. 每当您从模式对话框中“创建/更新/删除”时，更新CategoryService列表并触发RecordListChanged事件。

你永远不应该手动调用OnInitializedAsync，而且你应该很少需要调用StateHasChanged。

此 Github 存储库包含一个解决方案，该解决方案在旧的 Blazor WeatherReport 应用程序中演示上述原则 - Blazr.Demo.DBNotification

于 2021-11-12T15:50:35.710 回答