Blazor 是微软在 2018 年推出的 ASP.NET Framework。Blazor 框架的推出具有优势，因为它允许开发者使用 C# 而非 JavaScript 创建单页面Web应用程序。

Blazor 允许您使用在浏览器中通过 WebAssembly（缩写为 Wasm）运行的 C# 构建互动型 Web UI。 Blazor 应用程序由使用 C#、HTML 和 CSS 实现的可重用 Web UI 组件组成。 客户端和服务器端代码均以 C# 编写，允许您共享代码和库。

Blazor 可以使用 WebAssembly 将客户端的 C# 代码直接在浏览器中运行。 因为它是运行在 WebAssembly 上的 .NET，所以您可以重用来自应用程序服务器端部分的代码和库。

或者，Blazor 可以在服务器上运行您的客户端逻辑。 客户端 UI 事件通过 SignalR 发送回服务器，SignalR 是一个实时消息传递框架。 一旦执行完成，所需的 UI 更改会发送到客户端并合并到文档对象模型 (DOM) 中。

什么是 WebAssembly？

Blazor WebAssembly 是一个单页应用程序 (SPA) 框架，用于使用 .NET 构建互动型客户端 Web 应用程序。 Blazor WebAssembly 使用开放的 Web 标准，允许开发不需要插件或将代码重新编译为其他语言。 Blazor WebAssembly 在所有现代 Web 浏览器中运行。

.NET 代码在 Web 浏览器中运行得益于 WebAssembly。 WebAssembly 是一种紧凑的字节码格式，经过优化以实现快速下载和最大执行速度。 WebAssembly 是开放 Web 标准，并得到 Web 浏览器支持，无需插件。

WebAssembly 代码可以通过 JavaScript 访问浏览器的完整功能。 称为 JavaScript 互操作性，通常缩写为 JavaScript interop 或 JS interop。 通过 WebAssembly 执行的 .NET 代码在浏览器的 JavaScript 沙箱中运行，并有沙箱提供的保护来防止对客户端计算机的恶意操作。

构建本机应用程序

我们可以使用现有的 Blazor Web UI 组件和 Blazor Hybrid 构建本机客户端应用程序。 Blazor 组件可以在移动、桌面和 Web 上共享，同时充分利用对本机客户端功能的完全访问。 我们可以使用 Blazor Hybrid 构建跨平台应用程序，使用 .NET 多平台应用程序 UI（MAUI），或将现有的 Windows 表示基础（WPF）和 Windows 窗体应用程序现代化。

在 Blazor Hybrid 应用程序中，Razor 组件在设备上本机运行。组件通过本地互操作通道渲染到嵌入的 Web 视图控件。 组件不会在浏览器中运行，也不涉及 WebAssembly。 Razor 组件快速加载和执行代码，并且通过 .NET 平台组件可以完全访问设备的本机功能。

让我们创建一个演示应用程序以更好地理解 Blazor 应用程序的工作原理。

创建 Blazor 服务器应用程序

要创建我们的第一个 Blazor 应用程序，我们需要创建一个新的 Visual Studio 项目。

• 打开 Visual Studio。
• 点击创建新项目按钮。
• 选择 Blazor 服务器应用程序模板。
• 点击下一步按钮。
• 为您的应用程序命名。
• 点击下一步按钮。
• 选择目标框架。
• 点击创建项目按钮。

将创建如下所示的新项目。

创建了多个文件，为您提供了一个可以直接运行的简单 Blazor 应用程序。

• Program.cs 是启动服务器的应用程序入口点，您可以在其中配置应用程序服务和中间件。
• App.razor 是应用程序的根组件。
• Pages 目录包含应用程序的一些示例网页。
• launchSettings.json 文件位于 Properties 目录中，用于定义本地开发环境的不同配置设置。 在项目创建时会自动分配一个端口号，并将其保存到此文件中。

运行此模板应用程序。

运行 Blazor 应用程序

模板中自动创建了三个 Blazor 组件。

主页组件

