.NET Magazine國際中文電子雜誌
作 者：許薰尹
審 稿：張智凱
文章編號：N241026602
出刊日期：2024/10/16

這一系列的「.NET 8 Blazor入門」文章將以實作的方式，搭配Visual Studio 2022開發工具，一步、步帶領你建立一個.NET 8 Blazor應用程式的員工系統，在一系列的實作中你將了解如何在Blazor應用程式專案中整合Bootstrap來美化版面，設計Razor元件，並使用SPA架構來進行資料的新增、刪除、修改與查詢作業。

第一步先從建立.NET 8 Blazor應用程式的專案開始。

建立Blazor專案

讓我們使用 Visual Studio 2022 開發工具來建立一個 .NET 8版的 「Blazor Web App」專案，依照以下步驟進行：

• 啟動 Visual Studio 2022 開發環境。
• 在「開始」視窗中，選擇「Create a new project」選項。
• 在「Create a new project」對話盒中，選擇使用 C# 語法的「Blazor Web App」範本。
• 按下「Next」按鈕繼續設定專案。

請參考下圖以更清楚了解操作步驟：



圖 1：建立「Blazor Web App 」專案。

接下來，在「Configure your new project」視窗中，設定 Blazor 專案的名稱和專案的存放路徑。例如，您可以將專案命名為「HRApp」。設定完成後，按下「Next」按鈕繼續。請參考下圖所示：



圖 2：設定Blazor專案名稱與專案存放路徑。

接下來，在「Additional information」視窗中進行以下設定：

• 將「Target Framework」設定為「.NET 8.0 （Long Term Support）」。
• 將「Authentication Type」設為「None」。
• 在「Interactive render mode」中選擇「None」。
• 清除所有核取方塊。

請參考下圖所示：



圖 3：設定「Target Framework」為「NET 8.0 （Long Term Support）」。

完成這些設定後，按下畫面中的「Create」按鈕繼續建立專案。專案建立完成之後，網站程式的進入點是「Program.cs」，參考程式碼如下：

using HRApp.Components;

var builder = WebApplication.CreateBuilder( args );

// Add services to the container.
builder.Services.AddRazorComponents( );

var app = builder.Build( );

// Configure the HTTP request pipeline.
if ( !app.Environment.IsDevelopment( ) ) {
  app.UseExceptionHandler( "/Error" , createScopeForErrors: true );
}

app.UseStaticFiles( );
app.UseAntiforgery( );

app.MapRazorComponents<App>( );

app.Run( );

 

檢視「Program.cs」程式碼，其中叫用了「builder.Services.AddRazorComponents」方法新增Razor服務到DI容器之中；「MapRazorComponents
( )」這行程式碼則將Razor 元件對應到應用程式的根路徑；而「App」元件則是 Blazor應用程式的根元件。

範例專案的首頁「Home.razor」程式參考如下，顯示一個「Hello, world!」訊息：

 

@page "/"

<PageTitle> Home </PageTitle>

<h1> Hello, world! </h1>

Welcome to your new app.

 

 

測試網站

在 Visual Studio 2022 開發工具中，按下鍵盤CTRL+F5組合鍵 執行網站。目前首頁顯示的是專案中「Home.razor」元件的執行結果：


圖 4：範例專案的首頁。

設計模型（Model）

模型（Model）是一個C#類別，用來描述網站程式中使用到的資料或商業邏輯。接著我們來定義一個「Employee」模型來描述員工資料，模型（Model）類別建議放在「Models」資料夾中。從Visual Studio開發工具>「Solution Explorer」視窗>專案名稱上方按滑鼠右鍵，從快捷選單選擇「Add」>「New Folder」選項，將新建立的資料夾命名為「Models」。

在「Solution Explorer」視窗 >「Models」資料夾名稱上方按滑鼠右鍵，從快捷選單選擇「Add」> 「Class」，開啟「Add New Item」對話盒，選取「Class」項目，設定檔案名稱為「Employee」，然後按下「Add」按鈕，建立新類別。接著在「Employee」類別中加入以下程式碼：

namespace HRApp.Models {
  public class Employee {
    public int Id { get; set; }
    public required string EmployeeName { get; set; }
    public DateOnly BirthDay { get; set; }
    public bool IsMarried { get; set; }
    public required string JobType { get; set; }
  }
}

 


這段程式碼定義了一個名為「Employee」的類別，該類別用於表示員工的資訊。讓我們來逐一解釋這個類別的各個成員：

 

• 「Id」：這是一個整數型別的屬性，用於儲存員工的識別編號。
• 「EmployeeName」：這是一個必要的字串型別的屬性，用於儲存員工的姓名。注意到屬性前面有一個「required」的存取修飾詞，這表示該屬性是必要的、不可為空白，也就是說在建立「Employee」物件時，必須明確地提供員工姓名的值。
• 「BirthDay」：這是一個「DateOnly」型別的屬性，用於儲存員工的生日日期。
• 「IsMarried」：這是一個布林型別的屬性，用於表示員工是否已婚。
•  「JobType」：這是一個必要的字串型別的屬性，用於儲存員工的職位類型。同樣地，這個屬性也是必要的。

修改「Home.razor」元件程式碼如下，以便在網頁上顯示 HR App 的首頁，並以表格的形式列出員工的清單資訊：

@page "/"
@using HRApp.Models
<PageTitle> HR App </PageTitle>

<table>
  <thead>
    <tr>
      <th> Employee ID </th>
      <th> Employee Name </th>
      <th> Birthday </th>
      <th> Marital Status </th>
      <th> Job Type </th>
    </tr>
  </thead>
  <tbody>
    @foreach ( var employee in employees ) {
      <tr>
        <td> @employee.Id </td>
        <td> @employee.EmployeeName </td>
        <td> @employee.BirthDay.ToShortDateString( ) </td>
        <td> @( employee.IsMarried ? "Married" : "Single" ) </td>
        <td> @employee.JobType </td>
      </tr>
    }
  </tbody>
</table>

@code {
  private Employee[] employees = new Employee[] {
        new Employee { Id = 1, EmployeeName = "John Doe", BirthDay = new DateOnly(1990, 5, 15), IsMarried = true, JobType = "Manager" },
        new Employee { Id = 2, EmployeeName = "Jane Smith", BirthDay = new DateOnly(1985, 10, 20), IsMarried = false, JobType = "Developer" },
        new Employee { Id = 3, EmployeeName = "Mike Johnson", BirthDay = new DateOnly(1992, 3, 8), IsMarried = true, JobType = "Designer" },
        new Employee { Id = 4, EmployeeName = "Emily Davis", BirthDay = new DateOnly(1998, 7, 12), IsMarried = false, JobType = "Tester" },
        new Employee { Id = 5, EmployeeName = "David Wilson", BirthDay = new DateOnly(1994, 9, 25), IsMarried = true, JobType = "Developer" }
  };
}

 


首先，我們可以看到「@page "/"」這行程式碼表示這個元件將會處理位於根路徑的請求。接著，使用「@using HRApp.Models」引入了「HRApp.Models」命名空間，這個命名空間包含了我們在這個元件中使用的「Employee」類別。

接下來，我們使用「PageTitle」用來設定頁面的標題，這個標題將會顯示在瀏覽器的標題列中。接著，使用 「table」 標籤來建立一個表格，用於顯示員工的資訊。在「thead」標籤中，定義了表格的標題列，包含了員工的 ID（Employee ID）、姓名（Employee Name）、生日（Birthday）、婚姻狀態（Marital Status）和工作類型（Job Type）。

在 「tbody」標籤中，我們使用 「@foreach」迴圈來讀取「employees」陣列中的每一個員工物件。在迴圈內部，使用 「tr」 標籤來建立表格的每一資料橫列，並使用「td」 標籤來建立每一列中的儲存格。我們使用 Razor以及屬性語法「@employee.Id」、「@employee.EmployeeName」、「@employee.BirthDay.ToShortDateString()」、「@(employee.IsMarried ? "Married" : "Single") 」和 「@employee.JobType」 來顯示每個員工的相關資訊。

最後，在「@code」區塊中，定義了一個名為「employees」陣列，陣列中包含了五個「Employee」物件，每個物件都有不同的屬性值。這些員工資料將會被用來填充表格。

在 Visual Studio 2022 開發工具中，按下 鍵盤CTRL+F5組合鍵執行網站。這個範例執行結果請參考下圖所示：


圖 5：員工的清單資訊。

使用Bootstrap套件美化表格

Responsive Web Design（RWD），是一種網頁設計方式。讓同一個網頁無論在是傳統的桌上型環境或是現在最流行的智慧型手機，都可以適當呈現網頁內容，例如桌上型的瀏覽器適合水平排列內容，而行動裝置則比較適合以堆疊的方式排列內容。Bootstrap支援RWD，使用現成的Bootstrap套件來設計網站可以簡化開發的流程。

