MAUI 使用 Masa Blazor 元件庫

上一篇(點擊閱讀)我們實現了 UI 在 Web 端(Blazor Server/Wasm)和客戶端(Windows/macOS/Android/iOS)共享，這篇我加上 Masa Blazor元件庫的引用，並把前幾個月寫的時間戳轉換工具加上。

1. 前置知識

關於 Masa Blazor 請點選Masa Blazor 官網了解：

MASA Blazor

基於 Material Design 和 BlazorComponent 的互動能力提供標準的基礎元件庫。提供如佈局、彈框標準、Loading、全域異常處理等標準場景的預設元件。

2. 元件庫的引用

元件庫的添加參考Masa 官網，這裡寫下Dotnet9 後台添加記錄：

2.1 UI 共享庫的修改-Dotnet9.WebApp

1. UI 共享庫 Dotnet9.WebApp 添加Maas.Blazor套件，剛好今天（21 號）Masa 發佈了0.5.0-preview.3版本，我們下載使用：

Install-Package Masa.Blazor -Version 0.5.0-preview.3

2. 封裝Maas.Blazor元件引用

新增檔案./MasaExtensions/MasaSetup.cs，程式碼如下：

using Microsoft.Extensions.DependencyInjection;

namespace Dotnet9.WebApp.MasaExtensions;

public static class MasaSetup
{
    public static void AddMasaSetup(this IServiceCollection services)
    {
        if (services == null) throw new ArgumentNullException(nameof(services));

        services.AddMasaBlazor();   // 這句關鍵程式碼
    }
}

關鍵程式碼只有一行services.AddMasaBlazor();，新增擴充類別是為了功能擴充，為了其他專案方便使用...

3. _Imports.razor 引入Masa.Blazor命名空間

@using Masa.Blazor

就這 3 步對 Dotnet9.WebApp的修改。

2.2 跨平台專案修改-Dotnet9.MAUI

1. 修改MauiProgram.cs檔案，添加上面封裝的擴充方法AddMasaSetup():

using Dotnet9.WebApp.MasaExtensions;    // 第1處：新增這個命名空間

namespace Dotnet9.MAUI;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); });

        builder.Services.AddMauiBlazorWebView();
#if DEBUG
        builder.Services.AddBlazorWebViewDeveloperTools();
#endif
        builder.Services.AddMasaSetup();    // 第2處：新增擴充方法引入Masa Blazor

        return builder.Build();
    }
}

2. 新增Masa.Blazor資源檔案

修改wwwwroot/index.html檔案，新增以下樣式（直接複製 Masa.Blazor Blazor WebAssembly使用的資源檔案）

<link href="_content/Masa.Blazor/css/masa-blazor.css" rel="stylesheet" />
<link href="_content/Masa.Blazor/css/masa-extend-blazor.css" rel="stylesheet" />

<link
  href="https://cdn.masastack.com/npm/@mdi/font@5.x/css/materialdesignicons.min.css"
  rel="stylesheet"
/>
<link
  href="https://cdn.masastack.com/npm/materialicons/materialicons.css"
  rel="stylesheet"
/>
<link
  href="https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css"
  rel="stylesheet"
/>

<script src="_content/BlazorComponent/js/blazor-component.js"></script>

2.3 Blazor WebAssembly 專案修改-Dotnet9.Wasm

1. 修改Program.cs檔案，添加上面封裝的擴充方法AddMasaSetup():

using Dotnet9.WebApp;
using Dotnet9.WebApp.MasaExtensions;        // 第1處：新增這個命名空間
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<Main>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddMasaSetup();            // 第2處：新增擴充方法引入Masa Blazor
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

2. 新增Masa.Blazor資源檔案

同Dotnet9.MAUI

2.4 Blazor Server 專案修改-Dotnet9.Server

1. 修改Program.cs檔案，添加上面封裝的擴充方法AddMasaSetup():

using Dotnet9.WebApp.MasaExtensions;        // 第1處：新增這個命名空間

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddMasaSetup();            // 第2處：新增擴充方法引入Masa Blazor

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

2. 新增Masa.Blazor資源檔案

修改Pages/_Layout.cshtml檔案，新增以下樣式（複製 Masa.Blazor Blazor Server使用的資源檔案）

<!-- masa blazor css style -->
<link href="_content/Masa.Blazor/css/masa-blazor.css" rel="stylesheet" />
<link href="_content/Masa.Blazor/css/masa-extend-blazor.css" rel="stylesheet" />

<!--icon file,import need to use-->
<link
href="https://cdn.masastack.com/npm/@("@mdi")/font@5.x/css/materialdesignicons.min.css"
rel="stylesheet">
<link
  href="https://cdn.masastack.com/npm/materialicons/materialicons.css"
  rel="stylesheet"
/>
<link
  href="https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css"
  rel="stylesheet"
/>

<!--js(should lay the end of file)-->
<script src="_content/BlazorComponent/js/blazor-component.js"></script>

注意：MAUI Blazor 和 Blazor WebAssembly 兩個專案引入 Masa Blazor 資源檔案的程式碼一樣，Blazor Server 和前兩者主要區別是materialdesignicons.min.css檔案：

這裡關於Masa.Blazor的引入就介紹完了，總結下關鍵三步：

1. 新增Masa.Blazor NuGet 套件：Install-Package Masa.Blazor；
2. Masa.Blazor元件註冊使用：services.AddMasaBlazor();；
3. 新增Masa.Blazor資源檔案：Wasm 是wwwwroot/index.html, blazor server 是_Layout.cshtml，注意兩者新增資源檔案的區別。

3. 時間戳功能的添加

在做 Blazor Server 版本網站時，有過一次時間戳功能開發的介紹(點擊閱讀)，程式碼很簡單，這裡不再細說，不能再水了....

4. 總結

Masa.Blazor元件庫已經添加，並恢復了時間戳功能，下一步，就是繼續搭建網站後台了，使用Masa.Blazor搭建框架嘍。

• 本文 Blazor Server 站點預覽：https://server.dotnet9.com/
• 本文 Blazor Wasm 站點預覽：https://wasm.dotnet9.com/
• MAUI(Android\Windows\macOS\iOS)預覽：https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnet9.MAUI（未做發佈檔案，需要您原始碼自行編譯）