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

開發環境

Vs2019 16.3.1 dotnetcore 3.0

1、開始

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。

2、 組件 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

3、在.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鏈接

4、使用組件參數

在以前的組件代碼中有這樣一行

[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
   完整代碼

@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

1. 在Pages/Shared/_Layout.cshtml 引入從[iconfont.cn]下載的js（一般爲 iconfont.js）;
2. 在 RazorPanel.razor 中加入Icon ：`

六 組件嵌套

razor組件上可使用ChildContent 屬性嵌套其餘組件，好比須要在CounterButton中加入一個Icon.

1. 在CounterButton.razor 中增長一個屬性
   [Parameter] public RenderFragment ChildContent { get; set; }

2. 修改html 部分
   <button @onclick="Click"> @ChildContent Count:@Count </button>

3. 打開RazorPanel.razor，修改 CounterButton 標記
   <CounterButton Count="3"> <ChildContent> <Icon IconName="icon-user" /> </ChildContent> </CounterButton>
   或 省略 <ChildContent>
<CounterButton Count="3" > <Icon IconName="icon-user" /> </CounterButton>

七 組件引用

在想引用的子組件上定義 @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