ASP.NET Core 6.0 Blazor Server 開發快速體驗 教學電子書

購買本 Blazor 電子書網址

這是一本帶領對於 Blazor Server 開發技術有興趣的新手開發者，可以快速體驗這個微軟最新的網頁開發框架技術的開發過程，在這本書中，將不會講解枯澀的相關技術內容，而是設計一個應用情境，也就是一般常用的 CRUD (新增 Create, 查詢 Retrive, 更新 Update, 刪除 Delete) 的部落格文章應用程式需求開發，從無到有的帶領讀者透過 Visual Studio 2022 這個開發工具，設計出的 Blazor 伺服器端的這樣應用程式。

所以，購買本書的讀者，將會強烈建議讀者要跟著本書的內容，逐一進行專案的設計與練習，在每個練習階段，都會有不同要帶給讀者的學習方向；透過這樣的練習開發過程，就會明瞭 Blazor Server 這個開發框架技術究竟可以做到什麼樣的強大功能；這本書提供一個動手練習實作的說明操作步驟，體驗 Blazor 專案開發過程。因此，若您沒有這樣的興趣或者這樣的需求，請不要購買這本書。

因此，當讀者完成所有的專案練習開發，相信您對於 Blazor Server 這個優秀的開發框架必定有更清楚的認識，了解到不需要使用到繁雜的 JavaScript 程式語言，僅使用 Blazor 就可以做到那些網站設計上的功能。

這本書能提供什麼

在這本書裡面，將會提供 9 章的內容，分別是

• 建立 Blazor Server Side 伺服器端的專案

  了解如何透過 Visual Studio 2022 開發工具，開始建立一個 伺服器端的 Blazor 專案，並且從這個 Blazor Server 專案範本所產生的檔案與相關內容進行了解 Blazor Server 運作方式與特色，這裡也會介紹該專案內建的兩個 Razor 元件 Component 設計方式。

• 使用 Entity Framework Core 存取資料庫

  在本書中所要設計的部落格文章管理紀錄，將會儲存在 Microsoft SQL Server 內，想要做到這樣的設計需求，最簡單的方式就是採用微軟提供的 Entity Framework Core 這套 ORM 套件，在這裡將會說明 Entity Framework Core 的基本架構與特色和核心運作機制，接著了解如何建立實體模型並且建立起一個資料庫與產生一些測試用的紀錄在資料表內；另外，針對資料庫處理要用到的 CRUD Create 新增、Retrive 查詢、Update 更新、Delete 刪除的計算方式，也會介紹如何使用 C# 程式碼來做到這些功能。

• 建立部落格文章頁面之 CRUD 功能

  現在將要開始實際進行建立一個 Blazor 頁面元件，在這裡設計出一個具有 CRUD 功能的互動網頁，更令人驚豔的是，所有的設計過程，完全僅使用到 C# 程式語言就可以完成這樣的設計工作，沒有用到任何一行 JavaScript 程式碼，因此，只要是身為 .NET C# 開發者，不論之前從事 Windows Forms、Web Forms、WPF、Xamarin 等等，將會透過 Blazor 這套 UI 開發框架幫助，成為一個全端 Web 開發者，整個學習過程相當的輕鬆與容易，無須花費大量精力與時間就可以學會 Blazor Server 開發技術。

• 使用 Bootstrap 強制回應 Modal 對話窗

  上一章所完成部落格文章管理頁面，是將資料表清單與紀錄編輯所用到的 HTML 透過元件內的布林型別屬性和資料綁定機制來動態變更瀏覽器上的 DOM 物件，如此做到切換網頁內容可以顯示不同操作畫面，在這一章中，將會使用 Bootstrap 5 所提供的強制回應對話窗樣式，讓紀錄表單編修的時候可以顯示一個流暢的對話窗，讓使用者在此對話窗中進行操作，形成一個流暢的操作體驗。

• 設計與使用 修改與刪除 Blazor 元件

  上一章所完成部落格文章管理頁面，是將 HTML / CSS 都設計在同一個 Razor 元件檔案 (.razor) 內，現在需要使用 Blazor UI 開發框架所提供的一個絕佳功能，那就是可以把許多 UI 畫面，切割成為不同的 Razor 子元件，並且在 Blazor 路由頁面元件中參考、使用這些子元件，讓這個網頁內容設計過程更加的容易與順暢，並且容易替換與維護。

• 將商業邏輯程式碼重構為 ViewModel

  到現在為止，所有的 UI 宣告標記 (HTML / CSS) 和商業邏輯程式碼 (C#程式語言)都寫在同一個 Razor 元件檔案 (.razor) 內，在此將要學習與使用關注點分離的設計方法，把網頁畫面的 UI 保留在 Razor 元件檔案內，而把商業邏輯的 C# 程式碼分離到 ViewModel 類別內，藉由透過 ASP.NET Core 所提供相依性注入服務機制，把 ViewModel 物件動態注入到 Razor 元件檔案內。

• 將資料庫存取程式碼分離出來

  成功的將 UI 與 商業邏輯程式碼分離出來之後，接下來就是要把資料庫相關的程式碼，再度從 ViewModel 分離出來，讓 ViewModel 內要處理資料庫方面工作的時候，面對的是一個抽象介面，而在具體實作類別內，則是使用 Entity Framework Coew API 來存取資料庫，當然，這兩者之間還是要透過ASP.NET Core 所提供相依性注入服務機制結合在一起。

• 設計使用者身分驗證與授權功能

  整個專案到現在僅剩下一個實務上經常會遇到的情境，那就是要能夠做到使用者的身分驗證與授權，在此將會使用 Cookie 來儲存使用者成功身分驗證之後的存取權杖，用來識別下次再度回到網站的時候，可以得知上次使用的使用者是哪位；另外也要控制僅有成功登入的使用者，可以使用剛剛設計的部落格文章管理頁面。

• 建立 部落格文章 Web API

  最後，將要學習如何在 Blazor Server 專案內，啟用 Web API 程式設計能力，在此將會要來設計一個部落格文章管理的 RESTful Web API

誰適合閱讀這本書

對於任何想要學習 Blazor 這個開發技術，可以透過本書的開發練習說明，逐步了解到如何真正的設計出一個 Blazor 實用專案。

讀者必須具備 .NET / C# 的開發經驗、HTML / CSS 的基本認識即可，對於開發工具而言，本書是在 Windows 10 作業系統下，使用任何 Visual Studio 2022 的版本，就可以進行開發。 

ASP.NET Core Blazor 使用 AutoMapper

建立Blazor Server 應用程式專案

• 開啟 Visual Studio 2022
• 選擇右下方的 [建立新的專案] 按鈕
• 在 [建立新專案] 對話窗中
• 從右上方的專案類型下拉按鈕中，找到並選擇 [Web]
• 從可用專案範本清單內，找到並選擇 [Blazor Server 應用程式]
• 點選左下方 [下一步] 按鈕
• 在 [設定新的專案] 對話窗中
• 在 [專案名稱] 欄位中輸入 bzAutoMapper
• 點選左下方 [下一步] 按鈕
• 在 [其他資訊] 對話窗中
• 在 [目標 Framework] 下拉選單中，選擇 [.NET 6.0 (目前)]
• 點選左下方 [建立] 按鈕

安裝 AutoMapper 套件

• 滑鼠右擊專案節點
• 從彈出功能表清單中點選 [管理 NuGet 套件]
• 在 [NuGet: bzAutoMapper] 視窗中點選 [瀏覽] 標籤頁次
• 在文字輸入盒中輸入此套件名稱 AutoMapper.Extensions.Microsoft.DependencyInjection
• 選擇作者為 [Jimmy] 的 [AutoMapper.Extensions.Microsoft.DependencyInjection] 套件選項
• 安裝此套件該專案內

建立測試用的兩個類別

• 滑鼠右擊 [Pages] 資料夾
• 從彈出功能表清單中點選 [加入] > [類別]
• 在 [新增項目 - bzAutoMapper] 對話窗下方的 [名稱] 欄位輸入 MyModel.cs
• 點選右下方 [新增] 按鈕來新增這個類別
• 使用底下程式碼來替換這個類別的定義

public class MyModel
{
    public int MyInt { get; set; }
    public string MyString { get; set; }
    public DateOnly MyDateOnly { get; set; }
}

• 滑鼠右擊 [Pages] 資料夾
• 從彈出功能表清單中點選 [加入] > [類別]
• 在 [新增項目 - bzAutoMapper] 對話窗下方的 [名稱] 欄位輸入 MyModelDto.cs
• 點選右下方 [新增] 按鈕來新增這個類別
• 使用底下程式碼來替換這個類別的定義

public class MyModelDto
{
    public int MyInt { get; set; }
    public string MyString { get; set; }
    public DateOnly MyDateOnly { get; set; }
}

建立 AutoMapper Profile 類別

• 滑鼠右擊 [Pages] 資料夾
• 從彈出功能表清單中點選 [加入] > [類別]
• 在 [新增項目 - bzAutoMapper] 對話窗下方的 [名稱] 欄位輸入 AutoMapping.cs
• 點選右下方 [新增] 按鈕來新增這個類別
• 使用底下程式碼來替換這個類別的定義

using AutoMapper;
public class AutoMapping : Profile
{
    public AutoMapping()
    {
        CreateMap<MyModel, MyModelDto>();
        CreateMap<MyModelDto, MyModel>();
    }
}

註冊 AutoMapper 服務到相依性注入容器內

• 在專案根目錄下找到並且打開 [Program.cs] 檔案

• 找到 builder.Services.AddSingleton<WeatherForecastService>(); 敘述

• 在其下方加入 builder.Services.AddAutoMapper(c => c.AddProfile<AutoMapping>()); 敘述

  記得要加入相關的命名空間參考敘述

開始使用 AutoMapper

• 在 [Pages] 資料夾下找到並打開 [Index.razor]
• 將這個 Razor 元件替換為底下內容

@page "/"

@using AutoMapper
@inject IMapper Mapper

@code {
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender == true)
        {
            MyModel myModel = new MyModel()
                {
                    MyDateOnly = DateOnly.FromDateTime(DateTime.Now.AddDays(5)),
                    MyInt = 168,
                    MyString = "New MyModel"
                };
            Console.WriteLine($"New MyModel Hash:{myModel.GetHashCode()} Int:{myModel.MyInt} Date:{myModel.MyDateOnly} String:{myModel.MyString}");
            MyModelDto myModelDto = Mapper.Map<MyModelDto>(myModel);
            myModelDto.MyInt = 999;
            myModelDto.MyString = "Mapper From MyModel";
            myModelDto.MyDateOnly = DateOnly.FromDateTime(DateTime.Now.AddDays(-5));
            Console.WriteLine($"New MyModel Hash:{myModel.GetHashCode()} Int:{myModel.MyInt} Date:{myModel.MyDateOnly} String:{myModel.MyString}");
            Console.WriteLine($"Mapper MyModel to MyModelDto Hash:{myModelDto.GetHashCode()} Int:{myModelDto.MyInt} Date:{myModelDto.MyDateOnly} String:{myModelDto.MyString}");
        }
    }
}

執行並且看結果

• 底下是執行後的主控台所輸出的文字

info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:7140
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5140
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: D:\Vulcan\Projects\BlazorApp7\
New MyModel Hash:5773521 Int:168 Date:2022/1/2 String:New MyModel
New MyModel Hash:5773521 Int:168 Date:2022/1/2 String:New MyModel 

Mapper MyModel to MyModelDto Hash:6630602 Int:999 Date:2021/12/23 String:Mapper From MyModel 

Blazor實戰故事經驗分享 2 - 風雲再現 探究 Blazor 可以快速開發出來內部細節

在上一篇文章 Blazor實戰故事經驗分享 1 - 風起雲湧 如何從無到有建立Blazor團隊與採用全端開發方式設計出給上市企業使用的Web系統 中，介紹了這個專案的啟動緣由與需要執行完成的工作和需要注意的事項，在這第二篇文章中，將會闡明究竟如何這個專案可以成功執行完成的關鍵因素與使用到的相關工具和技能。

對於採用 ASP.NET Core Blazor 這個全新的技術要來進行專案開發，對於許多人都是新的嘗試，畢竟這是新的技術，每個人都會有不同的考量因素，然而，在這裡將會根據當時實際環境與需求進行考量，評估要採用何種因應方法來讓團隊可以進行專案開發，這才是這個專案可以成功的主要關鍵因素。底下將來了解 陳少 的技術團隊，是採用甚麼方式來進行成功的 Blazor 專案開發。

套句作者經常講的話，若是有興趣、沒信心，那就做個 POC，再決定接下來要如何進行。若只是坐著發呆、泡茶聊是非、發功觀落陰，還是把這些時間省下來，不要再去想太多了。

人員訓練

對於人員訓練這個過程，是這個 Blazor 專案導入過程中極為重要的過程，畢竟要在短短的三個月內，要能夠採用一個全新的 Blazor 開發框架技術來開發出一個專案，必須承認這是個滿嚴峻的挑戰，失敗機率相當的高，而且這些開發人員都是新招募進來的，他們之前技術背景也都不相同，要如何讓大家可以使用 Blazor 的技術來進行專案開發，這就需要一些訣竅；這裡是透過專門設計的教育訓練課程與教材來解決此一問題，讓所有開發人員先求有，再求好，也就是說，先把專案開發出來，再自行針對不同核心關鍵技術，自行後續的研究與了解。

團隊成員在接受教育訓練的時候，並不只是坐著聽講而已，而是會跟著不同設計好的練習題目，一起進行練習，隨時針對學習狀況進行調整進度與內容，另外，上完課程之後，原則上都會有課後作業要自行練習，並且繳交回來；一旦課程完成之後，也會需要針對學員上課吸收能力與是否真的有認真學會這些技術，進行檢視與分析。

因為，天下沒有白吃的午餐，坐著聽課也許很容易，上課的講師一直講話，更是辛苦。

.NET / C# 物件導向程式設計能力

當在招募人員的時候，第一要求能力就要有 .NET / C# 程式設計的經驗與能力，至少要有兩年以上的工作經驗，至於是在甚麼框架底下開發專案，這都不是很重要；對於比較進階與延伸應用的 C# 開發技能，我與陳少會根據當時成員的情況，適度地進行這方面的教育訓練，例如：介面、委派、Lambda、事件、泛型等等，不過，只要時間允許，也會針對 .NET CLR 相關特性來進行相關的訓練課程。

HTML / CSS 開發經驗

對於這方面的需求，並沒有這麼的嚴格，原則上，至少要有這方面的基礎認識與了解，而團隊原則上不會針對這方面安排額外的教育訓練課程，因為，這些學習文章、書籍、影片，在網路上已經很多了。

Blazor Server-Side or WebAssembly

相信第一次接觸到 Blazor 這樣的開發框架的人，若對於這樣的技術產生興趣的話，必定對於要使用哪種 Blazor 開發方式感到迷惑。

首先，若你對於自己的開發方式，不管是前後端分離，或者全端開發方式感到滿意與沒有甚麼遺憾的話，個人建議無須繼續探討是否要使用 Blazor 這樣的方式；若你看到一些現有開發方式的問題與遇到瓶頸，個人覺得 Blazor 是個滿值得選擇的一種開發方式。

對於這個團隊選擇 Blazor 的首要考量因素，那就是無需使用 JavaScript ，僅需要會 .NET / C# 就可以進行 Web 專案開發，當然，這與之前的 Web Forms & Silverlight 是決然不同的運作方式，這兩個開發技術上存在的問題與瓶頸，在 Blazor 上已經獲得大部分的解決，至於 Blazor 是否會像這兩個技術有著相同的下場，那就是微軟已經放棄了這兩種開發方式，不再提供任何技術支援與新的版本，個人覺得未來的事情很難說，畢竟，除了傳統的 HTTP Request / Response 的動態網頁開發方式，與現今相當豐富的前端開發框架而言，Blazor是個絕佳的選擇，畢竟僅需要會 .NET / C# 就可以開發 Web App 是件相當誘人因素，JavaScript在這樣的開發方式下，就變成幾乎不再需要這樣能力的考量了。

對於 陳少 的開發團隊，講求的是能夠快速開發出 Web 專案產品，對於開發速度、執行效能與品質上，也有著相當的要求，對於招募能力上，已具備 .NET / C# 能力的開發者為主要選擇，最為重要的是，一旦開發人員進入團隊之後，要能夠在最短的時間投入到產品研發、開發，更是佔有極重要的考量，所以，當然會優先選擇 Blazor 這樣的開發框架技術。

對於現階段的開發產品而言，經過分析，不論採用 Blazor Server-Side 或者 WebAssembay 的方式，都是可行的選擇，不過，若採用 Blazor Server-Side 方案的話，更可以大幅減少開發時間與學習門檻，讓每個開發人員都是個全端開發人員 (而後，會培養這些人員，都能夠朝向超全端開發能力邁進)，如此，不論是在投資成本、人員調度、技術分享上，都具有相當優異的表現。因此，經過討論，在未來一年之內，相關開發的產品，都會使用 Blazor Server-Side 的方式來進行開發，然而，在使用 Blazor Server-Side 開發技術所做出來的產品，也在開發架構上，預留了隨時可以轉換成為使用 WebAssembly 的空間，這樣的設計讓技術轉換上變得更加有彈性。

Blazor 快速上手

好了，決定了要使用哪種 Blazor 的開發方式，現在就要如何讓現有人員，快速的開始使用 Blazor 來進行產品開發，記住，不是要花費大量的時間來學習甚麼是 Blazor 與相當細節的 Blazor 運作技術。

這裡採用的方式如下

首先，會先請開發人員先行觀看 Youtube 影片 Blazor 快速體驗 之 線上操作教學影片 ，自行根據影片來進行開發過程的體驗，其目的是要能夠讓程式設計在最短的時間內，快速的了解 Blazor 開發框架的開發方式，並且能夠了解到在這個開發方式下，會有哪些特色或者技術需要學習，當然，有心的程式設計師也會自行搭配微軟官方的 Blazor 介紹 網站內容，做進一步的研究，當然在學習之後，會根據看完該影片與練習之後進行評估與討論，看看學習上遇到甚麼問題，適度的解惑，如此便可以進入下一個訓練課程。

EF Core 與制式專案開發訓練課程

在這個課程則是透過直接的教學，配合不同的練習題目，實際現場進行操作，了解到各種 Entity Framework Core 這個工具的使用方式，以及有甚麼要注意的地方和限制，而後在同樣的課程內，進入到下一個階段內容

