如何从页面向布局参数提供值?

huangapple go评论70阅读模式
英文:

How to provide value for layout's parameters from page?

问题

以下是翻译好的部分:

考虑下面的布局:

@inherits LayoutComponentBase
@layout ProductionsLayout

@Body

<div>
    @TrademarkMessage
</div>

@code {
    public string TrademarkMessage { get; set; } = 
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/";
}

这里的TrademarkMessage的值直接在布局代码中提供。

我如何从页面中提供它?

@page "/"
...
英文:

Consider the layout below:

@inherits LayoutComponentBase
@layout ProductionsLayout

@Body

&lt;div&gt;
    @TrademarkMessage
&lt;/div&gt;

@code {
    public string TrademarkMessage { get; set; } = 
        &quot;Doctor Who is a registered trademark of the BBC. &quot; +
        &quot;https://www.doctorwho.tv/&quot;;
}

Here the value of TrademarkMessage is provided right in the layout code.

How can I provide it from a page ?

@page &quot;/&quot;
...

答案1

得分: 1

你需要使用通知模式的一个版本。

首先是一个数据类:

public class LayoutData
{
    public string TrademarkMessage { get; private set; } = "My TradeMark Message";

    public event EventHandler? DataChanged;

    public void SetTradeMarkMessage(string message)
    {
        this.TrademarkMessage = message;
        this.DataChanged?.Invoke(this, EventArgs.Empty);
    }
}

布局部分:

@using SO76837241.Data;
@inherits LayoutComponentBase

<PageTitle>SO76837241</PageTitle>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <span>@_layoutData.TrademarkMessage</span>

            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <CascadingValue Value="_layoutData" IsFixed>
                @Body
            </CascadingValue>
        </article>
    </main>
</div>

@code {
    private LayoutData _layoutData = new();

    protected override void OnInitialized()
    {
        // As this is internal to the component we don't need to de-register
        _layoutData.DataChanged += (object? sender, EventArgs e) => this.StateHasChanged();
    }
}

和索引部分:

@page "/"
@using SO76837241.Data;

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

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

@code {
    [CascadingParameter] private LayoutData? _layoutData { get; set; }

    protected override void OnInitialized()
    {
        if (_layoutData is not null)
            _layoutData.SetTradeMarkMessage("Total Bull!");
    }
}
英文:

You need to use a version of the notification pattern.

First a data class:

public class LayoutData
{
    public string TrademarkMessage { get; private set; } = &quot;My TradeMark Message&quot;;

    public event EventHandler? DataChanged;

    public void SetTradeMarkMessage(string message)
    {
        this.TrademarkMessage = message;
        this.DataChanged?.Invoke(this, EventArgs.Empty);
    }
}

the Layout:

@using SO76837241.Data;
@inherits LayoutComponentBase

&lt;PageTitle&gt;SO76837241&lt;/PageTitle&gt;

&lt;div class=&quot;page&quot;&gt;
    &lt;div class=&quot;sidebar&quot;&gt;
        &lt;NavMenu /&gt;
    &lt;/div&gt;

    &lt;main&gt;
        &lt;div class=&quot;top-row px-4&quot;&gt;
            &lt;span&gt;@_layoutData.TrademarkMessage&lt;/span&gt;

            &lt;a href=&quot;https://docs.microsoft.com/aspnet/&quot; target=&quot;_blank&quot;&gt;About&lt;/a&gt;
        &lt;/div&gt;

        &lt;article class=&quot;content px-4&quot;&gt;
            &lt;CascadingValue Value=&quot;_layoutData&quot; IsFixed&gt;
                @Body
            &lt;/CascadingValue&gt;
        &lt;/article&gt;
    &lt;/main&gt;
&lt;/div&gt;

@code {
    private LayoutData _layoutData = new();

    protected override void OnInitialized()
    {
        // As this is internal to the component we don&#39;t need to de-register
        _layoutData.DataChanged += (object? sender, EventArgs e) =&gt; this.StateHasChanged();
    }
}

And Index:

@page &quot;/&quot;
@using SO76837241.Data;

&lt;PageTitle&gt;Index&lt;/PageTitle&gt;

&lt;h1&gt;Hello, world!&lt;/h1&gt;

Welcome to your new app.

&lt;SurveyPrompt Title=&quot;How is Blazor working for you?&quot; /&gt;

@code {
    [CascadingParameter] private LayoutData? _layoutData { get; set; }

    protected override void OnInitialized()
    {
        if (_layoutData is not null)
            _layoutData.SetTradeMarkMessage(&quot;Total Bull!&quot;);
    }
}

huangapple
  • 本文由 发表于 2023年8月4日 23:17:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/76837241.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定