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.cs

public 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.cs

public 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; }
    }
}

C# .NET Blazor MAUI Xamarin Research

2018年11月20日星期二