[{"_1":2,"_46":-5,"_47":-5},"loaderData",{"_3":4,"_14":15,"_44":-5,"_45":-5},"root",{"_5":-5,"_6":-5,"_7":-5,"_8":9,"_10":11},"user","shoppingCartId","toast","locale","en","constants",{"_12":13},"paypalClientId","AenrHU49peF-ZUH-Yq7AXLLNZYGUGlml474U16NCjB4ZznmQCEjiliN3whyuVZmkb7VxEzmTALgtKEKE","routes/_store+/_readers+/email_author.$slug/route",{"_16":17,"_43":-5},"book",{"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29},"id","Z2lkOi8vbGVhbnB1Yi9TdG9yZTo6Qm9va1Byb2R1Y3QvMzI2NzI","title","Blazor 快速體驗","state","published","contactAuthorMethod","email","aboutText","

關於本書

歡迎可以先來觀看 Blazor 快速體驗之線上操作教學影片，並且訂閱本 Youtube 頻道

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

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

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

這本書能提供什麼

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

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

了解如何透過 Visual Studio 2019 開發工具，開始建立一個伺服器端的 Blazor 專案。

開始設計CRUD 的新增與刪除功能

首先，這裡將會透過剛剛建立的 Blazor Server Side 伺服器端專案，設計出一個使用記憶體作為儲存空間的 CRUD 應用程式，不過，在這裡將會先設計出新增與刪除的功能，在下一章內容才會介紹如何使用對話窗來強化新增與修改的功能；另外，在這兩章的內容裡，會將 CRUD 的各項程式碼，直接寫 Blazor Component 元件裡，還是那句話，這裡完全不會使用到任何 JavaScript 程式碼，僅僅使用到 C# 程式語言與 HTML 宣告式標記語言而已。

增加 CRUD 的新增與修改對話窗功能

延續上一章的開發結果，將會繼續開發新增與修改功能，不過，對於要新增與修改的紀錄，可以透過 BootStrap 的對話窗功能來進行記錄輸入；不過，在這裡將不是透過呼叫 jQuery 的方式，而是透過 C# 資料綁定的處理機制來顯示這個對話窗。

建立記事服務並且使用相依性注入服務

為了要能夠設計出一個容易維護的專案程式碼，因此需要套用 SRP 原則，因此，在這裡將會設計一個抽象介面與實作該介面的具體服務類別，將相關記事紀錄處理用到的程式碼分離到這個具體服務類別內，並且透過 ASP.NET Core 提供的相依性注入 Dependency Injection 服務，把所需要的具體服務類別執行個體，注入到 Blazor Component 元件內，如此，便可以在 Blazor 元件內使用這個具體服務類別物件，來進行 CRUD 的存取。透過這樣的設計技巧，可以讓這個專案具有高度鬆散耦合關係。

使用資料庫來儲存記事服務相關紀錄

接下來將會使用 Entity Framework Core 套件，設計一個新的提供資料庫(這裡將會使用 SQLite 資料庫做為操作範例)具體服務類別；一旦完成這個資料庫存取的具體服務類別，只需要在 Startup 類別內(在專案根目錄下，可以找到 Startup.cs 這個檔案)，註冊這個新建立的資料庫存取具體服務類別，這樣，在不修改原先 Blazor 元件的程式碼下，便可以直接讓這個原有 Blazor 專案，瞬間華麗變換成為不再使用記憶體作為存取目媒介，而是使用資料庫作為存取媒介的應用程式了。

在 Blazor 專案內呼叫 JavaScript 程式碼

在這一章中，將會展示如何透過 C# 來呼叫 JavaScript 的設計過程；這裡會先修改原先的 CRUD 元件中使用的對話窗功能，當要進行新增與修改的時候，將會透過 C# 來呼叫 jQuery 程式碼，讓這個對話窗顯示窗來；另外，將會使用已經包裝好的一個 Blazor NuGet 套件，該套件可以透過 C# 程式碼的呼叫，動態的顯示出一個對話窗，這裡將會針對刪除按鈕來進行重新設計，當使用點選刪除按鈕之後，將會透過 Blazored.Modal 元件來顯示一個對話窗，詢問使用者是否要刪除這筆紀錄，若回答是肯定的，將會立即刪除這筆紀錄。

在 Blazor 專案內設計 Web API 服務

在這之前，已經完成了一個 CRUD 應用程式，並且會將資料記錄存取到資料庫內的功能，現在，將可以在 Blazor 專案內啟用 RESTful Web API 服務功能，讓這個網站也可以提供 Web API 的服務；所以，透過這章的開發練習，將會知道如何在 Blazor 專案內來設計出 RESTful Web API 的服務。

使用 Web API 來儲存記事服務相關紀錄

最後，將會需要新設計一個存取 Web API 的具體服務類別，並且將這個服務註冊到 ASP.NET Core 內的 DI Container 容器中，當然，也無須修改原有 Blazor 專案內的元件設計程式碼，便可以讓這個 Blazor 專案，立即使用透過呼叫 Web API 服務，來進行記事紀錄之 CRUD 應用。

Email the Author