Leanpub Header

Skip to main content
Go to Leanpub.comLeanpub

.NET 6.0 Blazor Server 開發快速體驗

Hands-On Lab 動手練習

Vulcan Lee

.NET 6 Blazor 快速體驗 電子書

Minimum price

$20.00

$20.00

You pay

$20.00

Author earns

$16.00
$

...Or Buy With Credits!

You can get credits monthly with a Reader Membership
PDF
EPUB
WEB
209
Pages
11,741Words
About

About

About the Book

關於本電子書

這是一本帶領對於 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 部落格文章

C# .NET Blazor Research

Xamarin Research

Share this book

Categories

C#ASP.NET

Feedback

Email the Author

License

Creative Commons Attribution 4.0 International License

Author

About the Author

Vulcan Lee

從 2012 年開始進行 .NET / C# 教育訓練課程之後，對於許多開發出來的課程，並不是隨便敷衍的設計出來，這其中我會不斷地針對已經開發出來的課程來進行修正、改版、追加內容，因此，相關的課程是不斷的在變化與強化的。

要完成這樣的一系列課程是一種自我挑戰，讓自己可以看得更高、看得更遠、讓抄襲者永遠無法模仿，因為，這些課程加入了許多巧思與技能在裡面，內行看門道、外行看熱鬧。

我所設計的教學課程，為了要能夠讓入門者、想要精通者都可以喜歡我設計的課程，將會把課程應該具有的特色，所提供的內容將會涵蓋到更多的層面、更多範例碼、更多觀念介紹、更多的動畫來理解艱澀技術應用、更多挑戰應用、更多的日常遇到問題與解決方法、更完整的開發設計指引。

因此，很期望到時候能夠與大家一起來進行這個課程的交流與互動，也希望大家可以從這些課程學到更多知識與經驗，應用在日常開發專案上。

若對於這些課程有興趣，或者有任何其他需求，可以到 Xamarin Blazor 實驗室 粉絲團來私訊給我

也歡迎來查看我寫的部落格文章 https://csharpkh.blogspot.com/

Contents

Table of Contents

1.關於本書

  1. 1.1這本書能提供什麼
  2. 1.2誰適合閱讀這本書
  3. 1.3練習專案原始碼

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

  1. 2.1安裝 Visual Studio 2022
  2. 2.2Blazor UI 開發框架
  3. Blazor 是個 UI 開發框架
  4. WebAssembly 的誕生與帶來 Web 應用程式開發一到曙光
  5. 2.3建立 Blazor Server 專案
  6. 2.4執行這個專案
  7. 2.5ASP.NET Core Blazor 專案結構
  8. 2.5.1Blazor Server 專案啟動 Program.cs
  9. ASP.NET Core 的設定
  10. 在 Blazor 元件間操作，但是卻發生產生例外異常的處置做法
  11. 2.5.2Blazor Server 啟動載入程序 _Host.cshtml 與 _Layout.cshtml
  12. 2.5.3Blazor Server 框架進入點元件 App.razor
  13. 2.5.4Blazor 框架預設版面配置元件 MainLayout.razor
  14. 2.5.5功能選項切換導航面板元件 NavMenu.razor
  15. 2.5.6依據路由資訊來顯示特定 Blazor 頁面元件
  16. 2.5.7方便擴充的 範本檔案 _Imports.razor
  17. 2.5.8ASP.NET Core 設定 appsettings.json
  18. 2.5.9Counter.razor 元件
  19. 2.5.10FetchData.razor 元件

3.使用 Entity Framework Core 存取資料庫

  1. 3.1加入 Entity Framework Core 用到的 NuGet 套件
  2. 3.2建立專案會用到的 Entity Framework Core 實體資料模型
  3. 3.3建立專案要用到的 Entity Framework Core DbContext
  4. 3.4註冊 BlogDbContext 類別到相依性注入容器
  5. 3.5修改 Index.razor 元件來建立資料庫
  6. 請嘗試移除 StateHasChanged() 會發生甚麼問題
  7. 3.6透過 Entity Framework Core 做到 CRUD 功能
  8. 特別注意

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

  1. 4.1加入顯示部落格文章頁面
  2. 4.2在功能表清單中加入部落格文章選項
  3. 4.3執行並檢視查詢部落格文章的結果
  4. 4.4加入新增部落格文章功能
  5. 4.5執行並檢視新增部落格文章的結果
  6. 4.6加入更新部落格文章功能
  7. 問題思考
  8. 4.7執行並檢視更新部落格文章的結果
  9. 4.8加入刪除部落格文章功能
  10. 4.9執行並檢視刪除部落格文章的結果

5.使用 Bootstrap 強制回應 Modal 對話窗

  1. 5.1加入使用 Bootstrap 的標準強制回應對話窗
  2. 5.2執行並檢視使用 Bootstrap 的標準對話窗效果

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

  1. 6.1建立部落格文章記錄編輯 Blazor 子元件
  2. 6.2建立用於刪除紀錄的確認 Confirm 對話窗 Blazor 子元件
  3. 6.3參考與使用剛剛建立兩個 Blazor 子元件
  4. 6.4執行並檢視使用 Blazor 子元件方式設計成果

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

  1. 7.1建立 ViewModel
  2. 7.2執行並檢視採用 ViewModel 設計成果
  3. 7.3再度執行並檢視採用 ViewModel 設計成果

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

  1. 8.1建立 ViewModel
  2. 8.2將此服務註冊到 DI 容器內
  3. 8.3在 ViewModel 內使用此資料庫存取服務
  4. 8.4執行並檢視採用 ViewModel 設計成果

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

  1. 9.1建立使用者資料表
  2. 9.2重新建立資料庫與產生測試使用者紀錄
  3. 9.3執行並重新建立資料庫
  4. 9.4建立使用者服務
  5. 9.5註冊服務
  6. 9.6加入支援與使用 Cookie 的使用者驗證與授權
  7. 9.7建立登入與登出的 Razor Page 頁面
  8. 9.8建立與使用 登入 Blazor 元件
  9. 9.9修正 App.razor
  10. 9.10執行並檢視使用者登入與登出設計成果
  11. 9.11宣告 管理文章 頁面需要使用者登入，才能夠存取
  12. 9.12執行並檢視使用者授權設計成果

10.建立 部落格文章 Web API

  1. 10.1修正 Blazor Server 專案可以使用 Web API
  2. 10.2在服務類別加入新功能
  3. 10.3建立部落格文章的 CRUD Web API
  4. 10.4執行並測試 Web API 設計成果

11.ASP.NET Core 6.0 Blazor Server 部署到 IIS

  1. 11.1安裝 IIS 服務
  2. 11.2安裝 .NET Core 裝載套件組合
  3. 11.3設定改用用 SQLite 資料庫
  4. 11.4安裝 SQLite NuGet 套件
  5. 11.5通知 Entity Framework Core 要改用 SQLite 資料庫
  6. 11.6準備發布 Blazor Server 專案的內容
  7. 11.7進行測試

12.版權頁

Get the free sample chapters

Click the buttons to get the free sample in PDF or EPUB, or read the sample online here

Download Sample PDFDownload Sample EPUB

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.

You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!

So, there's no reason not to click the Add to Cart button, is there?

See full terms...

Earn $8 on a $10 Purchase, and $16 on a $20 Purchase

We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earned over $14 million writing, publishing and selling on Leanpub.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub