.NET 幫助

Blazor 框架是什麼（對開發人員的工作原理教程）

發佈 2023年1月31日

Blazor 是由微軟在 2018 年推出的 ASP.NET 框架。Blazor 框架的推出很有優勢，因為它允許開發人員使用 C# 而不是 JavaScript 來創建單頁 Web 應用程式。

Blazor 讓您可以使用 C# 建立互動式網頁使用者介面，並透過 WebAssembly 在瀏覽器中運行。(縮寫為 Wasm). Blazor 應用程式由使用 C#、HTML 和 CSS 實現的可重用網頁 UI 元件組成。客戶端和伺服器代碼都用 C# 編寫，允許您共享代碼和庫。

Blazor 可以使用 WebAssembly 直接在瀏覽器中運行您的客戶端 C# 代碼。因為它是在 WebAssembly 上運行的 .NET，您可以重複使用應用程式伺服器端部分的代碼和函式庫。

或者，Blazor 可以在伺服器上執行您的客戶端邏輯。客戶端 UI 事件使用 SignalR（即時消息通信框架）發送回伺服器。執行完成後，所需的 UI 變更會發送給客戶端並合併進入文件物件模型（DOM）中。(DOM).

什麼是 WebAssembly？

Blazor WebAssembly 是一種單頁應用程序(SPA)用.NET建立互動客戶端網頁應用程式的框架。 Blazor WebAssembly 使用開放的網頁標準，允許在不需要插件或將代碼重新編譯成其他語言的情況下進行開發。 Blazor WebAssembly 在所有現代網頁瀏覽器中運作。

透過 WebAssembly 可以在網頁瀏覽器中執行 .NET 程式碼。 WebAssembly 是一種緊湊的位元碼格式，經過優化以實現快速下載和最大執行速度。 WebAssembly 是一個開放的網頁標準，並在 web 瀏覽器中支援，無需插件。

WebAssembly 程式碼可以透過 JavaScript 訪問瀏覽器的全部功能。被稱為 JavaScript 互操作性，通常簡稱為 JavaScript interop 或 JS interop。通過 WebAssembly 執行的 .NET 代碼在瀏覽器的 JavaScript 沙盒中運行，並享有沙盒提供的針對客戶端機器上惡意操作的保護。

建置原生應用程式

我們可以使用現有的 Blazor Web UI 組件與 Blazor Hybrid 建立本機用戶端應用程式。 Blazor 組件可以在行動裝置、桌面和網路之間共用，同時充分利用本地用戶端的功能。我們可以使用 Blazor Hybrid 結合 .NET 跨平台應用程式 UI 建立跨平台應用程式。(MAUI)，或現代化現有的 Windows Presentation Foundation(WPF)和 Windows Forms 應用程式。

在 Blazor 混合應用程式中，Razor 元件以原生方式在設備上運行。元件通過本地互通通道渲染到嵌入的 Web View 控制項。元件不在瀏覽器中運行，且不涉及 WebAssembly。 Razor 元件載入和執行程式碼迅速，而且元件可以透過 .NET 平台完全存取裝置的原生功能。

讓我們創建一個演示應用程序，以更好地了解 Blazor 應用程序的運作方式。

建立 Blazor Server 應用程式

要建立我們的第一個 Blazor 應用程式，我們需要創建一個新的 Visual Studio 專案。

打開 Visual Studio。
點擊「Create New Project」按鈕。
選擇 Blazor 伺服器應用程式範本。
點擊下一步按鈕。
命名您的應用程式。
點擊下一步按鈕。
選擇一個目標框架。
按一下「Create Project」按鈕。
如下面所示，將創建一個新項目。
創建了數個檔案來為您提供一個簡單的 Blazor 應用程式，該應用程式已準備好運行。
Program.cs 是啟動伺服器的應用程式進入點，也是您配置應用程式服務和中介軟體的地方。
App.razor 是應用程式的根元件。
Pages 目錄包含應用程式的一些範例網頁。
Properties 目錄中的 launchSettings.json 檔案定義了本地開發環境的不同配置設定。在專案創建時，系統會自動分配一個埠號並保存到此文件中。
運行此模板應用程式。

運行 Blazor 應用程序

在模板中自動創建了三個Blazor組件。

首頁元件

點擊側邊菜單上的 Counter。您會發現點擊按鈕會增加計數，而不會更改或重新加載頁面。在網路應用程式中動態增加計數器通常需要使用 JavaScript，但透過 Blazor，我們可以使用 C# 來實現這一點。這就是 ASP.NET 開發者如此喜愛 Blazor 的原因。它幫助 .NET 開發人員快速輕鬆地建立 Web 應用程式。

計數器元件

我們可以在解決方案的 Pages 資料夾中的 Counter.razor 文件裡，看到 Counter 元件的程式碼。

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Friend page "/counter" (Of h1) Counter</h1> (Of p) Current count
	Inherits currentCount</p> <button class="btn btn-primary" onclick="IncrementCount"> Click [me]</button> code

	Private currentCount As Integer = 0

	Private Sub IncrementCount()
		currentCount += 1
	End Sub
End Class

VB C#

由於頂部指定的 @page 指令，瀏覽器中的 /counter 請求會導致 Counter 元件渲染其內容。

每次選擇Click me按鈕時：

執行 onclick 事件。
IncrementCount 方法被呼叫。
currentCount 已遞增。
該元件被渲染以顯示更新後的計數。
每個 .razor 文件定義了一個可以重複使用的 UI 元件。
在 Visual Studio 中打開 Index.razor 檔案。 Index.razor 檔案已經存在，因為它是在您創建專案時建立的。它位於之前建立的 BlazorApp 目錄中的 Pages 資料夾內。

抓取元件

有另一個名為「Fetch Component」的組件。此元件還注入用於後端伺服器端開發的服務。讓我們替換此程式碼以從 URL 生成 PDF，來更好地了解 Blazor 網頁開發的強大功能。

從 URL 生成 PDF

首先，我們需要安裝一個第三方庫來生成PDF文件。我們將使用的庫是IronPDF - .NET 的 PDF 生成. 它易於使用，包含許多功能，且開發時免費。您可以通過閱讀有關在您的 Blazor 應用中使用 IronPDF 以了解更多信息IronPDF Blazor 文件.

安裝 IronPDF NuGet 套件

我們也可以在 Blazor WebAssembly 應用程式中安裝 IronPDF NuGet 套件，類似於普通的 ASP.NET Core 應用程式。

開啟 NuGet 套件管理器主控台，然後輸入以下命令：

Install-Package IronPdf

該函式庫將按如下所示安裝。

從 FetchData.razor 文件中刪除所有現有代碼，並添加以下代碼示例：

@page "/fetchdata"

@using myBlazorAPP.Data
@inject WeatherForecastService ForecastService

<h1>Generate PDF FROM URL</h1>
<p>This component demonstrates generating PDF from URL using IronPDF in Blazor Application</p>
<input type="text" @bind="URL" placeholder="URL HERE..."/>
<button @onclick="generatePDF" > Generate PDF </button>

@code {

    private string URL { get; set; }
    protected async Task generatePDF()
    {
        await ForecastService.GeneratePDFfromURL(URL);
    }
}

@page "/fetchdata"

@using myBlazorAPP.Data
@inject WeatherForecastService ForecastService

<h1>Generate PDF FROM URL</h1>
<p>This component demonstrates generating PDF from URL using IronPDF in Blazor Application</p>
<input type="text" @bind="URL" placeholder="URL HERE..."/>
<button @onclick="generatePDF" > Generate PDF </button>

@code {

    private string URL { get; set; }
    protected async Task generatePDF()
    {
        await ForecastService.GeneratePDFfromURL(URL);
    }
}

'INSTANT VB TODO TASK: The following line could not be converted:
page "/fetchdata" [using] myBlazorAPP.Data inject WeatherForecastService ForecastService (Of h1) Generate PDF FROM URL</h1> (Of p) This component demonstrates generating PDF from URL using IronPDF in Blazor Application</p> <input type="text" bind="URL" placeholder="URL HERE..."/> <button onclick="generatePDF" > Generate PDF </button> code
If True Then

	private String URL {get;set;}
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	protected async Task generatePDF()
'	{
'		await ForecastService.GeneratePDFfromURL(URL);
'	}
End If

VB C#

以上是用於生成 PDF 文件的客戶端 Blazor 代碼。它定義了一個按鈕和一個輸入框。輸入欄位綁定到URL變數。

現在，讓我們為應用程式撰寫伺服器端代碼。

打開 WeatherForecastService.cs 文件，將所有現有代碼替換為以下代碼片段：

using System;
using System.Linq;
using System.Threading.Tasks;
using IronPdf;

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        public async Task GeneratePDFfromURL (string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

using System;
using System.Linq;
using System.Threading.Tasks;
using IronPdf;

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        public async Task GeneratePDFfromURL (string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

Imports System
Imports System.Linq
Imports System.Threading.Tasks
Imports IronPdf

Namespace myBlazorAPP.Data
	Public Class WeatherForecastService
		Public Async Function GeneratePDFfromURL(ByVal URL As String) As Task
			Dim renderer As New ChromePdfRenderer()
			Dim pdfDoc = Await renderer.RenderUrlAsPdfAsync(URL)
			pdfDoc.SaveAs("myFile.pdf")
		End Function
	End Class
End Namespace

VB C#

讓我們運行應用程式來查看輸出。