在侧边菜单中点击计数器。 您会看到点击按钮会增加计数器，而不会更改或重新加载页面。 在 Web 应用程序中动态地增加计数器通常需要 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;

    // This method increments the counter value when the button is clicked
    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;

    // This method increments the counter value when the button is clicked
    private void IncrementCount()
    {
        currentCount++;
    }
}

浏览器中对 /counter 的请求，如顶部 @page 指令所示，会导致 Counter 组件渲染其内容。

每次选择 点击我 按钮时：

• 执行 onclick 事件。
• 调用了 IncrementCount 方法。
• currentCount 被递增。
• 渲染组件以显示更新后的计数。

每个 .razor 文件定义了一个可重用的UI组件。

在 Visual Studio 中打开 Index.razor 文件。 Index.razor 文件已经存在，因为您创建项目时已创建。 它位于之前创建的 BlazorApp 目录中的 Pages 文件夹中。

获取组件

还有另一个名为"获取组件"的组件。 该组件还注入了一个用于后端服务器开发的服务。 让我们替换此代码，以便更好地理解 Blazor Web 开发的强大功能，生成 PDF。

从 URL 生成 PDF

首先，我们需要安装一个第三方库来生成 PDF 文件。 我们将使用的库是 IronPDF - PDF 生成 适用于 .NET。 它易于使用，功能丰富，并且免费用于开发。 您可以通过阅读 IronPDF Blazor 文档 了解有关在您的 Blazor 应用程序中使用 IronPDF 的更多信息。

安装 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; }

    // This method calls the service to generate a PDF document from a given URL
    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; }

    // This method calls the service to generate a PDF document from a given URL
    protected async Task GeneratePDF()
    {
        await ForecastService.GeneratePDFfromURL(URL);
    }
}

以上是用于生成 PDF 文件的客户端 Blazor 代码。 它定义了一个按钮和一个输入框。 输入字段绑定到 URL 变量。

现在，让我们为我们的应用编写服务器端代码。

打开 WeatherForecastService.cs 文件，并将所有现有代码替换为以下代码片段：

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

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        // This method generates a PDF file asynchronously from a provided URL
        public async Task GeneratePDFfromURL(string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

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

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        // This method generates a PDF file asynchronously from a provided URL
        public async Task GeneratePDFfromURL(string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

Imports System
Imports System.Threading.Tasks
Imports IronPdf

Namespace myBlazorAPP.Data
	Public Class WeatherForecastService
		' This method generates a PDF file asynchronously from a provided URL
		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

Imports System
Imports System.Threading.Tasks
Imports IronPdf

Namespace myBlazorAPP.Data
	Public Class WeatherForecastService
		' This method generates a PDF file asynchronously from a provided URL
		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

让我们运行我们的应用程序以查看输出。

在输入框中粘贴一个 URL 并点击生成 PDF。 PDF 文件将被生成，并且可以在应用程序文件夹中看到该文件。

如下所示打开 PDF 文件。

我们只用三行代码就从 URL 生成了 PDF。 这就是 IronPDF 的力量。

IronPDF 由 Iron 软件提供，并且是 Iron 软件的 Iron Suite 产品的一部分。 您可以通过 获取完整的 Iron Suite 购买五个产品，只需两个产品的价格。

摘要

Blazor 是一个使用 微软 .NET Framework 构建互动型客户端 Web UI 的框架。

• 使用 C# 而不是 JavaScript 创建丰富的交互式 UI。

• 共享以 .NET 编写的服务器端和客户端应用程序逻辑。

• 将 UI 渲染为 HTML 和 CSS，以支持广泛的浏览器，包括移动浏览器。

• 与现代托管平台集成，如 Docker。

• 使用 .NET 和 Blazor 构建混合桌面和移动应用程序。 using .NET 进行客户端 Web 开发提供了以下优势：

• 使用 C# 编写代码而不是 JavaScript。

• 利用现有的 .NET 库生态系统。

• 在服务器和客户端之间共享应用程序逻辑。

• 受益于 .NET 的性能、可靠性和安全性。

• 使用 Visual Studio 或 Visual Studio Code 等开发环境，在 Windows、Linux 或 macOS 上保持高效。

• 构建在一套通用的语言、框架和工具之上，这些工具稳定、功能丰富且易于使用。