Blazor + Syncfusion 的核心設計準則

在這裡將會讓程式設計師實際體驗真正複雜的 Blazor 開發環境，在下面示意圖中，規劃了 Blazor 與 Syncfusion 元件的整合應用架構，透過分層的設計，讓整個專案密切的整合起來。

在這裡除了能夠瞭解到一個實際在 Blazor 下整合 Entity Framework Core + AutoMapper + Syncfusion 元件 + 不用使用 Code Behind 的方式來進行開發的方式，當然，在這裡將會首先了解到如何理解與使用這樣的開發架構，當然，在課堂上也會讓學員實際自行開發練習，並且會有課後作業，讓把課堂是學習的內容，能夠獨立開發出來。

原則上，會留些時間讓學員可以理解、體會、領悟這個架構的精神與各分層是如何串接起來的方式，當然，最有效的方式，那就是會有課後成果考核與評分，確認學員真的學會這樣的設計技能。

在這裡提到的分層架構將會充分發揮 Blazor 開發框架的特色，使用 Razor 元件 的方式來設計，不論是 CSS 或者 HTML 標記，或者某個頁面的部分內容，經過這樣的元件化設計，將會大幅簡化整個系統開發的複雜度。另外，對於 Blazor Serer-Side 開發方式所提供的優異除錯除錯能力，表達衷心的感恩，因為這樣的機制解省了許多開發上的時間。

相依性注入、非同步程式設計、多執行緒程式設計、物件導向設計原則

關於這些技術，都已經完成了相關訓練教材，預計至少需要花費9天以上的時間來進行教育訓練，不過，因為，時間緊迫，在這個專案進行過程中，僅會針對部分的 相依性注入、非同步程式設計 的內容作教育，因為，許多的觀念與技能將會有助於團隊成員設計出更有效率、更好維護、不容易出錯的程式碼，不過，對於整個團隊成員會於日後將這些技能補足到他們身上，原則上，有些課程將會需要進行本身能力進行評估，確認他們已經具備了這樣的能力或者資質，才能夠接受這些教育訓練，提升自我能力，否則，需要他們自行研究與提升本身實力。

身分驗證與授權

這部份對於 Web 開發專案上具有相當的重要性，這包含了如何使用 Blazor + ASP.NET Core 來設計出具有 Cookie 與 JWT 方式的身分驗證與授權機制，整個 Blazor 專案將會受到這樣的機制保護下，避免沒有授權的使用者能夠存取到不屬於他們可以使用的資源。而這樣的課程將會使用到約 4 個小時的時間來上課，這個課程已經於 10 月上課完畢，而且在課後之後，團隊成員已經將這樣的機制時實作在要交付給客戶的產品中。

這個專案也包含了許多 Web API，要能夠讓 Windows Forms 應用程式可以存取這個 Blazor 開發出來的系統內資源，這些資源將會受到 JWT 的保護；當然，對於完整的 JWT Token 的取得、更新、與強制撤銷上，在標準的設計專案上，都已經有所提供，團隊成員可以從無到有的自行開發出這些機制，也可以直接套用已經開發好的機制，套用到現有產品上。

在這裡也會使用到 ASP.NET Core 之 Web API 功能，設計出具有 RESTfule 能力的 Web API 功能，對於 Dto 的相關物件規劃，也會實際時做出來。這些功能都會完全在 Blazor 專案內可以做出來。

Xamarin.Forms

最後一部分也是最為精采的，就是要訓練團隊成員具備超全端開發設計能力，這包含了 Web 專案的開發 + 跨平台行動裝置地的開發能力；對於 Xamarin.Forms 的開發技術，在今年10月之前，已經進行了快要 1/2 的內容，預計年底之前，這些跨平台行動開發能力將會全數上完相關課程，因為，整個團隊將會至少擁有3名具有超全端程式設計能力的程式設計師。

執行結果分析

如同這系列文章一開始所提到的，這個採用 Blazor 開發框架技術，在三個月內是如期開發出來並且交付給客戶，實際運作也是十分的優異與滿足當初規劃的需求，這樣的成果將會取決於底下的因素

• 公司領導人的支持與信任、妥善的團隊分工規劃與決策

  由於該公司的總經理充分的授權與信任，可以讓這個新成立的團隊使用各種可行性方案來完成這個專案開發，團隊領導人的充分規劃與落實執行、追蹤與分析，遇到問題就找出 Root Cause，並且嘗試解決問題，大家可以在平行的方式下開發，這樣所展現的成果也是與所有團隊成員一起共享的。

