前言

Blazor最重要的是Razor組件和cshtml頁面。兩個最大的區別就是cshtml是完整的html,Razor是不完整的html

微軟Razor 語法官方文檔

我的Blazor基礎語法個人總結

C# Blazor 學習筆記(12)：css樣式設置

C#小輪子：Visual Studio自動編譯Sass文件

基本文件配置

• Components：組件
• Controller：控制器/API
• Layout：布局
• Models：實體對象
• Pages：頁面
• Service：服務/數據庫查詢
• Utils：通用工具

引入Layout組件

語法介紹

@page

路由路徑：可以多路由

@page "/index"
//指向/index路徑
<h1 class="title">Hello, world!</h1>

@code

• @code，聲明代碼空間
  

• xxx.razor.cs 對應文件
  
  
  Tips:partial class即部分class，編譯的時候會組合成一個完整的class

Razor 語法

顯式表達和隱式表達

綁定

簡單綁定

<h1>@Title</h1>
<button  @onclick="TitleBtn">按鈕點擊</button>
<h1>@RangeValue</h1>
@code{public string Title { get; set; } = "我是@Code Title字符串";/// <summary>/// 按鈕事件/// </summary>public void TitleBtn(){Title = "我被函數改變了！";}
}

注意，這里的綁定是單向綁定。不是雙向綁定，雙向綁定需要用到@Bind語法

雙向綁定

<button  @onclick="TitleBtn">按鈕點擊</button>
<input type="range" min="0" max="10" @bind="RangeValue"/>
<h1>@RangeValue</h1>
@code{public decimal RangeValue { get; set; } = 2;/// <summary>/// 按鈕事件/// </summary>public void TitleBtn(){RangeValue++;}
}

帶參數的函數綁定

Blazor 事件處理

解決方案

@οnclick=“@(e=>你的函數))”

<h1>@Title</h1>
<button @onclick="@(e=>TitleBtn2("函數2帶參數按鈕點擊"))">帶參數按鈕點擊</button>@code{public string Title { get; set; } = "我是@Code Title字符串";public void TitleBtn2(string str){Title = str;}
}

依賴注入

依賴注入有兩種，我們這里統一使用cs的注入方式

        [Inject][NotNull]private NavigationManager navigationManager { get; set; }

Blazor的路由

使用

        public void LoginBtn(){Console.WriteLine("登錄");navigationManager.NavigateTo("/index");}