Blazor component 若需要使用 Service，可透過 DI 注入。 像是 Blazor 範本內就有一個 Service。 using System; using System.Linq; using System.Threading.Tasks; namespace WebApplication1.Data { public class WeatherForecastService { private static string[] Summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" }; public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate) { var rng = new Random(); return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast { Date = startDate.AddDays(index), TemperatureC = rng.Next(-20, 55), Summary = Summaries[rng.Next(Summaries.Length)] }).ToArray()); } } } 這個 Service 會在 Startup.

Blazor component 在未加掛 @page directive 時只能像 HTML element 一樣嵌入頁面使用。 如果要能直接當成頁面透過 Routing 訪問，可在 Blazor component 最前面加掛 @page directive，指定 Blazor component 的 routing。 @page "/counter" ... 像是下面這樣撰寫。 @page "/counter" <h1>Counter</h1> <p>Current count: @currentCount</p> <button class="btn btn-primary" @onclick="@IncrementCount">Click me</button> @code { int currentCount = 0; [Parameter] private int IncrementAmount { get; set; } = 1; void IncrementCount() { currentCount += IncrementAmount; } } 就可以透過 Routing 導到該 Blazor component，像是範本內的 Counter 就可以透過 https://localhost:5001/counter 訪問。

若想讓 Blazor component 在畫面上使用時帶上參數做些設定，可以為 Component 加上 Parameter。 只要在 code 區塊中加入帶有 ParameterAttribute 的 property 即可。 ... @code{ ... [Parameter] private int IncrementAmount { get; set; } = 1; ... } 在畫面上就可以透過 Component parameter 對 Component 做些設定。 ... <Counter IncrementAmount="10" /> ... 像是 Blazor 範本的 Counter component 可以改成像下面這樣: @page "/counter" <h1>Counter</h1> <p>Current count: @currentCount</p> <button class="btn btn-primary" @onclick="@IncrementCount">Click me</button> @code { int currentCount = 0; [Parameter] private int IncrementAmount { get; set; } = 1; void IncrementCount() { currentCount += IncrementAmount; } } 加入 IncrementAmount parameter 供外部設定，IncrementCount 方法會依照 IncrementAmount 的值去增加 currentCount。

Blazor component 是 Blazor 的元件，類似控制項，是 Blazor 中可重複使用的最小單位。 Blazor component 以 razor 為副檔名，它跟 ASP.NET MVC 的 Razor page 很像，會用 HTML 與 Razor 語法排版畫面。程式碼放在 @code {…} 內，程式碼可定義 Component 會用到的變數與方法，在畫面排版那邊可取用程式碼區塊中定義的變數與方法。 這邊可參閱 Blazor 範本的 Counter 程式。程式碼那邊定義了一個 currentCount 的變數，以及一個 IncrementCount 方法，IncrementCount 方法只是很單純的將 currentCount 變數值加一。畫面這邊透過 @onclick="@IncrementCount" 指定畫面元素被按下時調用 IncrementCount 方法，並透過 @currentCount 將變數的值呈現在畫面上。 <h1>Counter</h1> <p>Current count: @currentCount</p> <button class="btn btn-primary" @onclick="@IncrementCount">Click me</button> @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } } Blazor component 做好後，可以直接將它當成 HTML element 使用，像是要將剛剛建立的 Counter component 加入使用，可以像下面這樣撰寫:

要運行 Blazor，可先安裝 .Net Code 3.0 SDK，然後安裝 Blazor 範本。 dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview6.19307.2 再來透過範本建立 client 程式。 dotnet new blazor -o $project 或是 Server side 程式。 dotnet new blazorserverside -o $application 透過範本建立好後將程式運行起來。 dotnet run 透過瀏覽器訪問 http://localhost:5000 或是 https://localhost:5001，即可看到 Blazor 運行起來的樣子。