下一步讓我們在專案中安裝Bootstrap套件。從Visual Studio開發工具>「Solution Explorer」視窗>專案名稱下「wwwroot」資料夾上按滑鼠右鍵，從快捷選單選擇「Add」>「Client-Side Library」選項，開啟「Add Client-Side Library」視窗。在「Library」右方文字方塊上輸入「Bootstrap」套件名稱以及版本。「Target Location」決定檔案要放的資料夾，我們設定「Target Location」為「wwwroot/lib/bootstrap/」，然後按下「Install」按鈕，請參考下圖所示：



圖 6：安裝Bootstrap套件。

修改「App.razor」使用「link」與「script」標籤引用「bootstrap.min.css」與「bootstrap.bundle.min.js」檔案，參考以下程式碼：

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "utf-8" />
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
  <base href = "/" />
  <link rel = "stylesheet" href = "app.css" />
  <link rel = "stylesheet" href = "HRApp.styles.css" />
  <link href = "lib/bootstrap/css/bootstrap.min.css" rel = "stylesheet" />
  <HeadOutlet />
</head>

<body>
  <Routes />
  <script src = "_framework/blazor.web.js"> </script>
  <script src = "lib/bootstrap/js/bootstrap.bundle.min.js"> </script>
</body>

</html>

 


修改「Home.razor」在「table」標籤套用Bootstrap套件的「table table-striped」樣式，參考以下程式碼：

@page "/"
@using HRApp.Models
<PageTitle> HR App </PageTitle>

<table class = "table table-striped">
  <thead>
    <tr>
      <th> Employee ID </th>
      <th> Employee Name </th>
      <th> Birthday </th>
      <th> Marital Status </th>
      <th> Job Type </th>
    </tr>
  </thead>
  <tbody>
    @foreach ( var employee in employees ) {
      <tr>
        <td> @employee.Id </td>
        <td> @employee.EmployeeName </td>
        <td> @employee.BirthDay.ToShortDateString( ) </td>
        <td> @( employee.IsMarried ? "Married" : "Single" ) </td>
        <td> @employee.JobType </td>
      </tr>
    }
  </tbody>
</table>

@code {
  private Employee[] employees = new Employee[] {
        new Employee { Id = 1, EmployeeName = "John Doe", BirthDay = new DateOnly(1990, 5, 15), IsMarried = true, JobType = "Manager" },
        new Employee { Id = 2, EmployeeName = "Jane Smith", BirthDay = new DateOnly(1985, 10, 20), IsMarried = false, JobType = "Developer" },
        new Employee { Id = 3, EmployeeName = "Mike Johnson", BirthDay = new DateOnly(1992, 3, 8), IsMarried = true, JobType = "Designer" },
        new Employee { Id = 4, EmployeeName = "Emily Davis", BirthDay = new DateOnly(1998, 7, 12), IsMarried = false, JobType = "Tester" },
        new Employee { Id = 5, EmployeeName = "David Wilson", BirthDay = new DateOnly(1994, 9, 25), IsMarried = true, JobType = "Developer" }
  };
}

目前首頁的執行結果，請參考下圖，使用Bootstrap美化表格的樣式如下：


圖 7：使用Bootstrap美化表格。

修改「MainLayout.razor」檔案，加入一個「div」標籤，套用Bootstrap 「container」樣式，使首頁的員工清單的左右留白：

@inherits LayoutComponentBase

<div class = "container">
  @Body
</div>

目前首頁的執行結果，表格左右有留白效果，請參考下圖所示：



圖 8：套用Bootstrap 「container」樣式。

使用NavMenu設計表頭選單

從Visual Studio開發工具>「Solution Explorer」視窗>「Layout」資料夾按滑鼠右鍵，從快捷選單選擇「Add」- 「Razor Component」選項，建立一個Razor元件，將新建立的元件命名為「NavMenu.razor」。

在「NavMenu.razor」檔案程式碼加入以下Boostrap「NavMenu」元件：

<nav class = "navbar navbar-expand-lg navbar-dark bg-dark mb-3">
  <div class = "container">
    <a class = "navbar-brand " href = "/"> HRApp </a>
  </div>
</nav>

 

修改「MainLayout.razor」檔案程式碼加入「NavMenu」元件：

@inherits LayoutComponentBase
 <NavMenu />
<div class = "container">
  @Body
</div>

 


目前首頁的執行結果，請參考下圖所示，網頁上方將呈現表頭資訊：


圖 9：使用「NavMenu」元件。