開發環境
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 內容如下 ``` @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="https://www.cnblogs.com/cerl/p/_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 aria-hidden="true">
<use href="https://www.cnblogs.com/cerl/p/#@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
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/112679.html
標籤：.NET Core