发布：2023/1/20 11:13:00作者：管理员 来源：本站 浏览次数：956

先决条件

按照以下内容的“配置”部分中的指南操作：

Blazor Server：将可路由和不可路由的 Razor 组件集成到 Razor Pages 和 MVC 应用中。

Blazor WebAssembly：将托管Blazor WebAssembly解决方案中的组件集成到 RazorRazor Pages 和 MVC 应用中。

组件标记帮助程序

若要从页面或视图呈现组件，请使用组件标记帮助程序（<component> 标记）。

备注

.NET 5.0 或更高版本的 ASP.NET Core支持将Razor组件集成到Razor托管Blazor WebAssembly应用中的 Pages 和 MVC 应用。

RenderMode 配置组件是否：

在页面中预呈现。

在页面上呈现为静态 HTML，或者包含从用户代理启动 Blazor 应用所需的信息。

Blazor WebAssembly 下表显示了应用呈现模式。

呈现模式 描述

WebAssembly 呈现应用用于在浏览器中加载时包含交互式组件的标记 Blazor WebAssembly 。 不预呈现组件。 通过此选项，可以在不同的页面轻松呈现各种 Blazor WebAssembly 组件。

WebAssemblyPrerendered 将组件预呈现到静态 HTML 中，并包括应用标记 Blazor WebAssembly ，供以后在浏览器中加载时使组件交互。

Blazor Server 下表显示了应用呈现模式。

呈现模式 描述

ServerPrerendered 在静态 HTML 中呈现组件，并包含 Blazor Server 应用的标记。 用户代理启动时，此标记用于启动 Blazor 应用。

Server 呈现 Blazor Server 应用的标记。 不包括组件的输出。 用户代理启动时，此标记用于启动 Blazor 应用。

Static 将组件呈现为静态 HTML。

其他特征包括：

允许多个组件标记帮助程序呈现多个 Razor 组件。

应用启动后，无法动态呈现组件。

尽管页面和视图可以使用组件，但反过来则不行。 组件无法使用特定于视图和页面的功能，例如分部视图和部分。 若要在组件中使用分部视图中的逻辑，请将分部视图逻辑分解到组件中。

不支持从静态 HTML 页面呈现服务器组件。

以下组件标记帮助程序在应用中ServerPrerendered的页面或视图中Blazor Server呈现Counter组件：

CSHTML

复制

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@using {APP ASSEMBLY}.Pages

...

<component type="typeof(Counter)" render-mode="ServerPrerendered" />

前面的示例假定 Counter 组件位于应用的 Pages 文件夹中。 占位符 {APP ASSEMBLY} 是应用的程序集名称（例如，托管 Blazor 解决方案中的 @using BlazorSample.Pages 或 @using BlazorSample.Client.Pages）。

组件标记帮助程序还可以将参数传递给组件。 以下面设置复选框标签颜色和大小的 ColorfulCheckbox 组件为例：

razor

复制

<label style="font-size:@(Size)px;color:@Color">

   <input @bind="Value"

          id="survey"

          name="blazor"

          type="checkbox" />

   Enjoying Blazor?

</label>

@code {

   [Parameter]

   public bool Value { get; set; }

   [Parameter]

   public int Size { get; set; } = 8;

   [Parameter]

   public string Color { get; set; }

   protected override void OnInitialized()

   {

       Size += 10;

   }

}

Size (int) 和 Color (string) 组件参数可由组件标记帮助程序设置：

CSHTML

复制

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@using {APP ASSEMBLY}.Shared

...

<component type="typeof(ColorfulCheckbox)" render-mode="ServerPrerendered"

   param-Size="14" param-Color="@("blue")" />

前面的示例假定 ColorfulCheckbox 组件位于应用的 共享文件夹 中。 占位符 {APP ASSEMBLY} 是应用的程序集名称（例如 @using BlazorSample.Shared）。

以下 HTML 在页面或视图中呈现：

HTML

复制

<label style="font-size:24px;color:blue">

   <input id="survey" name="blazor" type="checkbox">

   Enjoying Blazor?

</label>

传递带引号的字符串需要 显式 Razor 表达式，如前面的示例中所示 param-Color 。 Razor 针对 string 类型值的分析行为不适用于 param-* 属性，因为该属性是 object 类型。

支持所有类型的参数，但以下参数除外：

泛型参数。

不可序列化的参数。

集合参数中的继承。

在应用外部或延迟加载的程序集中 Blazor WebAssembly 定义其类型的参数。

用于接收子内容的 RenderFragment 委托（例如 param-ChildContent="..."）。 对于这种情况，我们建议创建一个 Razor 组件 (.razor)，该组件使用要传递的子内容引用要呈现的组件，然后使用组件标记帮助程序从页面或视图调用 Razor 组件。

参数类型必须是 JSON 可序列化的，这通常意味着该类型必须具有默认构造函数和可设置的属性。 例如，可以指定SizeColor上述示例中的值，因为类型以及Color基元类型 (int和string) ，ON 序列化程序支持JS这些类型Size。

以下示例将一个类对象传递给组件：

MyClass.cs:

C#

复制

public class MyClass

{

   public MyClass()

   {

   }

   public int MyInt { get; set; } = 999;

   public string MyString { get; set; } = "Initial value";

}

类必须具有一个无参数的公共构造函数。

Shared/MyComponent.razor:

razor

复制

<h2>MyComponent</h2>

<p>Int: @MyObject.MyInt</p>

<p>String: @MyObject.MyString</p>

@code

{

   [Parameter]

   public MyClass MyObject { get; set; }

}

Pages/MyPage.cshtml:

CSHTML

复制

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@using {APP ASSEMBLY}

@using {APP ASSEMBLY}.Shared

...

@{

   var myObject = new MyClass();

   myObject.MyInt = 7;

   myObject.MyString = "Set by MyPage";

}

<component type="typeof(MyComponent)" render-mode="ServerPrerendered"

   param-MyObject="@myObject" />

前面的示例假定 MyComponent 组件位于应用的 共享文件夹 中。 占位符 {APP ASSEMBLY} 是应用的程序集名称（例如 @using BlazorSample 和 @using BlazorSample.Shared）。 MyClass 在应用的命名空间中。

其他资源

ComponentTagHelper

ASP.NET Core 中的标记帮助程序

ASP.NET Core Razor 组件

建议的内容

ASP.NET Core 中的持久化组件状态标记帮助程序

了解如何在预呈现组件时使用 ASP.NET Core 持久化组件状态标记帮助程序持久保存状态。

ASP.NET Core 的类库中的可重用 Razor UI

说明如何使用 ASP.NET Core 中类库的分部视图创建可重用 Razor UI。

ASP.NET Core 中的 Razor Pages 路由和应用约定

了解路由和应用模型提供程序约定如何帮助控制页面路由、发现和处理。

ASP.NET Core Blazor 教程

了解如何使用本文中所列的教程生成 Blazor 应用。

ASP.NET Core 内置标记帮助程序

了解 ASP.NET Core 内置标记帮助程序如何提高生产力。

ASP.NET Core Blazor

了解 ASP.NET Core Blazor，用户可用它在 ASP.NET Core 应用中使用 .NET 生成交互式客户端 Web UI。

预呈现和集成 ASP.NET Core Razor 组件

了解 Blazor 应用的 Razor 组件集成方案，包括在服务器上预呈现 Razor 组件。

ComponentTagHelper 类 (Microsoft.AspNetCore.Mvc.TagHelpers)

呈现 Razor 组件的 A TagHelper 。