.NET 幫助

Blazor .NET 8（開發人員教程）

發佈 2023年12月24日

Blazor 是一個全端網頁 UI 框架，隨著 .NET 8.0 的發布已經顯著發展。此更新帶來了各種功能和增強功能，使開發人員能夠使用 C# 和 .NET 構建互動和現代化的網頁應用程式。

在本文中，我們將深入探討 Blazor .NET 8.0 的關鍵方面，探索新的渲染模式、項目模板、工具改進等。

Blazor .NET 8（開發者教程）：圖1

理解 Blazor 渲染模式

.NET 8.0中的Blazor引入了三種呈現模式：

靜態伺服器呈現： 生成靜態 HTML 以達到最佳效能。
互動式伺服器渲染： 利用伺服器端的 ASP.NET Core 執行環境來進行初始渲染和互動功能。
互動式 WebAssembly 渲染： 利用客戶端的 .NET WebAssembly 執行階段來進行後續渲染和互動性。

多功能互動自動渲染

亮點之一是互動自動渲染模式，該模式結合了伺服器端渲染內容以及使用 .NET WebAssembly 執行時在客戶端的後續渲染和互動。這使應用啟動體驗更快，成為開發者的一個具吸引力的選擇。

Blazor 網頁應用程式範本介紹

.NET 8.0 引入了 Blazor Web 應用程式範本，這是一個結合 Blazor Server 和 Blazor WebAssembly 託管模型優勢的統一起點。

此模板納入了新功能，如靜態伺服器渲染、流式渲染、增強的導航和表單處理。專案模板的合併簡化了開發過程。

針對 Blazor 網頁應用程式的精簡 JS 初始化程序

傳統的 JS 初始化已被替換為用於 Blazor Web Apps 的新集合，提供更好的控制以完成自定義加載過程、記錄級別和其他選項等任務。此更改增強了開發體驗，並符合在 .NET 8.0 中統一托管模型的目標。

拆分預渲染和整合指導

為了提供更專注的覆蓋範圍，有關預渲染和整合的指南已經分為單獨的文章。此變更旨在簡化理解和實施，讓開發人員更容易遵循最佳實踐。

在 Blazor Web 應用程式中輕鬆實現狀態持久化

Blazor Web 應用程式現在會自動保留在預渲染期間創建的任何註冊的應用程式級狀態。這消除了對 Persist Component State Tag Helper 的需求，簡化了持久化和讀取組件狀態的過程。

增強的表單處理和模型綁定

.NET 8.0 為 Blazor 元件帶來了改進的表單處理功能，包括模型綁定和數據驗證。該框架遵循數據契約屬性，為開發人員提供了更多控制權，以確保表單數據如何綁定到模型。防偽支持的引入為表單提交增加了額外的安全層。

增強導航和表單處理

Blazor .NET 8.0 中的靜態伺服器渲染在頁面導航和表單處理方面引入了顯著的改進。傳統上，當進行導航或提交表單時會發生整頁刷新。

使用增強的導航功能，Blazor 攔截請求並執行提取請求，將渲染的回應內容無縫嵌入瀏覽器的 DOM 中。這避免了整頁重新載入，從而實現更快且更順暢的頁面加載，同時保留了更多的頁面狀態。

當 Blazor 腳本啟用時，增強導覽預設為開啟。(blazor.web.js)已加載，並可選擇性地針對特定表單啟用。新的增強導航 API 允許開發人員以程式化方式刷新當前頁面，提供對用戶體驗的更多控制。

流式渲染

Blazor .NET 8.0 引入了流式渲染，這是一項強大的功能，可以增強執行長時間異步任務的頁面的用戶體驗。使用串流渲染技術，頁面在非同步操作進行時可以渲染佔位內容。

完成後，更新後的內容會在相同的回應連接中串流到客戶端，並無縫地修補到 DOM 中。這種方法可確保應用程式的主要佈局快速呈現，並在內容可用時立即更新頁面。

鍵控服務注入

Blazor 現在支持使用 Inject 屬性注入鍵控服務。鍵可在相依性注入情境中實現服務註冊與使用的範圍設定。

新的 InjectAttribute.Key 屬性允許開發人員指定要注入的服務的鍵，為服務範圍開啟了新的可能性。

作為級聯參數訪問 `HttpContext`

Blazor .NET 8.0 引入了從靜態伺服器元件中作為級聯參數訪問當前 HttpContext 的能力。此增強功能特別有助於檢查和修改與 HTTP 上下文相關的標頭或其他屬性。

在 ASP.NET Core 之外渲染 Razor 元件

Blazor .NET 8.0 開放了在 HTTP 請求上下文之外渲染 Razor 元件的可能性。這種靈活性允許開發人員獨立於 ASP.NET Core 託管環境，將 Razor 元件直接渲染為字串或流。

此功能在需要生成 HTML 片段（例如電子郵件或靜態網站內容）的情境中特別方便。

段落支援

在 Blazor .NET 8.0 中，引入的 SectionOutlet 和 SectionContent 組件革新了內容管理。這些元件允許開發人員在佈局中定義佔位符，之後由特定頁面填充。

可以使用唯一名稱或物件 ID 來引用區段，從而在構建動態網頁佈局時提供靈活性和可重用性。

錯誤頁面支援

.NET 8.0 中的 Blazor 網頁應用程式現在具備強大的錯誤頁面支持，允許開發人員使用 ASP.NET Core 異常處理中介軟體定義自定義錯誤頁面。

預設錯誤頁面(Components/Pages/Error.razor)提供了一致的使用者體驗。即使啟用了互動功能，錯誤頁面仍以靜態伺服器元件渲染，以確保在異常情況下的穩定性。

`QuickGrid` 由實驗性轉為必備元素

高性能的網格元件QuickGrid已經從試驗狀態畢業成為 .NET 8 中 Blazor 框架的重要組成部分。

此元件簡化了表格數據的顯示，同時提供了排序、篩選、分頁和虛擬化等強大功能。在 ASP.NET Core Blazor QuickGrid 文件中了解更多關於 QuickGrid 的資訊。

路由到命名元素

Blazor .NET 8.0 引入了用戶端路由的支援，可以使用標準 URL 片段直接導航到頁面上的特定 HTML 元素。通過將 HTML 元素的標識符指定為標準 id 屬性，Blazor 在 URL 片段與元素標識符匹配時自動滾動到該元素。

根級連鎖值

Blazor .NET 8.0 通過引入根級級聯值來增強級聯值，這些值可以為整個組件層次結構註冊。現在支持命名的連續值和訂閱更新通知，提供更大的靈活性和控制能力。

虛擬化空內容

在 Virtualize 組件上的新 EmptyContent 參數使開發人員能夠在組件已加載且項目為空時提供內容，或 ItemsProviderResult.TotalItemCount` 為零。

這使開發人員能夠創建更直觀和使用者友好的介面。

電路管理與SignalR監控

Blazor .NET 8.0 引入了在沒有剩餘互動式伺服器元件時關閉電路的功能。這項優化釋放了伺服器資源，提升了整體效能。

此外，開發人員現在可以使用 CircuitHandler 上的 CreateInboundActivityHandler 方法，在伺服器端應用程式中監控入站電路活動。

提高 Jiterpreter 的運行時效能

Jiterpreter 是 .NET 8 中的一個新運行時功能，介紹了部分即時編譯。(即時編譯 (JIT))在 WebAssembly 上運行時的編譯支持。這導致運行時性能改善，為使用者提供更流暢的Blazor WebAssembly應用程式互動體驗。

提前執行 (AOT) SIMD 和異常處理

Blazor WebAssembly 的 AOT 編譯現在默認使用 WebAssembly 固定寬度 SIMD 和 WebAssembly 異常處理。這項策略性選擇顯著提升了執行時效能，提供更高效和更具回應性的使用者體驗。

Webcil 包裝以適合網路的部署

Blazor WebAssembly 現在使用 Webcil，一種對網絡友好的 .NET 程式集打包方式。這可確保在阻止下載或使用 .dll 檔案的環境中兼容，解決部署挑戰。 Webcil 默認啟用於 Blazor WebAssembly 應用程式。

Blazor WebAssembly 除錯改進

在 .NET 8 中，調試 Blazor WebAssembly 應用程式變得更加流暢。調試器現在會從 Visual Studio 偏好設定中配置的位置下載符號數據，提升了使用 NuGet 套件的應用程式的調試體驗。

此外，現在也支援在 Firefox 中進行除錯，這需要配置遠程除錯並通過 .NET WebAssembly 除錯代理進行連接。

內容安全政策 (CSP) 相容性

在 .NET 8.0 中，Blazor WebAssembly 消除了在指定內容安全政策時啟用 unsafe-eval 腳本來源的需求。(CSP). 此增強功能簡化了安全配置，使在 Blazor WebAssembly 應用程式中強制執行健全的 CSP 更加容易。

在元件生命週期之外處理例外狀況

引入 ComponentBase.DispatchExceptionAsync 允許開發人員處理拋出在 Razor 元件生命週期調用堆疊之外的例外。

此功能允許元件的程式碼將異常視為生命週期方法異常，從而確保更一致且受控的錯誤處理機制。

推出Iron Suite

Iron Suite by Iron Software由 Iron Software 開發，包含數個有用的庫，使開發者能夠構建強大的 Blazor 應用程式。它提供解決方案，可添加 PDF 功能、Excel 或 CSV 文件功能、圖片轉文字識別、條碼和 QR 碼生成與讀取，並具備壓縮或解壓縮文件的能力。

Iron Suite 是在使用 Blazor WebAssembly 託管模型或任何 Microsoft 技術（包括 Blazor WebAssembly 應用程序、Blazor 伺服器應用程序、ASP.NET Core MVC APP、ASP.NET Core Web APIs 或任何以 .NET 執行時建構的應用）時的完美選擇，無論是任何版本的 .NET。

Iron Suite 套件庫

IronPDF用於無縫創建、操作和提取 PDF 文件中的數據。
IronPDF 的突出功能是轉換HTML轉PDF, 完整保留佈局和樣式。它非常適合從網頁內容生成 PDF，包括報告、發票和文件。您可以將 HTML 文件、URL 或 HTML 字串轉換為 PDF 文件。

    using IronPdf;

    class Program
    {
        static void Main(string[] args)
        {
            var renderer = new ChromePdfRenderer();

            // 1. Convert HTML String to PDF
            var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
            var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
            pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

            // 2. Convert HTML File to PDF
            var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
            var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
            pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

            // 3. Convert URL to PDF
            var url = "http://ironpdf.com"; // Specify the URL
            var pdfFromUrl = renderer.RenderUrlAsPdf(url);
            pdfFromUrl.SaveAs("URLToPDF.pdf");
        }
    }

    using IronPdf;

    class Program
    {
        static void Main(string[] args)
        {
            var renderer = new ChromePdfRenderer();

            // 1. Convert HTML String to PDF
            var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
            var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
            pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

            // 2. Convert HTML File to PDF
            var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
            var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
            pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

            // 3. Convert URL to PDF
            var url = "http://ironpdf.com"; // Specify the URL
            var pdfFromUrl = renderer.RenderUrlAsPdf(url);
            pdfFromUrl.SaveAs("URLToPDF.pdf");
        }
    }

Imports IronPdf

	Friend Class Program
		Shared Sub Main(ByVal args() As String)
			Dim renderer = New ChromePdfRenderer()

			' 1. Convert HTML String to PDF
			Dim htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>"
			Dim pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent)
			pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf")

			' 2. Convert HTML File to PDF
			Dim htmlFilePath = "path_to_your_html_file.html" ' Specify the path to your HTML file
			Dim pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath)
			pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf")

			' 3. Convert URL to PDF
			Dim url = "http://ironpdf.com" ' Specify the URL
			Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
			pdfFromUrl.SaveAs("URLToPDF.pdf")
		End Sub
	End Class

VB C#

2.IronOCR (光學字符識別)從掃描的圖像或 PDF 擷取文本，以提升資料的可訪問性。