开发环境

Vs2019 16.3.1 dotnetcore 3.0

一、开始

1. 新建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 
            });

1. 使用Vs打开项目，默认页面和目录暂时不动， 新增文件夹 RazorComponents

2. 在项目根目录下，右键菜单添加-新建项-Razor组件，命名_Imports.razor，用于导入razor组件所需命名空间（作用类似mvc中的_ViewImports.cshtml）。
   此文件对同级或子级文件夹中的*.razor生效， 将内容替换为
   @using Microsoft.AspNetCore.Components @using Microsoft.AspNetCore.Components.Web;

3. 在RazorComponents 文件夹上 右键菜单添加-新建项-Razor组件，命名CounterButton.razor。

二、 组件 CounterButton.razor

说明：

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

3. CounterButton.razor
   .razor文件本质为一个继承ComponentBase，名为CounterButton的c#类(全名为项目名称.文件夹.CounterButton)。
   打开CounterButton.razor 文件可以看到，@code指令(预览6之前的@functions)将文件分为两部分，上部为html标签，下部即为CounterButton类的实现部分。
   CounterButton.razor

   <h3>Component</h3>
   @code {//可脑补为 public class CounterButton:ComponentBase{
   //c#代码，属性、方法。。
   }

4. 处理c#代码：
   增加属性 Count，增加方法 Click
   [Parameter]// 用于传递参数 public int Count { get; set; } void Click() { Count++; }

5. 处理Html标记, CounterButton.razor 内容如下
   <button @onclick="Click" > Count:@Count </button> @code { [Parameter] public int Count { get; set; } void Click() { Count++; } }
   此时组件代码已完成，接下来转到Pages目录下，处理.cshtml

三、在.cshtml中使用

1. 打开Pages/Index.cshtml，在你想要显示组件的地方插入代码
   @(await Html.RenderComponentAsync<RazorComponents.CounterButton>(RenderMode.Server))

   • RenderMode 说明
   • 如果在Pages/_ViewImports.cshtml 加入using projectname.RazorComponents 调用如下
     @(await Html.RenderComponentAsync<CounterButton>(RenderMode.Server))
2. 打开Pages/Shared/_Layout.cshtml, 加入
   <script src="_framework/blazor.server.js"></script>
   • 保证此脚本在组件render 位置之后加入
3. 启动项目，打开浏览器，点击 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组件过渡一下。

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

    //根据业务，将需要组合的razor组件放在一个组件内，可以方便的处理参数及组件间的关系
     <CounterButton Count="3"/>// 在_Imports.razor 中加入@using projectname.RazorComponents 或使用全名<projectname.RazorComponents.CounterButton             Count="3"/>

1. 修改组件调用
   @(await Html.RenderComponentAsync<RazorPanel>(RenderMode.Server))

五 直接继承ComponentBase 实现组件

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

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

1. 新建组件 'Icon.razor'.
2. 新建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组织在一起。

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