.NET 6.0 Blazor Server 開發快速體驗
.NET 6.0 Blazor Server 開發快速體驗
Hands-On Lab 動手練習
關於本書
關於本電子書
這是一本帶領對於 Blazor Server 有興趣的新手開發者,可以快速體驗這個微軟最新的網頁開發框架技術的開發過程教學,在這本書中,將不會講解枯澀的相關技術內容,而是設計一個應用情境,也就是一般常用的 CRUD (新增 Create, 查詢 Retrive, 更新 Update, 刪除 Delete) 的部落格文章管理應用程式需求開發,從無到有的帶領讀者透過 Visual Studio 2022 這個開發工具,設計出的 Blazor Server 伺服器端的這樣應用程式。
所以,購買本書的讀者,將會強烈建議讀者要跟著本書的內容,逐一進行專案的設計與練習,在每個練習階段,都會有不同要帶給讀者的學習方向;透過這樣的練習開發過程,就會明瞭 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
ASP.NET Core 6.0 Blazor Server 部署到 IIS
現在整個 Blazor Server 專案已經完全開發完成,最後將會需要把這個專案部署到遠端的 Web 伺服器主機上,這篇文章將會要來說明如何進行部署到 Windows Server IIS 上相關工作。
更多內容,可以參考作者 Vulcan Lee 部落格文章
目錄
-
1. 關於本書
- 1.1 這本書能提供什麼
- 1.2 誰適合閱讀這本書
- 1.3 練習專案原始碼
-
2. 建立 Blazor Server Side 伺服器端的專案
- 2.1 安裝 Visual Studio 2022
- 2.2 Blazor UI 開發框架
- 2.3 建立 Blazor Server 專案
- 2.4 執行這個專案
-
2.5 ASP.NET Core Blazor 專案結構
- 2.5.1 Blazor Server 專案啟動 Program.cs
- 2.5.2 Blazor Server 啟動載入程序 _Host.cshtml 與 _Layout.cshtml
- 2.5.3 Blazor Server 框架進入點元件 App.razor
- 2.5.4 Blazor 框架預設版面配置元件 MainLayout.razor
- 2.5.5 功能選項切換導航面板元件 NavMenu.razor
- 2.5.6 依據路由資訊來顯示特定 Blazor 頁面元件
- 2.5.7 方便擴充的 範本檔案 _Imports.razor
- 2.5.8 ASP.NET Core 設定 appsettings.json
- 2.5.9 Counter.razor 元件
- 2.5.10 FetchData.razor 元件
-
3. 使用 Entity Framework Core 存取資料庫
- 3.1 加入 Entity Framework Core 用到的 NuGet 套件
- 3.2 建立專案會用到的 Entity Framework Core 實體資料模型
- 3.3 建立專案要用到的 Entity Framework Core DbContext
- 3.4 註冊 BlogDbContext 類別到相依性注入容器
- 3.5 修改 Index.razor 元件來建立資料庫
- 3.6 透過 Entity Framework Core 做到 CRUD 功能
-
4. 建立部落格文章頁面之 CRUD 功能
- 4.1 加入顯示部落格文章頁面
- 4.2 在功能表清單中加入部落格文章選項
- 4.3 執行並檢視查詢部落格文章的結果
- 4.4 加入新增部落格文章功能
- 4.5 執行並檢視新增部落格文章的結果
- 4.6 加入更新部落格文章功能
- 4.7 執行並檢視更新部落格文章的結果
- 4.8 加入刪除部落格文章功能
- 4.9 執行並檢視刪除部落格文章的結果
-
5. 使用 Bootstrap 強制回應 Modal 對話窗
- 5.1 加入使用 Bootstrap 的標準強制回應對話窗
- 5.2 執行並檢視使用 Bootstrap 的標準對話窗效果
-
6. 設計與使用 修改與刪除 Blazor 元件
- 6.1 建立部落格文章記錄編輯 Blazor 子元件
- 6.2 建立用於刪除紀錄的確認 Confirm 對話窗 Blazor 子元件
- 6.3 參考與使用剛剛建立兩個 Blazor 子元件
- 6.4 執行並檢視使用 Blazor 子元件方式設計成果
-
7. 將商業邏輯程式碼重構為 ViewModel
- 7.1 建立 ViewModel
- 7.2 執行並檢視採用 ViewModel 設計成果
- 7.3 再度執行並檢視採用 ViewModel 設計成果
-
8. 將資料庫存取程式碼分離出來
- 8.1 建立 ViewModel
- 8.2 將此服務註冊到 DI 容器內
- 8.3 在 ViewModel 內使用此資料庫存取服務
- 8.4 執行並檢視採用 ViewModel 設計成果
-
9. 設計使用者身分驗證與授權功能
- 9.1 建立使用者資料表
- 9.2 重新建立資料庫與產生測試使用者紀錄
- 9.3 執行並重新建立資料庫
- 9.4 建立使用者服務
- 9.5 註冊服務
- 9.6 加入支援與使用 Cookie 的使用者驗證與授權
- 9.7 建立登入與登出的 Razor Page 頁面
- 9.8 建立與使用 登入 Blazor 元件
- 9.9 修正 App.razor
- 9.10 執行並檢視使用者登入與登出設計成果
- 9.11 宣告 管理文章 頁面需要使用者登入,才能夠存取
- 9.12 執行並檢視使用者授權設計成果
-
10. 建立 部落格文章 Web API
- 10.1 修正 Blazor Server 專案可以使用 Web API
- 10.2 在服務類別加入新功能
- 10.3 建立部落格文章的 CRUD Web API
- 10.4 執行並測試 Web API 設計成果
-
11. ASP.NET Core 6.0 Blazor Server 部署到 IIS
- 11.1 安裝 IIS 服務
- 11.2 安裝 .NET Core 裝載套件組合
- 11.3 設定改用用 SQLite 資料庫
- 11.4 安裝 SQLite NuGet 套件
- 11.5 通知 Entity Framework Core 要改用 SQLite 資料庫
- 11.6 準備發布 Blazor Server 專案的內容
- 11.7 進行測試
- 12. 版權頁
Leanpub 100% 無風險的滿意保證
在付款後的 60 天內,只要點擊兩下,你就可以退書並獲得全額退款。退書是手工操作的,所以可能需要幾天時間來完成整個過程。
查看完整條款.
在$10的購買中賺$8,在$20的購買中賺$16
我們在$7.99或以上的購買中支付80%的版稅,並在$0.99至$7.98的購買中支付80%的版稅減去50美分的固定費用。在$10的銷售中賺$8,在$20的銷售中賺$16。因此,如果我們以$20銷售5000本未退款的書,您將賺取$80,000。
(是的,一些作者已經在Leanpub上賺了很多錢。)
實際上,作者在Leanpub上賺取了超過1300萬美元通過寫作、出版和銷售。
了解更多關於Leanpub寫作的信息
免費更新。無 DRM 限制。
如果你購買了 Leanpub 的書,只要作者更新書籍,你就可以獲得免費更新!許多作者使用 Leanpub 來發布他們正在編寫的書籍。所有讀者都可以獲得免費更新,無論他們何時購買書籍或支付了多少費用(包括免費)。
大多數 Leanpub 書籍均提供 PDF(適用於電腦)、EPUB(適用於手機和平板電腦)和 MOBI(適用於 Kindle)格式。書籍包含的格式將顯示在此頁面的右上角。
最後,Leanpub 書籍沒有任何 DRM 複製保護的胡說,因此你可以輕鬆地在任何支持的設備上閱讀它們。