Blazor 1 開發環境的安裝與設定
安裝與設定
在這篇文章所使用的 Visual Studio 2017 為 15.9.1 版本，因此，將會建立起 Blazor 0.7.0 的專案；首先，請執行 Visual Studio Installer 這個程式，並且點選 [修改] 按鈕。
請在 [工作負載] 勾選 [.NET Core 跨平台開發] 項目，這樣會進行安裝 NET Core 2.1 SDK
請在 [工作負載] 勾選 [ASP.NET 與網頁程式開發] 項目
最後，點選右下角的 [修改] 按鈕，開啟進行 Blazor 開發環境所需要的基本套件。
一旦相關 Blazor 開發環境所需要的基本套件安裝完成之後，還需要安裝一個 Blazor 的 Visual Studio 市集 Marketplace 擴充功能套件，請使用瀏覽器打開 ASP.NET Core Blazor Language Services 網頁，下載安裝這個 Viusal Studio 擴充功能。
若想要使用 Visual Studio Code 來進行開發 Blazor 專案，需要安裝 dotnet 命令列下使用的專案樣板，因此，打開 [命令提示字元視窗] ，輸入底下命令
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
建立測試專案
若已經將 Blazor 開發工具安裝與設定完成之後，現在可以開始建立第一個 Blazor 開發專案。
- 啟動 Visual Studio 2017
- 點選功能表的 [檔案] > [新增] > [專案] 功能表選項
- 在 [新增專案] 對話窗中左邊區域，選擇 [已安裝] > [Visual C#] > [Web] > [ASP.NET Core Web 應用程式]
- 在對話窗的下方的 [名稱] 欄位中，輸入這個練習專案的名稱 BlazorFirstTime
- 在對話窗的下方的 [位置] 欄位中，選擇這個專案要儲存的檔案路徑
- 最後點選對話窗的右下方 [確定] 按鈕
- 在 [新增 ASP.NET Core Web 應用程式] 對話窗左上方區域，在第一個下拉選單，選擇 [.NET Core] 在第二個下拉選單，請選擇最新的 ASP.NET Core 版本，在現在這個時間點，可以選擇 [ASP.NET Core 2.1]
- 在對話窗中間區域，請點選 [Blazor] 這個項目
- 最後點選對話窗的右下方 [確定] 按鈕
執行 Blazor 專案
請按下 [Ctrl + F5] 按鈕，開始執行這個 Blazor 專案，此時，瀏覽器將會開啟，顯示這個 Blazor 專案所設計的頁面，如下圖所示。在這個專案樣板所建立的 Blazor 專案，將會展示三個透過 Blazor 元件 Component 所設計的功能，分別是：Home, Counter, Fetch Data。
Blazor 專案架構
現在，請在 Visual Studio 的方案總管視窗上，來檢視 Blazor 專案樣板所建立的專案，是提供了那些檔案內容，以便可以做到上面的網頁效果；從下面方案總管螢幕截圖上，可以看到有兩個資料夾，Pages 資料夾，這裡是要存放 Blazor 元件 Component 的地方，這些元件檔案都是 Razor 類型的檔案，當 Blazor 專案建置成功之後，每個元件檔案 (.cshtml) 將會產生出 C# 類別；第二個資料夾則是 Shared 資料夾，這裡將會存放著共用檔案之用，例如，整個頁面的版面配置 Layout 用的 MainLayout.cshtml 與最左方的功能表選項 NavMenu.cshtml 。
對於該網頁會用到的靜態檔案，如 CSS, JavaScript, 圖片等等，將都會存放在 wwwroot 這個節點之內。而在專案根目錄與 Page 目錄下，都會看到有 _ViewImports.cshtml 這個檔案，其為 Razor 共用指示詞，這對於許多檢視都會用到共用的指示詞，可以定義在這個 _ViewImports.cshtml 檔案中，例如：
@addTagHelper, @removeTagHelper, @tagHelperPrefix, @using, @model, @inherits, @inject；最後兩個檔案，那就是 Programs.cs 與 Startup.cs 檔案，這兩個檔案與 ASP.NET Core 專案中的同樣的檔案，將會提供同樣的服務與功能。
對於這個專案的設定檔案，也是相當的精簡，使用滑鼠右鍵點選該專案的節點，選擇 [編輯 BlazorFirstTime.csproj]，會出現下面的 XML 內容；在這個 .csproj 檔案內，加入了兩個參考套件： Microsoft.AspNetCore.Blazor.Browser 與 Microsoft.AspNetCore.Blazor.Build ，這兩個套件則是要在開發 Blazor 專案時候會用的。
BlazorFirstTime.csproj 檔案<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
<RunCommand>dotnet</RunCommand>
<RunArguments>blazor serve</RunArguments>
<LangVersion>7.3</LangVersion>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.7.0" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.7.0" PrivateAssets="all" />
<DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.7.0" />
</ItemGroup>
</Project>
Blazor 應用程式啟動流程
現在來看看 Blazor 專案的程式進入點 Program Entry Point ，也就是 Program.cs 檔案，如同 .NET Core 的專案相同，Blazor 專案的程式進入點也是 Main 這個靜態方法，而且在這裡比起 ASP.NET Core 類型專案，顯得更加的精簡，只要在使用 UseBlazorStartup 這個泛型方法，就可以開始啟動與執行 Blazor 專案了。
Program.cspublic class Program
{
public static void Main(string[] args)
{
CreateHostBuilder(args).Build().Run();
}
public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) =>
BlazorWebAssemblyHost.CreateDefaultBuilder()
.UseBlazorStartup<Startup>();
}
同樣的，Blazor 一樣使用 OWIN 框架來設定這個專案的運作與起的功能，不過，可以看到，在底下的 Startup.cs 這個檔案中，程式碼也是相當的精簡，若要設定 .NET Core IoC 容器 Container 的型別註冊，也就是自己開發的抽象介面與具體實作類別對應，可以在 ConfigureServices 這個方法內來執行相關的陳述式。
Startup.cspublic class Startup
{
public void ConfigureServices(IServiceCollection services)
{
}
public void Configure(IBlazorApplicationBuilder app)
{
app.AddComponent<App>("app");
}
}
對於根目錄下的 App.cshtml 檔案，在這裡所進行宣告的這些東西是暫時的，之後將會把這裡的宣告移動到 Program.cs ，因此，可以忽略掉這個檔案內容。
當 Blazor 專案啟動之後，可以透過瀏覽器來執行 Blazor 專案的應用程式，預設的開啟網頁將會位於 [wwwroot] 資料夾內的 index.html 檔案，底下為這個檔案的內容。在這裡除了對於網頁畫面的設計使用到 bootstrap 功能，最重要的是這裡會執行 blazor.webassembly.js 這個 JavaScript，這個檔案將會於建置 Blazor 專案的時候會產生出來，所以，一旦 Blazor 專案建置完成之後，可以在方案總管視窗中，點選工具列上的 [顯示所有檔案] 按鈕，就可以在 [bin] > [Debug] > [netstandard2.0] > [dist] > [_framework] 目錄下看到這個檔案。
這個 blazor.webassembly.js JavaScript 將會下載 blazor.boot.json 這個檔案，這裡將會描述 Blazor 專案的 .NET 組件的程式進入點，以及會參考到那些其他 .NET 組件：
{"main":"BlazorFirstTime.dll","entryPoint":"BlazorFirstTime.Program::Main","assemblyReferences":["Microsoft.AspNetCore.Blazor.Browser.dll","Microsoft.AspNetCore.Blazor.dll","Microsoft.AspNetCore.Blazor.TagHelperWorkaround.dll","Microsoft.Extensions.DependencyInjection.Abstractions.dll","Microsoft.Extensions.DependencyInjection.dll","Microsoft.JSInterop.dll","Mono.WebAssembly.Interop.dll","mscorlib.dll","System.Core.dll","System.dll","System.Net.Http.dll","BlazorFirstTime.pdb"],"cssReferences":[],"jsReferences":[],"linkerEnabled":true} ，透過這個檔案的描述，便會開始逐一將這些 .NET 組件 Assembly 檔案下載到瀏覽器本地端。
想要看到開啟一個 Blazor 網頁的時候，會下載來些內容與檔案，可以在瀏覽器下按下 [F12] 按鈕，切換到 [網路] 標籤頁次，將會看如下面截圖的更加詳盡的資訊。blazor.webassembly.js 也會下載 mono.wasm 檔案，這是一個 Mono 框架，使用 Wasm 設計出來的 .NET CLR 執行環境，有了這個檔案，就可以開始執行 blazor.boot.json 所提到的各個 .NET 組件 Assembly 檔案了。
因此，Blazor 並不是為了要能夠讓 C# 程式語言可以在網頁上執行，而把 C# 程式語言轉換成為 JavaScript 程式語言，而是把 Blazor 專案內的所有 .NET 組件檔案，透過使用 Wasm 開發出來的 .NET CLR 環境，直接在瀏覽器上執行 .NET 的程式碼；這與微軟之前的 Silverlight 開發框架有所不同，因為想要在瀏覽器上執行 Silverlight 的程式，必須要能夠在瀏覽器上安裝一個 Silverlight 插件，才能夠執行 Silverlight 的程式，而 Blazor 開發出來的程式，則不需要安裝任何插件到瀏覽器上，就可以直接執行 .NET C# 程式碼。
一旦 Blazor 應用程式啟動完成之後，將會透過 DOM 搜尋網頁上的 App 標籤 Tag，將第一個要顯示的 Blazor 元件所產生的相關網頁內容，替換到 App 標籤的 Loading... 文字，所以，當 Blazor 顯示完成之後，將會看到如下圖的 HTML 元素出現在網頁上。
index.html 檔案內容<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>BlazorFirstTime</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>Loading...</app>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
Index.cshtml 是個 Razor 檔案，透過 Razor 語法來嵌入到 HTML 標記宣告語言內，就可以在這裡撰寫 C# 程式語言了。
Index.cshtml@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
在這個由專案樣板產生的範例專案中，提供了三個由 Blazor 元件所設計出來的畫面，第一個元件 Index.cshtml 則是說明如何使用元件
第二個元件則是 Counter.cshtml 將會展示如何撰寫出一個按鈕元素，並且使用 C# 程式語言來設計該按鈕的點選事件，在這以往網頁應用程式開發環境下，一定需要透過 JavaScript 程式語言的呼叫，才能夠完成這樣的需求，如今，透過 Blazor 的技術，可以使用 C# 程式語言就可以直接做到了。
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>
@functions {
int currentCount = 0;
void IncrementCount()
{
currentCount++;
}
}
最後一個 Blazor 元件為 FetchData.cshtml ，在這裡將會說明如何使用 Blazor 的生命週期事件，當這個元件已經準備好了，將會觸發 OnInitAsync 非同步事件，因此，可以在這個事件內使用相依性注入設計模式，取得 HttpClient 這個類別實作物件，進行網路資源存取，並且配合 Razor 語法將這抓取到遠端 JSON 資料，把這些集合物件顯示在瀏覽器上。
@page "/fetchdata"
@inject HttpClient Http
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@functions {
WeatherForecast[] forecasts;
protected override async Task OnInitAsync()
{
forecasts = await Http.GetJsonAsync<WeatherForecast[]>("sample-data/weather.json");
}
class WeatherForecast
{
public DateTime Date { get; set; }
public int TemperatureC { get; set; }
public int TemperatureF { get; set; }
public string Summary { get; set; }
}
}
更多關於 Blazor 教學影片，可以參考 Blazor 教學影片播放清單 或者 Blazor 快速體驗教學影片撥放清單。也歡迎訂閱本 .NET / Blazor / Xamarin.Forms 影片頻道 。
Blazor 提供可以使用 .NET C# 程式語言來進行開發出網頁 SAP 類型的應用程式，他與微軟前一代 Silverlight 工具不同處在於使用 Blazor 開發出來的專案，不需要透過任網頁插件 Plugins 安裝到瀏覽器上，就可以直接在網頁上執行；這都需要憑藉著 WASM Web Assembly 這個標準，也就是說，現今大部分的瀏覽器都有支援 WASM，因此，透過 Blazor 開發出來的網頁專案，可以直接使用 .NET 開發環境所建置、編譯出來 組件 Assembly 檔案，直接在網頁上執行，而不是將這些 .NET C# 程式語言轉譯成為 JavaScript 語言來執行。在這篇文章中，將會說明如何安裝與設定一個 Blazor 的開發環境，並且使用 Visual Studio 2017 建立起第一個 Blazor，並且實際執行在瀏覽器上，接著，將會說明由 Blazor 專案樣本所建立起來的第一個專案的架構與這個專案內的程式碼是如何設計的。本篇文章的範例原始碼，可以從 BlazorFirstTime 取得。