asp net 外观文件_ASP.NET Core Blazor简介

原作：丹尼尔·罗斯和卢克·莱瑟姆

欢迎来到Blazor！

Blazor是用于使用.NET构建交互式客户端Web UI的框架：

• 使用C＃而不是JavaScript创建丰富的交互式UI。
• 共享用.NET编写的服务器端和客户端应用程序逻辑。
• 将UI渲染为HTML和CSS，以提供广泛的浏览器支持，包括移动浏览器。
• 与现代托管平台(例如Docker)集成。

使用.NET进行客户端Web开发具有以下优点：

• 用C＃而不是JavaScript编写代码。
• 利用.NET库的现有.NET生态系统。
• 在服务器和客户端之间共享应用程序逻辑。
• 受益于.NET的性能，可靠性和安全性。
• 使用Windows，Linux和macOS上的Visual Studio保持高效。
• 建立在一组稳定，功能丰富且易于使用的通用语言，框架和工具之上。

组件

Blazor应用程序基于组件。Blazor中的组件是UI的元素，例如页面，对话框或数据输入表单。

组件是.NET程序集中内置的.NET类，它们具有：

• 定义灵活的UI呈现逻辑。
• 处理用户事件。
• 可以嵌套和重用。
• 可以作为Razor类库或NuGet包共享和分发。

组件类通常以带有.razor文件扩展名的Razor标记页的形式编写。Blazor中的组件正式称为Razor组件。Razor是一种语法，用于将HTML标记与旨在提高开发人员生产力的C＃代码结合在一起。Razor允许您在具有IntelliSense支持的同一文件中的HTML标记和C＃之间切换。Razor Pages和MVC也使用Razor。与围绕请求/响应模型构建的Razor Pages和MVC不同，组件专门用于客户端UI逻辑和组合。

以下Razor标记演示了一个组件(Dialog.razor)，该组件可以嵌套在另一个组件中：

剃刀复制

@Title

@ChildContent Yes!

@code { [Parameter] public string Title { get; set; } [Parameter] public RenderFragment ChildContent { get; set; } private void OnYes() { Console.WriteLine("Write to the console in C#! 'Yes' button was selected."); }}

对话框的正文内容(ChildContent)和标题(Title)由在其UI中使用该组件的组件提供。OnYes是由按钮onclick事件触发的C＃方法。

Blazor使用自然的HTML标签进行UI合成。HTML元素指定组件，标签的属性将值传递给组件的属性。

在以下示例中，Index组件使用Dialog组件。ChildContent和Title由属性和内容设定元件。

Index.razor：

剃刀复制

@page "/"

Hello, world!

Welcome to your new app. Do you want to learn more about Blazor?

在浏览器中访问父级(Index.razor)时，将显示该对话框：

在应用程序中使用此组件时，Visual Studio和Visual Studio Code中的 IntelliSense 可以通过语法和参数完成来加快开发速度。

组件渲染为浏览器的文档对象模型(DOM)在内存中的表示，称为渲染树，该渲染树用于以灵活高效的方式更新UI。

Blazor Web程序集

---

---

重要

Blazor WebAssembly预览

ASP.NET Core 3.0支持Blazor Server。Blazor WebAssembly处于ASP.NET Core 3.1的预览版中。

Blazor WebAssembly是一个单页应用程序框架，用于使用.NET构建交互式客户端Web应用程序。Blazor WebAssembly使用不带插件或代码转译的开放式Web标准，并且可以在所有现代Web浏览器(包括移动浏览器)中使用。

WebAssembly(缩写为wasm)使得在Web浏览器中运行.NET代码成为可能。WebAssembly是一种紧凑的字节码格式，已针对快速下载和最大执行速度进行了优化。WebAssembly是一个开放的Web标准，在没有插件的Web浏览器中受支持。

WebAssembly代码可以通过JavaScript访问浏览器的全部功能，称为JavaScript互操作性(或JavaScript interop)。通过WebAssembly在浏览器中执行的.NET代码在浏览器的JavaScript沙箱中运行，沙箱提供了针对客户端计算机上的恶意操作的保护。

在构建Blazor WebAssembly应用并在浏览器中运行时：

• C＃代码文件和Razor文件被编译为.NET程序集。
• 程序集和.NET运行时将下载到浏览器。
• Blazor WebAssembly引导.NET运行时并配置运行时以加载应用程序的程序集。Blazor WebAssembly运行时使用JavaScript互操作来处理DOM操作和浏览器API调用。

发布的应用程序的大小及其有效负载大小是应用程序可用性的关键性能因素。大型应用程序需要相对较长的时间才能下载到浏览器，这会降低用户体验。Blazor WebAssembly优化了有效负载大小以减少下载时间：

• 当未使用的代码由中间语言(IL)链接程序发布时，该代码将从应用程序中删除。
• HTTP响应已压缩。
• .NET运行时和程序集被缓存在浏览器中。

Blazor服务器

Blazor使组件渲染逻辑与UI更新的应用方式脱钩。Blazor Server支持在ASP.NET Core应用程序中的服务器上托管Razor组件。UI更新通过SignalR连接进行处理。

运行时处理从浏览器到服务器的UI事件发送，并在运行组件后将服务器发送的UI更新应用回浏览器。

Blazor服务器用于与浏览器通信的连接也用于处理JavaScript互操作调用。

JavaScript互操作

对于需要第三方JavaScript库并访问浏览器API的应用程序，组件可与JavaScript互操作。组件能够使用JavaScript能够使用的任何库或API。C＃代码可以调用JavaScript代码，而JavaScript代码可以调用C＃代码。有关更多信息，请参阅以下文章(后续补充)：

• 从ASP.NET Core Blazor中的.NET方法调用JavaScript函数
• 从ASP.NET Core Blazor中的JavaScript函数调用.NET方法

代码共享和.NET标准

Blazor实现了.NET Standard 2.0。.NET标准是.NET实现中常见的.NET API的正式规范。.NET标准类库可以在不同的.NET平台之间共享，例如Blazor，.NET Framework，.NET Core，Xamarin，Mono和Unity。

在Web浏览器内部不适用的API(例如，访问文件系统，打开套接字和线程化)会抛出PlatformNotSupportedException。

额外资源

• Web组装
• ASP.NET Core Blazor托管模型
• 将ASP.NET Core SignalR与Blazor WebAssembly结合使用
• C＃指南
• ASP.NET Core的Razor语法参考
• 的HTML
• 很棒的Blazor社区链接