• 優異與具有未來發展能力的 Blazor 開發環境

  雖然 Blazor 是在去年年底才發表的新 Web 開發方式，不過，整體架構採用了 MVU 方式的設計著實方便了不少，也簡化了許多設計工作；對於 Blazor 更多的內部運作細節與核心技術，也會在日後逐步透過教育訓練(Blazor的訓練教材已經完成了約 300頁以上的簡報)與技術分享的方式，與團隊成員一起來精通這個開發方式；另外，在年底的 ASP.NET 5 的發表，這裡也已經準備好隨時可以順利切換到這個新的技術框架內，明年也會進行規畫可以在同樣的開發模式下，在最少的痛苦情形下，華麗變身成為 WebAssembly 開發方式(當然，只要該專案的需求確實需要擁有這樣的條件，確信轉移上是不會遇到太多的障礙的)。對於 ASP.NET Core 這個優異平台已經提供了許多功能，實際在進行開發過程中不再需重新發明輪子，也節省了許多開發時間，而所做出產品當然也有高效能的表現。

• 完整與完善的教育訓練培訓機制

  一開始要進行這樣的開發模式的時候，就已經開始籌畫開發人員所需要的技術教育訓練內容，在適時提供相關技術的新知與開發方法，透過在課堂上實際練習各項實作內容，讓大家在下課之後，就可以把上課所學習的內容，實際應用在工作上；另外，相關的教育訓練、技術討論與分享，都有使用微軟 Teams 進行錄影下來，課後學員可以藉由上課錄影內容，來進行複習課堂上的各項技術與技能，這點也是一個相當不錯的效果。

• 即時與充分的技術支援

  再好的技術平台或者工具，總會遇到各項問題與困難，在團隊中需要有精通這些技術的人員，適時地提供相關解決方案、協助進行除厝或者討論出更好的因應做法，透過這樣的分工做法，著實提升整體專案的開發效能與品質。最重要的整個團隊都是樂於彼此分享自己的開發成果與經驗，讓大家一起成長。

最後想要表達的是， Blazor 是真的可以開發出在現實應用上的 Web 開發框架技術，陳少 這個團隊就是一個活生生的例子，若你曾經也嘗試要使用 Blazor 來開發專案並且遇到瓶頸，這可能需要靜下來分析究竟問題在哪裡？還是一開始本身你的公司或者團隊就不需要、不適合採用 Blazor 技術，甚至想要在 Blazor 開發環境中，加入許多你自己也不確定的因素，總之，找出問題，嘗試解決，最後下出決定：要改善還是要放棄這個開發平台。我們可以，相信你也可以做到的。

相關文章

Blazor實戰故事經驗分享 1 - 風起雲湧 如何從無到有建立Blazor團隊與採用全端開發方式設計出給上市企業使用的Web系統

Blazor實戰故事經驗分享 2 - 風雲再現 探究 Blazor 可以快速開發出來內部細節 

如何使用 Syncfusion 元件庫 在 Blazor 專案上

由於工作上的需要以看到最新的網頁開發框架 Blazor ，便決定開始使用 Blazor Server Side 來進行網頁專案的開發，會選擇 Server Side 方式而不是採用 WASM 的方式，當初決定的理由相當的簡單，那就是要簡化整個網站開發的流程，透過 Blazor Server Side 開發架構，可以享受到許多的好處，例如可以線上直接設定中斷點來進行除錯、不需要設計 Web API 就可以存取後端的資料庫等等。

一旦決定了使用 Blazor 開發框架來進行專案開發，接下來要解決的問題就是如何設計各種ui介面，在網路上存在的許多免費的 Blazor UI 套件，每種使用方式以提供的功能都不盡相同，根據自身的需求來判斷，似乎沒有一套免費的ui套件可以滿足專案上的需要，因此就直接轉向了付費的 Blazor UI 套件來進行評估，當然，市面上也存在的許多付費的 Blazor 元件產品，在這裡選擇了 Syncfusion 這家的 Blazor 元件來進行開發。

那麼要如何使用 Syncfusion 元件來進行 Blazor 專案開發，就是這篇文章所要探討的內容，在這裡，將會說明如何在 Blazor 專案內顯示一個日期選舉萬年曆這樣的 UI 功能。

這個說明專案的原始碼位於 bzSidebar

建立 Blazor Server-Side 的專案

• 打開 Visual Studio 2019

• 點選右下方的 [建立新的專案] 按鈕

• [建立新專案] 對話窗將會顯示在螢幕上

• 從[建立新專案] 對話窗的中間區域，找到 [Blazor 應用程式] 這個專案樣板選項，並且選擇這個項目

• 點選右下角的 [下一步] 按鈕

• 現在 [設定新的專案] 對話窗將會出現

