ASP.NET Core Blazor 简介Introduction to ASP.NET Core Blazor

欢迎使用 Blazor!Welcome to Blazor!

Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架:Blazor is a framework for building interactive client-side web UI with .NET:

  • 使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI。Create rich interactive UIs using C# instead of JavaScript.
  • 共享使用 .NET 编写的服务器端和客户端应用逻辑。Share server-side and client-side app logic written in .NET.
  • 将 UI 呈现为 HTML 和 CSS,以支持众多浏览器,其中包括移动浏览器。Render the UI as HTML and CSS for wide browser support, including mobile browsers.
  • 与新式托管平台(如 Docker)集成。Integrate with modern hosting platforms, such as Docker.

使用 .NET 进行客户端 Web 开发可提供以下优势:Using .NET for client-side web development offers the following advantages:

  • 使用 C# 代替 JavaScript 来编写代码。Write code in C# instead of JavaScript.
  • 利用现有的 .NET 库生态系统。Leverage the existing .NET ecosystem of .NET libraries.
  • 在服务器和客户端之间共享应用逻辑。Share app logic across server and client.
  • 受益于 .NET 的性能、可靠性和安全性。Benefit from .NET's performance, reliability, and security.
  • 在 Windows、Linux 和 macOS 上使用 Visual Studio 保持高效工作。Stay productive with Visual Studio on Windows, Linux, and macOS.
  • 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

组件Components

Blazor应用基于组件。Blazor apps are based on components. Blazor 中的组件是指 UI 元素,例如页面、对话框或数据输入窗体。A component in Blazor is an element of UI, such as a page, dialog, or data entry form.

组件是内置到 .NET 程序集的 .NET C# 类,它们用于:Components are .NET C# classes built into .NET assemblies that:

  • 定义灵活的 UI 呈现逻辑。Define flexible UI rendering logic.
  • 处理用户事件。Handle user events.
  • 可以嵌套和重用。Can be nested and reused.
  • 可作为 Razor 类库NuGet 包共享和分发。Can be shared and distributed as Razor class libraries or NuGet packages.

组件类通常以 Razor 标记页(文件扩展名为 .razor)的形式编写。The component class is usually written in the form of a Razor markup page with a .razor file extension. Blazor 中的组件有时被称为 Razor 组件。Components in Blazor are formally referred to as Razor components. Razor 是一种语法,用于将 HTML 标记与专为提高开发人员工作效率而设计的 C# 代码结合在一起。Razor is a syntax for combining HTML markup with C# code designed for developer productivity. 借助 Razor,可使用 Visual Studio 中的 IntelliSense 编程支持在同一文件中的 HTML 标记与 C# 之间切换。Razor allows you to switch between HTML markup and C# in the same file with IntelliSense programming support in Visual Studio. Razor Pages 和 MVC 也使用 Razor。Razor Pages and MVC also use Razor. 与基于请求/响应模型生成的 Razor Pages 和 MVC 不同,组件专门用于处理客户端 UI 逻辑和构成。Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.

