.NET 帮助

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

发布 2023年一月31日

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

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

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

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

什么是 WebAssembly？

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

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

WebAssembly 代码可以通过 JavaScript 访问浏览器的全部功能。它被称为 JavaScript Interoperability，通常简称为 JavaScript interop 或 JS interop。通过 WebAssembly 执行的 .NET 代码在浏览器的 JavaScript 沙箱中运行，沙箱提供保护，防止客户端机器上的恶意行为。

构建本地应用程序

我们可以通过 Blazor Hybrid 使用现有的 Blazor Web UI 组件构建本地客户端应用程序。 Blazor 组件可在移动、桌面和网络上共享，同时充分利用本地客户端功能。我们可以使用 Blazor Hybrid 与 .NET 多平台应用程序 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 是应用程序的根组件。
页面目录包含该应用程序的一些示例网页。
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

VB C#

根据顶部 @page 指令的指定，在浏览器中请求 /counter 会导致 Counter 组件渲染其内容。

每次选择点击我按钮：

执行 onclick 事件。
调用 IncrementCount 方法。
currentCount 会递增。
渲染组件以显示更新的计数。
每个 .razor 文件都定义了一个可重复使用的用户界面组件。
在 Visual Studio 中打开 Index.razor 文件。 Index.razor 文件已经存在，因为它是在您创建项目时创建的。它位于之前创建的 BlazorApp 目录下的 Pages 文件夹中。

获取组件

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

从URL生成PDF

首先，我们需要安装一个用于生成 PDF 文件的第三方库。我们将使用的库是IronPDF - PDF Generation for .NET. 它易于使用，包含许多功能，并且免费用于开发。您可以通过阅读以下内容了解在 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#

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