• 請在這個對話窗內，輸入適當的 [專案名稱] 、 [位置] 、 [解決方案名稱]

  在這裡請輸入 [專案名稱] 為 bzSyncfusion

• 完成後，請點選 [建立] 按鈕

• 當出現 [建立新的 Blazor 應用程式] 對話窗的時候

• 請選擇最新版本的 .NET Core 與 [Blazor 伺服器應用程式]

• 完成後，請點選 [建立] 按鈕

稍微等會一段時間，Blazor 專案將會建立起來

進行 Syncfusion 元件的安裝

• 滑鼠右擊 Blazor 專案的 [相依性] 節點
• 選擇 [管理 NuGet 套件]
• 切換到 [瀏覽] 標籤頁次
• 搜尋 Syncfusion.Blazor 這個元件名稱
• 選擇搜尋到的 [Syncfusion.Blazor] 元件，並且安裝起來

進行 Syncfusion 元件的設定

• 打開專案根目錄下的 [Startup.cs] 這個檔案
• 找到 [ConfigureServices] 這個方法
• 在這個方法的最後面，加入底下程式碼，已完成 Blazor 元件會用到的服務註冊

#region Syncfusion 元件的服務註冊
services.AddSyncfusionBlazor();
#endregion

• 在同一個檔案內，找到 [Configure] 這個方法
• 在這個方法的最前面，加入底下程式碼，宣告合法授權的金鑰 (License Key)

#region 宣告所使用 Syncfusion for Blazor 元件的使用授權碼
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY");
#endregion

• 打開 [Pages] 資料夾內的 [_Host.cshtml] 檔案

• 在 <head> 標籤內，加入需要的 CSS 宣告，如底下內容

  若沒有加入底下的宣告，將無法正常看到 Syncfusion 的元件樣貌

<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />

使用 SfCalendar 元件

• 在專案的 [Pages] 資料夾
• 打開 [Index.razor] 檔案
• 使用底下程式碼替換到 [Index.razor] 檔案內容

@page "/"
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Calendars

<h1>Hello, world!</h1>

Welcome to your new app.

<SfCalendar TValue="DateTime" Value="workDate"></SfCalendar>

@code
{
    DateTime workDate = DateTime.Now;
}

從這裡看到使用 Syncfusion 元件相當的容易，只需要加入該元件所使用的命名空間在 Razor 元元件前面，接著就加入該元件的HTML標籤，例如在這裡使用的是

現在可以直接執行這支程式，就會看到如下圖的執行結果。

 

 

Blazor Server 必會開發技能 - C# 與 JavaScript 互相呼叫

Blazor Server 必會開發技能

Blazor Server 建立一個新的頁面

Blazor Server 元件生命週期事件 Component Life Cycle

Blazor Server C# 程式碼設計方法

Blazor Server 單向資料綁定 One Way Data Binding 與 重新轉譯 Binding

Blazor Server Hello 互動頁面與事件設計 Two Way Data Binding

Blazor Server 元件間的參數傳遞與回應事件 Component Parameter EventCallback

Blazor Server C# 與 JavaScript 互相呼叫 IJSRuntime

Blazor Server 表單和驗證 Form Validation 

當在使用 Blazor 進行網站應用系統開發的時候，原則上，不再需要使用到 JavaScript 程式語言，不過，有些時候還是要需要能夠讓 C# 來呼叫 JavaScript 程式碼或者在 JavaScript 程式語言中來呼叫 .NET C# 的靜態或者執行個體公開方法，例如，想要把 Google Map 這樣的應用需求加入到 Blazor 專案內，就有可能需要進行這樣的設計，當然，也可以使用已經把這些需求打包成為 Blazor 套件來使用，在這篇文章將會來練習如何設計這樣的程式碼。

這裡說明的範例專案原始碼位於 BS07

建立 Blazor Server-Side 的專案

• 打開 Visual Studio 2019

• 點選右下方的 [建立新的專案] 按鈕

• [建立新專案] 對話窗將會顯示在螢幕上

• 從[建立新專案] 對話窗的中間區域，找到 [Blazor 應用程式] 這個專案樣板選項，並且選擇這個項目

• 點選右下角的 [下一步] 按鈕

• 現在 [設定新的專案] 對話窗將會出現

• 請在這個對話窗內，輸入適當的 [專案名稱] 、 [位置] 、 [解決方案名稱]

  在這裡請輸入 [專案名稱] 為 BS07

• 完成後，請點選 [建立] 按鈕

• 當出現 [建立新的 Blazor 應用程式] 對話窗的時候

• 請選擇最新版本的 .NET Core 與 [Blazor 伺服器應用程式]

• 完成後，請點選 [建立] 按鈕

  稍微等會一段時間，Blazor 專案將會建立起來

加入 JavaScript 程式碼

• 打開 [Pages] 資料夾內的 [_Host.cshtml] 檔案
• 在 <head> 區段加入底下的 JavaScript 程式碼

@*客製化的 JavaScript*@
<script>
    window.helloWorld = {
        askYourName: function (title, hint) {
            return prompt(title, hint);
        },
        sayYourAgeToCsharp: function (dotNetHelper) {
            age = prompt('請輸入你的年紀', '所輸入數值將會傳遞給 C# 方法')
            dotNetHelper.invokeMethodAsync('GetStringFromJavaScript', age);
        },
    };
</script>

修改 Index.razor 元件

• 打開 [Pages] 資料夾內的 [Index.razor] 檔案
• 請使用底下程式碼替換到這個檔案內容

@page "/"
@inject IJSRuntime JSRuntime
<h1>Hello, C# 與 JavaScript 互相呼叫!</h1>

<button class="btn btn-primary" @onclick="AskYourName">你是誰? (C# -> JS)</button>
<div class="display-4 text-success">@Name</div>
<button class="btn btn-primary my-4" @onclick="AskYourAge">你幾歲? (C# -> JS -> C#)</button>
<div class="display-4 text-danger">@Message</div>

@code {
    public string Name { get; set; }
    public string Message { get; set; }
    private DotNetObjectReference<Index> objRef;

    async Task AskYourName()
    {
        Name = await JSRuntime.InvokeAsync<string>(
            "helloWorld.askYourName", "你是誰", "請輸入你的姓名");
    }

    async Task AskYourAge()
    {
        DotNetObjectReference<Index> objRef = DotNetObjectReference.Create(this);
        await JSRuntime.InvokeVoidAsync("helloWorld.sayYourAgeToCsharp", objRef);
    }

    [JSInvokable]
    public void GetStringFromJavaScript(string message)
    {
        Message = message;
    }
}

首先來看看如何在 C# 程式碼內來呼叫 JavaScript 內的方法，要能夠做到這樣的程式設計，首先要先使用 @inject 指示詞 Directive 來注入 [IJSRuntime] 這個物件。

在 [你是誰? (C# -> JS)] 按鈕所綁定的委派事件中，使用了這樣的敘述 Name = await JSRuntime.InvokeAsync<string>("helloWorld.askYourName", "你是誰", "請輸入你的姓名"); 來呼叫 JavaScript 方法，在 [JSRuntime.InvokeAsync] 方法的第一個參數將會是要呼叫的 [JavaScript] 方法名稱，而後的引數將會是要傳遞到 JavaScript 方法參數。

從這個 [window.helloWorld] 方法可以看出，該 [JavaScript] 方法使用了 [Prompt] 方法，要求使用者輸入一個文字字串，一旦使用者輸入完成後，就會回傳到 .NET C# 方法內了，因此，透過 [Name] 這個變數，就可以取得使用者輸入的文字內容

在這個 [你幾歲? (C# -> JS -> C#)] 按鈕中，將會呈現先使用 C# 呼叫一個 [JavaScript] 方法，接著，在 [JavaScript] 程式碼內，將會透過了 dotNetHelper.invokeMethodAsync('GetStringFromJavaScript', age); 方法來呼叫 .NET C# 內的 [GetStringFromJavaScript]。

首先，在 C# 按鈕方法內將會使用 DotNetObjectReference<Index> objRef = DotNetObjectReference.Create(this); 敘述來建立一個 [DotNetObjectReference] 物件，這裡的泛型型別參數將會表示將要採用執行個體的方法來呼叫，而不是使用靜態的方法 (要在 JavaScript 內呼叫 .NET 的靜態方法，需要使用 [DotNet.invokeMethodAsync] 方式)；這裡產生的物件將會傳入到 JavaScrip 內，接著，在 [JavaScript] 內就可以使用這個物件來呼叫 .NET C# 物件的方法了。

最後，為了要能夠讓 [JavaScript] 呼叫 .NET C# 的方法，該方法需要使用 [JSInvokable] 屬性標住在方法前面，代表這個方法可以被 .NET C# 呼叫之用。

執行這個專案

• 按下 [F5] 按鍵，開始執行這個 Blazor 專案

• 一旦啟動完成，就會自動開以瀏覽器

  

• 請點選 [你是誰? (C# -> JS)] 按鈕

• 現在在網頁上將會出現一個對話窗，請輸入任何文字並且點選 [確定] 按鈕

  

• 請點選 [你幾歲? (C# -> JS -> C#)] 按鈕

• 現在在網頁上將會出現一個對話窗，請輸入年紀並且點選 [確定] 按鈕

  

• 此時，可以從網頁上看到剛剛在使用 [JavaScript] 程式碼所取得的文字