[AspNetCore 3.0] 在RazorPages/MVC 中使用 Blazor (Razor组件)

开发环境

Vs2019 16.3.1 dotnetcore 3.0

一、开始

新建webapp项目

dotnet new webapp -o projectname

或Vs 中新建项目选择 Web应用程序。

在StartUp.cs 中增加两处配置。

ConfigureServices 方法：

 public void ConfigureServices(IServiceCollection services)

        {

            services.AddRazorPages();

            services.AddServerSideBlazor();//启用服务端blazor支持

        }

Configure 方法

 app.UseEndpoints(endpoints =>

            {

                endpoints.MapRazorPages();

                endpoints.MapBlazorHub();// js,singalr

            });

使用Vs打开项目，默认页面和目录暂时不动，新增文件夹 RazorComponents
在项目根目录下，右键菜单添加-新建项-Razor组件，命名_Imports.razor，用于导入razor组件所需命名空间（作用类似mvc中的_ViewImports.cshtml）。

此文件对同级或子级文件夹中的*.razor生效，将内容替换为
```
@using Microsoft.AspNetCore.Components

@using Microsoft.AspNetCore.Components.Web;
```
在RazorComponents 文件夹上右键菜单添加-新建项-Razor组件，命名CounterButton.razor。

二、组件 CounterButton.razor

说明：

呈现为html button 元素 ,显示当前计数。
用户单击按钮时回传给服务端，将计数+1，随后更新客户端文本。
CounterButton.razor

.razor文件本质为一个继承ComponentBase，名为CounterButton的c#类(全名为项目名称.文件夹.CounterButton)。

打开CounterButton.razor 文件可以看到，@code指令(预览6之前的@functions)将文件分为两部分，上部为html标签，下部即为CounterButton类的实现部分。

CounterButton.razor

Component

@code {//可脑补为 public class CounterButton:ComponentBase{
//c#代码，属性、方法。。
}
```
4. 处理c#代码：
增加属性 Count，增加方法 Click
```
[Parameter]// 用于传递参数
public int Count { get; set; }
void Click() {
Count++;
}
```
5. 处理Html标记, CounterButton.razor 内容如下
```

Count:@Count

@code {
[Parameter]
public int Count { get; set; }
void Click() {
Count++;
}
}
```
此时组件代码已完成，接下来转到Pages目录下，处理.cshtml

三、在.cshtml中使用

打开Pages/Index.cshtml，在你想要显示组件的地方插入代码

@(await Html.RenderComponentAsync<RazorComponents.CounterButton>(RenderMode.Server))
- RenderMode 说明
- 如果在Pages/_ViewImports.cshtml 加入using projectname.RazorComponents 调用如下
  
  @(await Html.RenderComponentAsync<CounterButton>(RenderMode.Server))
打开Pages/Shared/_Layout.cshtml, 加入
```
<script src="_framework/blazor.server.js"></script>
```
- 保证此脚本在组件render 位置之后加入
启动项目，打开浏览器，点击 button 查看效果。
- 打开浏览器调试窗口-networks选项卡，其中以_blazor开头的即为组件使用的signalR连接

四、使用组件参数

在之前的组件代码中有这样一行

  [Parameter]// 用于传递参数

  public int Count { get; set; }

可以用来设置初始化参数,如果在另一个.razor 文件中，我们可以这样设置 Count的初始值

<CounterButton Count="2" />

但是，使用Html.RenderComponentAsync 时， RenderMode 为Server或ServerPrerendered 不支持参数。RenderMode.Static 仅输出静态Html（无法与服务端交互）。

github 上已有计划

在目前阶段，我们可以使用一个无参数的razor组件过渡一下。

在项目中新增razor组件 ‘RazorPanel.razor’,为了演示，将此组件加到项目根目录下。
代码如下

    //根据业务，将需要组合的razor组件放在一个组件内，可以方便的处理参数及组件间的关系

     <CounterButton Count="3"/>// 在_Imports.razor 中加入@using projectname.RazorComponents 或使用全名<projectname.RazorComponents.CounterButton             Count="3"/>

修改组件调用

@(await Html.RenderComponentAsync<RazorPanel>(RenderMode.Server))

五直接继承ComponentBase 实现组件

前面说过，组件是继承 ComponentBase的，因此可以用一个c#代码文件实现组件,以下以Icon为例。

此Icon组件使用svg use方式，对应的js 定义来自[iconfont.cn]

新建组件 'Icon.razor'.
新建c#类 'Icon.razor.cs'.

  public class IconBase: Microsoft.AspNetCore.Components.ComponentBase

    {

        [Parameter]

        public string IconName { get; set; } = "icon-user";

        [Parameter]

        public string IconClass { get; set; } = "icon";

    }

文件名可以随意，使用*.razor.cs 格式 vs会帮你将.cs和对应的.razor组织在一起。

打开 Icon.razor，清除自动生成的内容，在第一行加入 @inherits IconBase

完整代码

@inherits IconBase

<svg class="@IconClass" aria-hidden="true">

    <use  href="#@IconName"></use>

</svg>

<style scoped>

    .icon {

        height: 1em;

        /* 通过设置 font-size 来改变图标大小 */

        width: 1em;

        /* 图标和文字相邻时，垂直对齐 */

        vertical-align: -0.15em;

        /* 通过设置 color 来改变 SVG 的颜色/fill */

        fill: currentColor;

        /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示

            normalize.css 中也包含这行 */

        overflow: hidden;

    }

</style>

目前.razor 自动生成的类为 class Icon 而不是 partial class Icon ,因此.cs 文件里的类名不能是Icon。也只能通过 @inherits 关联 .razor 里的html和c#代码。
.razor 看起来和vue组件有点类似
@if @foreach 等指令见文档
use标签中使用 href

在Pages/Shared/_Layout.cshtml 引入从[iconfont.cn]下载的js（通常为 iconfont.js）;
在 RazorPanel.razor 中加入Icon ：`

六组件嵌套

razor组件上可以使用ChildContent 属性嵌套其他组件，比如需要在CounterButton中加入一个Icon.

在CounterButton.razor 中增加一个属性

[Parameter]

public RenderFragment ChildContent { get; set; }

修改html 部分

<button @onclick="Click">

@ChildContent

Count:@Count

3. 打开RazorPanel.razor，修改 CounterButton 标记

或省略 ` <ChildContent>`

```

七组件引用

在想引用的子组件上定义 @ref ="组件引用名"，在当前组件上定义同名字段捕获引用。

比如在 RazorPanel.razor 中，给CounterButton 增加属性

<CounterButton Count="3" @ref="button" > <Icon IconName="icon-user" /> @button.Count </CounterButton>

@code

CounterButton button;//自动捕获 @ref="button" 的CounterButton 实例

其他

手工处理html标记

使用 RenderTreeBuilder 上的方法处理标记，注意序号。

RenderFragment 委托，ComponentBase.BuildRenderTree 方法

在cshtml 上渲染.razor 组件时，使用类似 RazorPanel 之类的容器来处理参数传递。
Microsoft.AspNetCore.Components.* 包括一些内置组件（Forms,Input*,Layout...)
官方模板 dotnet new -i Microsoft.AspNetCore.Blazor.Templates