如何与 PageLayout 中的页面交互？答案

【问题标题】：How do I interact with a Page from a PageLayout?如何与 PageLayout 中的页面交互？
【发布时间】：2021-09-11 07:59:42
【问题描述】：

我正在构建我的第一个服务器端 Blazor 应用程序并使用 MudBlazor 组件集以及 MudBlazor Admin UI layout。

布局的一个特点是它有一个不错的面包屑组件，他们已经将其定位在MainLayout.razor Page Layout，如下；

<MudBreadcrumbs Items="_items"></MudBreadcrumbs>
@Body

@code {
    private List<BreadcrumbItem> _items = new List<BreadcrumbItem>
    {
        new BreadcrumbItem("Personal", href: "#"),
        new BreadcrumbItem("Dashboard", href: "/personal/dashboard"),
    };
}

如您所见，MudBreadcrumbs 组件填充了来自 _items 方法的项目，并且两者都位于 PageLayout 的 MainLayout.razor 文件中。

我可以看到页面内容在@Body 占位符处被引用和呈现。到目前为止，我有大约 15 个页面，我想使用面包屑显示每个当前页面的正确详细信息，这意味着每个页面都需要定义自己的 _items 集合。

如何在页面级别创建_items 集合，并使其可供PageLayout 中的MudBreadcrumbs 组件访问？

更新

我最终遇到了这个 SO 问题，结果证明它本质上是相同的 [而且更有趣]。 How can I modify the layout from a blazor page?

它有一个可行的解决方案，该解决方案得到了彻底的解释 - 但是，如果有一种更明显和直接的方法可以在 Blazor 中从页面到页面布局的通信，我将保留这个问题。

【问题讨论】：

标签： blazor blazor-server-side

【解决方案1】：

如何与 PageLayout 中的页面交互？

为每页使用控制器。在布局页面中，使用变量，它将由Controller控制。

【讨论】：

【解决方案2】：

与您在更新中链接到的帖子中的答案类似，但略有不同 + 完整的工作解决方案。

我将使用 Cascading Value 和对象，当您想要更改任何内容时，该对象将调用操作。
我只会使用字符串，但这确实适用于任何其他数据类型/对象。
另请注意，我使用 @bind-value 作为输入，因此它只会在更改时触发事件，而不是在输入时触发。

在 MainLayout.razor 或任何父容器（在我的情况下为 Index.razor）：

@page "/"
@implements IDisposable

<h1>@container.UserInput</h1>
<input @bind-value="container.UserInput" />

<CascadingValue Value="container">
    <CascadingTest></CascadingTest>
</CascadingValue>

@code {
    protected override void OnInitialized()
    {
    testingClass.OnChange += StateHasChanged;
    }

    public YourContainer container= new();


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

YourContainer 类：

public class YourContainer 
{
    private string userInput= "default";
    public string UserInput
    {
        get => this.userInput;
        set
        {
            if (this.userInput == value) return;
            this.userInput= value;
            this.Changed();
        }
    }

    public event Action OnChange;

    public void Changed() => OnChange?.Invoke();
}

最后，子组件：

<label>@containerName.UserInput</label>
<input @bind-value="containerName.UserInput"/>

@code {
    [CascadingParameter]
    YourContainer containerName{ get; set; }
}

【讨论】：