razor组件设置属性(传递参数),在被调用组件中呈显组件调用内容
Blazor 应用基于组件。 Blazor 中的组件是指 UI 元素,例如,页面、对话框或数据输入窗体。 组件处理用户事件,并定义灵活的 UI 呈现逻辑。 组件可以嵌套和重用。
组件是内置于 .NET 程序集的 .NET 类,可以作为 NuGet 包进行共享和分发。 组件类通常以 Razor 标记页(文件扩展名为 .razor)的形式编写。
Razor Pages 和 MVC 也使用 Razor。 与围绕请求/响应模型生成的 Razor Pages 和 MVC 不同,组件专门用于处理客户端 UI 逻辑和构成。
以下 Razor 标记演示组件 (Dialog.razor),该组件可以嵌套在另一个组件中:
<div>
<h1>@Title</h1>
@ChildContent
<button onclick="@OnYes">Yes!</button>
</div>
@functions{
[Parameter]
private string Title { get; set; }//组件的属性
[Parameter]
private RenderFragment ChildContent { get; set; }//组件被调用时的所包含的内容
private void OnYes()
{
Console.WriteLine("Write to the console in C#!"+DateTime.Now.ToString());
}
}
对话框的正文内容 (ChildContent
) 和标题 (Title
) 由在其 UI 中调用此组件时提供。 OnYes
是由按钮的 onclick
事件触发的 C# 方法。
在(Index.razor)中使用Dialog.razor对话框组件的设置:
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<dialog Title="Blazor">
@*组件内容*@
Do you want to <i>learn more</i> about Blazor?
</dialog>
在浏览器中访问父级 (Index.razor) 时,将呈现该对话框: