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

Blazor 是由 Microsoft 在 2018 年推出的 ASP.NET 框架。Blazor 框架的推出非常有利，因為它允許開發人員使用 C# 而不是 JavaScript 來創建單頁網頁應用程序。

Blazor 讓你可以使用 C# 構建交互式網頁用戶界面，並在瀏覽器中使用 WebAssembly 運行。 (縮寫為 Wasm)Blazor 應用程式由可重複使用的網頁 UI 元件組成，這些元件使用 C#、HTML 和 CSS 實作。客戶端和伺服器端的代碼都是使用 C# 撰寫的，允許您共用代碼和庫。

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

或者，Blazor 也可以在伺服器上運行您的客戶端邏輯。客戶端的 UI 事件通過 SignalR 發送回伺服器，SignalR 是一個即時消息框架。一旦執行完成，所需的 UI 更改將發送到客戶端並合併到 Document Object Model 中。 (DOM).

什麼是 WebAssembly?

Blazor WebAssembly 是單頁應用程式 (SPA) 使用 .NET 建立互動式客戶端 Web 應用程式的框架。Blazor WebAssembly 使用開放的 Web 標準，不需要插件或將代碼重新編譯成其他語言，即可開發。Blazor WebAssembly 能夠在所有現代 Web 瀏覽器中運行。

在 Web 瀏覽器中運行 .NET 代碼是通過 WebAssembly 實現的。WebAssembly 是一種緊湊的字節碼格式，優化了快速下載和最大執行速度。WebAssembly 是一種開放的 Web 標準，並且在 Web 瀏覽器中不需要插件即可支持。

WebAssembly 代碼可以通過 JavaScript 訪問瀏覽器的全部功能。這被稱為 JavaScript 互操作性，通常縮寫為 JavaScript interop 或 JS interop。通過 WebAssembly 執行的 .NET 代碼在瀏覽器的 JavaScript 沙盒中運行，沙盒為客戶端計算機提供了防範惡意行為的保護。

建立原生應用程式

我們可以使用現有的Blazor Web UI元件與Blazor Hybrid來建立原生客戶端應用程式。Blazor元件可以在移動端、桌面端和網頁端共享，同時充分利用原生客戶端功能。我們可以使用Blazor Hybrid來使用.NET Multi-platform App UI建立跨平台應用程式。 (MAUI)，或現代化現有的 Windows Presentation Foundation (WPF) 和 Windows Forms 應用程式。

在 Blazor Hybrid 應用程式中，Razor 元件本地運行於裝置上。元件通過本地 interop 通道渲染到嵌入式 Web View 控制。元件不是在瀏覽器中運行，也不涉及 WebAssembly。Razor 元件加載和執行程式碼非常快，並通過 .NET 平台完全訪問裝置的原生功能。

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

建立 Blazor Server 應用程式

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

• 打開 Visual Studio。
• 點擊 "Create New Project" 按鈕。
• 選擇 "Blazor Server App Template" 模板。
• 點擊 "Next" 按鈕。
• 為您的應用程式命名。
• 點擊 "Next" 按鈕。
• 選擇目標架構。
• 點擊 "Create Project" 按鈕。

一個新的專案將會如下面所示被建立。

為了給您一個可以立即運行的簡單 Blazor 應用程式，已建立幾個檔案。

• Program.cs 是應用程式的入口點，啟動伺服器並配置應用程式服務和中介軟體。
• App.razor 是應用程式的根組件。
• Pages 目錄包含一些應用程式的範例網頁。
• Properties 目錄中的 launchSettings.json 檔案定義了本地開發環境的不同設定檔設定。在建立專案時會自動分配一個埠號並保存到此檔案中。

運行此範本應用程式。

運行 Blazor 應用程式

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

首頁元件

點擊側邊菜單上的計數器。您會看到，點擊按鈕會在不更改或重新加載頁面的情況下遞增計數器。在網頁應用程式中動態增加計數器通常需要 JavaScript，但使用 Blazor，我們可以使用 C# 實現這一點。這也是為什麼 ASP.NET 開發人員非常喜歡 Blazor 的原因。它可以幫助 .NET 開發人員快速且輕鬆地構建網頁應用程式。

計數器元件

我們可以在解決方案的 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

根據頂部的 @page 指令，在瀏覽器中對 /counter 的請求將使 Counter 組件呈現其內容。

每次選擇 點擊我 按鈕時：

• 執行 onclick 事件。
• 調用 IncrementCount 方法。
• currentCount 變數遞增。
• 組件被重新渲染以顯示更新的計數。

每個 .razor 文件定義了一個可以重用的 UI 組件。

在 Visual Studio 中打開 Index.razor 文件。由於您創建項目時該文件已被創建，因此 Index.razor 文件已經存在。它位於之前創建的 BlazorApp 目錄中的 Pages 資料夾內。

Fetch Component

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

從URL生成PDF

首先，我們需要安裝第三方庫來生成PDF文件。我們將使用的庫是 IronPDF. 使用簡單，功能豐富，並且開發免費。你可以通過閱讀了解更多在 Blazor 應用程式中使用 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

以上是用於生成 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

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

在輸入框中貼上網址，然後點擊生成 PDF。將生成 PDF 文件，該文件可以在應用程式資料夾中看到。

如下所示打開 PDF 文件。

我們只用了三行代碼就從 URL 生成了一個 PDF。這就是 IronPDF 的強大之處。

IronPDF 是由 Iron Software 提供的，它是 Iron Suite您可以省錢，花費兩個產品的費用購買五個產品 購買 完整的Iron Suite。

摘要

Blazor 是一個用於構建互動式客戶端網頁用戶界面的框架 .NET

• 使用C#而不是JavaScript來創建豐富的互動式UI。
• 共用用.NET撰寫的伺服器端和客戶端應用邏輯。
• 將UI渲染為HTML和CSS，以獲得廣泛的瀏覽器支援，包括移動瀏覽器。
• 與現代托管平台集成，如Docker。
• 使用.NET和Blazor構建混合桌面和移動應用程序。

使用.NET進行客戶端Web開發具有以下優勢：

• 用C#代替JavaScript編寫程式碼。
• 利用現有的.NET庫生態系統。
• 在伺服器和客戶端之間共享應用邏輯。
• 受益於.NET的性能、可靠性和安全性。
• 在Windows、Linux或macOS上的開發環境中保持高生產力，如Visual Studio或Visual Studio Code。
• 基於一組穩定、功能豐富且易於使用的語言、框架和工具進行開發。