Blazor 使用 UI 构成的自然 HTML 标记。Blazor uses natural HTML tags for UI composition. 下面的 Razor 标记演示了一个组件 (Dialog.razor),它显示一个对话框,并处理在用户选择按钮时发生的事件:The following Razor markup demonstrates a component (Dialog.razor) that displays a dialog and processes an event when the user selects a button:

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public string Title { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

在上述示例中,OnYes 是由按钮的 onclick 事件触发的 C# 方法。In the preceding example, OnYes is a C# method triggered by the button's onclick event. 对话框的文本 (ChildContent) 和标题 (Title) 由在其 UI 中使用此组件的下述组件提供。The dialog's text (ChildContent) and title (Title) are provided by the following component that uses this component in its UI.

使用 HTML 标记将 Dialog 组件嵌入到另一个组件中。The Dialog component is nested within another component using an HTML tag. 在以下示例中,Index 组件 (Pages/Index.razor) 使用前面的 Dialog 组件。In the following example, the Index component (Pages/Index.razor) uses the preceding Dialog component. 标记的 Title 属性向 Dialog 组件的 Title 属性传递标题的值。The tag's Title attribute passes a value for the title to the Dialog component's Title property. Dialog 组件的文本 (ChildContent) 由 <Dialog> 元素的内容设置。The Dialog component's text (ChildContent) are set by the content of the <Dialog> element. Index 组件添加 Dialog 组件后,Visual Studio 中的 IntelliSense 可加快使用语法和参数补全进行开发的速度。When the Dialog component is added to the Index component, IntelliSense in Visual Studio speeds development with syntax and parameter completion.

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

在浏览器中访问父级 Index 组件时,将呈现该对话框。The dialog is rendered when the Index component is accessed in a browser. 当用户选择此按钮时,浏览器的开发人员工具控制台会显示由 OnYes 方法编写的消息:When the button is selected by the user, the browser's developer tools console shows the message written by the OnYes method:

在 Index 组件中嵌入的浏览器内呈现 Dialog 组件。

组件呈现为浏览器文档对象模型 (DOM) 的内存中表现形式,它被称为“呈现树”,用于以灵活高效的方式更新 UI。Components render into an in-memory representation of the browser's Document Object Model (DOM) called a render tree, which is used to update the UI in a flexible and efficient way.

Blazor WebAssembly

Blazor WebAssembly 是单页应用 (SPA) 框架,用于使用 .NET 生成交互式客户端 Web 应用。Blazor WebAssembly is a single-page app (SPA) framework for building interactive client-side web apps with .NET. Blazor WebAssembly 使用无插件或将代码重新编译为其他语言的开放式 Web 标准。Blazor WebAssembly uses open web standards without plugins or recompiling code into other languages. Blazor WebAssembly 适用于所有新式 Web 浏览器,包括移动浏览器。Blazor WebAssembly works in all modern web browsers, including mobile browsers.

通过 WebAssembly(缩写为 wasm),可在 Web 浏览器内运行 .NET 代码。Running .NET code inside web browsers is made possible by WebAssembly (abbreviated wasm). WebAssembly 是针对快速下载和最大执行速度优化的压缩字节码格式。WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. WebAssembly 是开放的 Web 标准,支持用于无插件的 Web 浏览器。WebAssembly is an open web standard and supported in web browsers without plugins.

WebAssembly 代码可通过 JavaScript(称为 JavaScript 互操作性,通常简称为 JavaScript 互操作或 JS 互操作)访问浏览器的完整功能 。WebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability, often shortened to JavaScript interop or JS interop. 通过浏览器中的 WebAssembly 执行的 .NET 代码在浏览器的 JavaScript 沙盒中运行,沙盒提供的保护可防御客户端计算机上的恶意操作。.NET code executed via WebAssembly in the browser runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine.

Blazor WebAssembly 使用 WebAssembly 在浏览器中运行 .NET 代码。

当 Blazor WebAssembly 应用生成并在浏览器中运行时:When a Blazor WebAssembly app is built and run in a browser:

  • C# 代码文件和 Razor 文件将被编译为 .NET 程序集。C# code files and Razor files are compiled into .NET assemblies.
  • 该程序集和 .NET 运行时将被下载到浏览器。The assemblies and the .NET runtime are downloaded to the browser.
  • Blazor WebAssembly 启动 .NET 运行时,并配置运行时,以为应用加载程序集。Blazor WebAssembly bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. Blazor WebAssembly 运行时使用 JavaScript 互操作来处理 DOM 操作和浏览器 API 调用。The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls.

已发布应用的大小(其有效负载大小)是应用可用性的关键性能因素。The size of the published app, its payload size, is a critical performance factor for an app's usability. 大型应用需要相对较长的时间才能下载到浏览器,这会损害用户体验。A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor WebAssembly 优化有效负载大小,以缩短下载时间:Blazor WebAssembly optimizes payload size to reduce download times:

  • 中间语言 (IL) 裁边器发布应用时,会从应用删除未使用的代码。Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Trimmer.
  • 压缩 HTTP 响应。HTTP responses are compressed.
  • .NET 运行时和程序集缓存在浏览器中。The .NET runtime and assemblies are cached in the browser.
  • 中间语言 (IL) 链接器发布应用时,会从应用删除未使用的代码。Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Linker.
  • 压缩 HTTP 响应。HTTP responses are compressed.
  • .NET 运行时和程序集缓存在浏览器中。The .NET runtime and assemblies are cached in the browser.

Blazor Server

Blazor 将组件呈现逻辑从 UI 更新的应用方式中分离出来。Blazor decouples component rendering logic from how UI updates are applied. Blazor Server在 ASP.NET Core 应用中支持在服务器上托管 Razor 组件。Blazor Server provides support for hosting Razor components on the server in an ASP.NET Core app. 可通过 SignalR 连接处理 UI 更新。UI updates are handled over a SignalR connection.

运行时停留在服务器上并处理:The runtime stays on the server and handles:

  • 执行应用的 C# 代码。Executing the app's C# code.
  • 将 UI 事件从浏览器发送到服务器。Sending UI events from the browser to the server.
  • 将 UI 更新应用于服务器发送回的已呈现的组件。Applying UI updates to the rendered component that are sent back by the server.

Blazor Server用于与浏览器通信的连接还用于处理 JavaScript 互操作调用。The connection used by Blazor Server to communicate with the browser is also used to handle JavaScript interop calls.

Blazor 服务器在服务器上运行 .NET 代码,并通过 SignalR 连接与客户端上的文档对象模型进行交互

JavaScript 互操作JavaScript interop

对于需要第三方 JavaScript 库和访问浏览器 API 的应用,组件与 JavaScript 进行互操作。For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. 组件能够使用 JavaScript 能够使用的任何库或 API。Components are capable of using any library or API that JavaScript is able to use. C# 代码可调用到 JavaScript 代码,而 JavaScript 代码可调用到 C# 代码C# code can call into JavaScript code, and JavaScript code can call into C# code.

代码共享和 .NET StandardCode sharing and .NET Standard

Blazor 实现 .NET Standard,它使 Blazor 项目引用符合 .NET Standard 规范的库。Blazor implements the .NET Standard, which enables Blazor projects to reference libraries that conform to .NET Standard specifications. .NET Standard 是正式的 .NET API 规范,常见于 .NET 实现中。.NET Standard is a formal specification of .NET APIs that are common across .NET implementations. .NET Standard 类库可以在不同 .NET 平台之间共享,例如 Blazor、.NET Framework、.NET Core、Xamarin、Mono 和 Unity。.NET Standard class libraries can be shared across different .NET platforms, such as Blazor, .NET Framework, .NET Core, Xamarin, Mono, and Unity.

不适用于 Web 浏览器内部的 API(例如,访问文件系统、打开套接字和线程处理)将引发 PlatformNotSupportedExceptionAPIs that aren't applicable inside of a web browser (for example, accessing the file system, opening a socket, and threading) throw a PlatformNotSupportedException.

其他资源Additional resources