什么是Blazor框架（开发者教程）

Blazor 是微软于 2018 年推出的 ASP.NET 框架。Blazor 框架的推出非常有利，因为它允许开发人员使用 C# 而不是 JavaScript 创建单页 Web 应用程序。

Blazor 可让您使用 C# 创建交互式 Web UI，并通过 WebAssembly 在浏览器中运行。 (缩写为 Wasm).Blazor 应用程序由使用 C#、HTML 和 CSS 实现的可重用网络用户界面组件组成。客户端和服务器代码均使用 C# 编写，允许您共享代码和库。

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

另外，Blazor还可以在服务器上运行客户端逻辑。客户端用户界面事件通过实时消息框架SignalR发送回服务器。执行完成后，所需的用户界面更改将发送到客户端，并合并到文档对象模型中。 (DOM).

什么是 WebAssembly？

Blazor WebAssembly是一款单页面应用程序 (SPA) Blazor WebAssembly是一个用于使用.NET构建交互式客户端网络应用程序的框架。Blazor WebAssembly采用开放式网络标准，无需插件或将代码重新编译为其他语言即可进行开发。Blazor WebAssembly可在所有现代网络浏览器中运行。

WebAssembly使在网络浏览器中运行.NET代码成为可能。WebAssembly 是一种紧凑的字节码格式，经过优化，可实现快速下载和最高执行速度。WebAssembly 是一种开放的网络标准，网络浏览器无需插件即可支持。

WebAssembly 代码可以通过 JavaScript 访问浏览器的全部功能。通过 WebAssembly 执行的 .NET 代码在浏览器的 JavaScript 沙箱中运行，沙箱提供保护，防止客户端机器上的恶意操作。

构建本地应用程序

我们可以通过Blazor Hybrid使用现有的Blazor Web UI组件构建本地客户端应用程序。Blazor组件可在移动、桌面和网络之间共享，同时充分利用本地客户端功能。我们可以使用Blazor Hybrid与.NET多平台应用程序用户界面（Multi-platform App UI）一起构建跨平台应用程序。 (毛伊岛)或更新现有的 Windows Presentation Foundation (WPF) 和 Windows 窗体应用程序。

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

让我们创建一个演示应用程序，以便更好地了解Blazor应用程序是如何工作的。

创建 Blazor 服务器应用程序

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

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

如下图所示，将创建一个新项目。

我们创建了几个文件，为您提供一个可随时运行的简单 Blazor 应用程序。

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

运行此模板应用程序。

运行 Blazor 应用程序

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

主页组件

点击侧边菜单上的计数器。您将看到，点击该按钮后，计数器会递增，而无需更改或重新加载页面。在网络应用程序中动态增加计数器通常需要 JavaScript，但有了 Blazor，我们就可以用 C# 来实现。这就是 ASP.NET 开发人员如此喜欢 Blazor 的原因。它可以帮助 .NET 开发人员快速、轻松地构建网络应用程序。

计数器组件

我们可以在解决方案页面文件夹下的 Counter.razor 文件中看到计数器组件的代码。

@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 文件都定义了一个可重复使用的用户界面组件。

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

获取组件

还有一个名为 "Fetch Component "的组件。该组件还注入了用于后台服务器端开发的服务。让我们替换这段代码，从 URL 生成 PDF，以便更好地了解 Blazor Web 开发的强大功能。

从 URL 生成 PDF

首先，我们需要安装一个用于生成 PDF 文件的第三方库。我们要使用的库是 IronPDF.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

让我们运行应用程序，看看输出结果。

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

打开 PDF 文件，如下图所示。

我们仅用三行代码就从 URL 生成了 PDF。这就是 IronPDF 的强大之处。

IronPDF 由 Iron 软件公司提供，是 IronPDF 的一部分。 Iron Suite.您可以通过以下方法省钱，以购买两种产品的成本购买五种产品 采购 完整的铁套房。

摘要

Blazor 是一个用于构建交互式客户端网络用户界面的框架，其功能包括 .NET

• 使用 C# 而不是 JavaScript 创建丰富的交互式用户界面。
• 共享用 .NET 编写的服务器端和客户端应用程序逻辑。
• 将用户界面渲染为 HTML 和 CSS，以获得广泛的浏览器支持，包括移动浏览器。
• 与 Docker 等现代托管平台集成。
• 使用 .NET 和 Blazor 构建混合桌面和移动应用程序。

使用.NET进行客户端网络开发具有以下优势：

• 用 C# 而不是 JavaScript 编写代码。
• 利用现有的 .NET 生态系统中的 .NET 库。
• 跨服务器和客户端共享应用程序逻辑。
• 受益于 .NET 的性能、可靠性和安全性。
• 利用 Visual Studio 或 Visual Studio Code 等开发环境，在 Windows、Linux 或 macOS 上保持高效率。
• 基于一套稳定、功能丰富且易于使用的通用语言、框架和工具进行开发。