從空白專案來建立 ASP.NET Core Blazor 應用程式 - 了解 Blazor 運作方式

建立一個空白的 ASP.NET Core 空白專案

想要進行這樣的專案開發練習，可以參考底下的操作步驟

打開 Visual Studio 2019 開發工具
當 [Visual Studio 2019] 對話窗出現之後，點選右下方的 [建立新的專案] 按鈕
在 [建立新專案] 對話窗內，請找出 [ASP.NET Core Web 應用程式] 這個專案開發範本，並且點選這個專案開發範本
請點選右下角 [下一步] 按鈕
出現 [設定新的專案] 對話窗，輸入適當的 [專案名稱] 、 [位置] 、 [解決方案名稱]，完成後，請點選右下角 [建立] 按鈕

在這個範例程式碼中，將會建立一個 BlazorFromeEmpty 專案名稱
此時將會看到 [建立新的 ASP.NET Core Web 應用程式] 對話窗，請在清單中選擇 [空白] 這個專案範本，在此將要建立一個空白的 ASP.NET Core 的專案，若無，請點選右下角的 [建立] 按鈕
此時，這個空白 ASP.NET Core 專案已經建立完成

此時，這個專案的結構如下圖所示

這個專案內很簡單的僅有 Program.cs 與 Startup.cs 這兩個檔案

Programs.cs 的檔案內容如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;

namespace BlazorFromeEmpty
{
    public class Program
    {
        public static void Main(string[] args)
        {
            CreateHostBuilder(args).Build().Run();
        }

        public static IHostBuilder CreateHostBuilder(string[] args) =>
            Host.CreateDefaultBuilder(args)
                .ConfigureWebHostDefaults(webBuilder =>
                {
                    webBuilder.UseStartup<Startup>();
                });
    }
}

對於 Program 這個類別，將會與所有其他 ASP.NET Core 專案相同，例如：MVC, Web API, Razor Page

Startup.cs 的檔案內容如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace BlazorFromeEmpty
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapGet("/", async context =>
                {
                    await context.Response.WriteAsync("Hello World!");
                });
            });
        }
    }
}

在這個 Startup 類別內，可以看到在 ConfigureServices 方法內，沒有設計任何程式碼

現在，可以執行這個專案，看看會出現甚麼內容？

如同在 Configure 方法內的 app.UseEndpoints 敘述所定義的，這裡網站專案，僅能夠顯示 Hello World! 這樣的文字在瀏覽器上。

開始重構，變成一個 Blazor 專案

對於 Program.cs 這個檔案，並不需要做任何的修正，而對於 Startup.cs 這個檔案，則需要加入一些程式碼

public void ConfigureServices(IServiceCollection services)
{
    #region 在這裡要宣告所要使用的服務
    services.AddRazorPages();
    services.AddServerSideBlazor();
    // 設著將這行註解起來，並且執行，看看會發生甚麼問題？
    services.Configure<RazorPagesOptions>(options => options.RootDirectory = "/");
    #endregion
}

在 ConfigureServices 方法內，將會在這個 ASP.NET Core 專案內啟用 Blazor 會使用到的服務

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    #region 請加入這兩行敘述
    app.UseHttpsRedirection();
    app.UseStaticFiles();
    #endregion

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        #region 將原先空白專案中的敘述，註解起來
        //endpoints.MapGet("/", async context =>
        //{
        //    await context.Response.WriteAsync("Hello World!");
        //});
        #endregion

        #region 請在這裡加入 Blazor 會用到的路由設定功能
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
        #endregion
    });
}

在這裡要修改、調整、新增的程式碼，都特別有使用 #region ... #endregion 標示出來

加入 Blazor 會用到的檔案

現在要開始建立 Blazor 會用到的最少檔案，這裡僅需要三個檔案，就可以建立一個使用 HTML / C# 且具有互動效果的網頁，更美妙的是，整個過程，完全不需要呼叫呼叫 JavaScript。

首先，要建立兩個 Blazor 必備用到的檔案 _Host.cshtml App.razor

請先建立 _Host.cshtml

滑鼠右擊專案節點，選擇 [加入] > [新增項目] 功能項目
當 [新增項目] 對話窗顯示之後，請找到並且選擇 [Razor 頁面] 這個項目名稱
在左下方的名稱欄位中，輸入該 Razor 頁面的名稱 : _Host.cshtml
最後，點選右下角的 [新增] 按鈕

請使用底下的 Razor 頁面的標記與程式碼寫入到這個檔案內

@page "/"
@namespace BlazorFromeEmpty
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blazor 從無到有</title>
    <base href="~/" />
</head>
<body>

    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

接著要建立 App.razor

滑鼠右擊專案節點，選擇 [加入] > [新增項目] 功能項目
當 [新增項目] 對話窗顯示之後，請找到並且選擇 [Razor 元件] 這個項目名稱
在左下方的名稱欄位中，輸入該 Razor 元件的名稱 : App.razor
最後，點選右下角的 [新增] 按鈕

請使用底下的 Razor 元件的標記與程式碼寫入到這個檔案內

@using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

最後要來建立第一個 Blazor 元件，也就是首頁頁面 Index.razor

滑鼠右擊專案節點，選擇 [加入] > [新增項目] 功能項目
當 [新增項目] 對話窗顯示之後，請找到並且選擇 [Razor 元件] 這個項目名稱
在左下方的名稱欄位中，輸入該 Razor 元件的名稱 : Index.razor
最後，點選右下角的 [新增] 按鈕

請使用底下的 Razor 元件的標記與程式碼寫入到這個檔案內

@page "/"
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web

<h1>從空白 ASP.NET Core 來建立 Blazor 應用程式</h1>

<input @bind-value="Message" @bind-value:event="oninput" />
<p>@Message</p>
<button @onclick="clicked">OK</button>

@code{
    string Message { get; set; } = "Hi 你好";
    void clicked()
    {
        Message = "Click Button";
    }
}

執行看結果

請執行這個專案

這裡將會看到如上圖的畫面，其中該網頁上會有一個文字輸入盒、一個標籤文字、一個按鈕

現在，請在文字輸入盒輸入任何文字，此時，將會看到底下的標籤文字將會出現剛剛顯示的文字內容，這就是使用到 Blazor 內的絕佳特色功能，雙向資料綁定

最後，請按下按鈕，此時，將會觸發該按鈕所綁定的 C# 委派事件方法，並且會重新設定文字輸入盒與標籤文字內容，如上圖所示。

好了，這裡就是 Blazor 應用程式所需要的最簡單的專案內容

C# .NET Blazor MAUI Xamarin Research

2019年12月13日星期五