英文:
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
<div>
@TrademarkMessage
</div>
@code {
public string TrademarkMessage { get; set; } =
"Doctor Who is a registered trademark of the BBC. " +
"https://www.doctorwho.tv/";
}
Here the value of TrademarkMessage
is provided right in the layout code.
How can I provide it from a page ?
@page "/"
...
答案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; } = "My TradeMark Message";
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
<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();
}
}
And Index:
@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!");
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论