Blazor----web

基础知识：

c#基本语法和 c#高级
webapi+efcore
mysql or sqlserver
winform or wpf等

maui 和 avalonia

简介

1.Blazor简介

官网: https://dotnet.microsoft.com/zh-cn/apps/aspnet/web-apps/blazor?ref=hackernoon.com

Blazor 是基于 HTML、CSS 和 C# 的现代前端 Web 框架，可帮助你更快地生成 Web 应用。使用 Blazor，你可以使用可从客户端和服务器运行的可重用组件生成 Web 应用，以便提供出色的 Web 体验。

为什么使用Blazor

Blazor 是一个用于构建交互式 Web 应用程序的框架，主要使用 C# 和 .NET 技术。使用 Blazor 的原因包括：

C# 和 .NET 生态系统：开发者可以使用他们熟悉的 C# 语言和 .NET 库来构建前端应用，而不需要学习 JavaScript。
组件化开发：Blazor 支持组件化开发，允许开发者将 UI 分解为可重用的组件，提高了代码的可维护性和可重用性。
双向数据绑定：Blazor 提供了强大的数据绑定功能，使得 UI 和数据模型之间的同步变得简单。
WebAssembly 支持：Blazor WebAssembly 允许在浏览器中运行 C# 代码，提供了与 JavaScript 相似的性能和体验。
服务器端渲染：Blazor Server 模式允许在服务器上执行代码，并通过 SignalR 实时更新 UI，适合需要快速响应的应用。
强类型支持：使用 C# 的强类型特性，可以在编译时捕获错误，减少运行时错误的可能性。
丰富的开发工具：Blazor 与 Visual Studio 和其他 .NET 工具集成良好，提供了强大的开发体验。

总之，Blazor 使得开发者能够使用 C# 和 .NET 技术栈构建现代 Web 应用，提供了灵活性和高效性。

功能

Blazor 提供了多种功能，使得开发现代 Web 应用变得更加高效和灵活。以下是一些主要功能：
组件化开发：

Blazor 允许开发者创建可重用的 UI 组件，组件可以包含 HTML、C# 代码和样式，促进代码的组织和重用。

双向数据绑定：

Blazor 支持双向数据绑定，允许 UI 和数据模型之间的自动同步，简化了状态管理。

路由支持：

Blazor 提供内置的路由功能，可以轻松定义和管理应用的不同页面和导航。

依赖注入：

Blazor 支持依赖注入，使得服务和组件之间的依赖关系管理变得简单和清晰。

事件处理：

Blazor 允许开发者处理用户输入和事件，如点击、键盘输入等，提供了丰富的交互体验。

JavaScript 互操作性：

Blazor 可以与现有的 JavaScript 库和框架进行互操作，允许开发者在需要时调用 JavaScript 代码。

状态管理：

Blazor 提供了多种状态管理方案，支持在组件之间共享状态，适合复杂应用的需求。

支持 WebAssembly 和服务器端渲染：

Blazor WebAssembly 允许在客户端运行 C# 代码，而 Blazor Server 则在服务器上执行代码并通过 SignalR 更新 UI。

强类型支持：

使用 C# 的强类型特性，开发者可以在编译时捕获错误，减少运行时错误的可能性。

丰富的开发工具：

Blazor 与 Visual Studio 和其他 .NET 工具集成良好，提供了调试、测试和构建的强大支持。这些功能使得 Blazor 成为构建现代 Web 应用的强大工具，适合各种规模的项目。

Blazor的两种模式

1）Blazor Server模式

Blazor Server 是 Blazor 用户界面框架（作为 ASP.NET Core Web 开发框架的一部分）的实现，并部署到 Web 服务器。使用 Blazor Server 开发应用程序会在 Web 服务器上生成 HTML，因为网站访客通常使用 Web 浏览器来请求此内容。然后，该 HTML 会传送到访客的浏览器，并且系统将使用 ASP.NET Core SignalR 和首选 Web 套接字连接来维护双向通信管道。

话外音：它需要下载的东西很小，可以使用所有服务器端的API，并且可以在不支持WebAssembly的浏览器中运行。但它不支持离线运行，网络延迟的影响也较大。

单击按钮、导航以及与 Blazor Server 应用程序进行其他交互的用户将通过此 SignalR 连接传输其操作，并且服务器将使用相同的连接来通过用户界面更新进行响应。Blazor Server 框架使用 Web 服务器上生成的内容来自动更新浏览器。

（2）Blazor WebAssembly模式

首先，什么是WebAssembly？

WebAssembly (WASM) 是一种开放的二进制标准。它用于定义旨在 Web 浏览器中运行的程序的可移植代码格式。

WebAssembly 是一种文本程序集语言，具有专用于实现快速下载和近乎本机性能的精简二进制格式。

WebAssembly 为 C、C++、C# 和 Rust 等语言提供了编译目标。它设计为与 JavaScript 一起运行，因此两者可协同工作。WebAssembly 还可生成可下载和脱机运行的渐进式 Web 应用程序。

其次，什么是Blazor WebAssembly?

使用 Blazor WebAssembly，开发人员可以在浏览器中运行 .NET 代码。

Blazor WebAssembly 是一种单页应用框架，使用的是 WebAssembly 开放标准，无需安装任何插件或代码生成。

在浏览器中通过 WebAssembly 执行的 .NET 代码在浏览器的 JavaScript 沙盒中运行。该代码具有沙盒提供的所有安全和保护特性。这有助于防止客户端计算机上的恶意操作。

Blazor 使用编译为 WebAssembly 模块的 .NET 运行时，该模块随应用一起下载。该模块可执行 Blazor 应用中包含的 .NET Standard 代码。

话外音：首次应用访问时下载量比较大，影响性能，这可能是最大的缺点。但它支持离线运行。

Blazor WebAssembly 应用仅限于执行该应用的浏览器的功能，但该应用可以通过 JavaScript 互操作访问完整的浏览器功能。

最后，需要注意的是，Blazor WebAssembly当前只支持以下浏览器：

Microsoft Edge
Google Chrome
Mozilla Firefox
Apple Safa

如何选择Blazor两种模式？

微软在官方文档中也给出了如何抉择何时使用Blazor：

Blazor 是一种非常棒的用户界面框架，适用于已熟悉 .NET 并且希望获得用于设计和交付基于 HTML 的应用程序的各种选项的开发人员。综合上述准则，决定在下一个应用程序中使用 Blazor WebAssembly 还是 Blazor Server 时，请参考下表。

Blazor和主流前端框架如何选择？

这里引用叶影大佬的文章，本节下文中的我均指代叶影。

说到Blazor，必然会有人拿它跟现有广泛应用的前端三大JS框架（React/Vue/Angular）对比，我也阐述一下个人观点。

首先，Blazor在框架设计上并没有闭门造车。在使用Blazor的过程中，可以充分感受到Blazor和当前主流前端技术的联系：

组件式开发的范式，推荐以组件的形式作为页面基本的UI元素
在html模板中，部分C#关键词充当了类似“指令”的角色。例如@if和ng-if, @for和vue-for等等
html/css/code(JS/C#)的分离和组合。Blazor里每个页面既可以拆分成MyPage.razor（html模板文件）,MyPage.razor.cs（C#代码文件）和MyPage.razor.css（样式文件）三部分，也可以将三者统一写到MyPage.razor文件里。
依赖注入。有过Angular开发经验的开发者，应该会对此深有体会。

其次，Blazor保留了C#和JS之间的互操作性。也就是说，Blazor既理所当然地利用了.NET现有的生态，也兼容更加繁荣的JS生态。这样开放的思路，给了Blazor开源社区非常大的发展空间，比如很多早先由原生JS编写的图表开源项目，可以以相对较低的成本迁移到Blazor上来；又比如可以使用Blazor封装三大框架已有的组件，或者原生组件（播放器等）。

因此，Blazor和前端三大框架之间，的确有相当一部分的功能其实可以互相取代。然而Blazor的目的，不是为了取代三大框架；从现状来看，甚至连竞争的地位都谈不上。Blazor能吸引的最主要人群，是.NET开发者，它给了开发者完全以C#作为主要语言实现全栈开发的机会。尤其是，前后端可以共享包含数据类型和逻辑模块的C#代码，这一优势只有C#全栈开发者才能深切体会到。例如，对于后端出身的C#开发者，在前后端分离的环境下，以往更偏爱设计模式上与后端更相近的Angular；如今Blazor已逐渐成熟，可以“横刀夺爱”了。

如上所说，Blazor并不能让三大框架的绝大多数JS开发者产生兴趣，更无法与当下繁荣的JS生态竞争。另外，在IE及其他一些老旧版本的浏览器仍未被完全淘汰的当下，为了保证页面的普适和兼容，Blazor自然不会被大部分人看重。但作为基于Web Assembly的前端框架，它依然还是特别的：WASM的普及和发展，一定会利及Blazor，使其在未来有更大的发展空间。这里举一个即将实现的例子：由于WASM可以在非Web环境下运行，那么Blazor将来也可以用于开发运行在非Web环境下的UI程序，这在官方的计划中已经提及——Blazor Web Assembly MAUI。

上文出处：https://zhuanlan.zhihu.com/p/386150142，作者：叶影。

小结

基于Blaozr的特点，我们认为它应当是.NET技术栈的发团队开发企业级信息管理系统的首选框架，特别是对于传统行业的数字化IT团队。

例如Edison所在的工业制造行业的IT团队，受限于团队规模和人员水平，不能像互联网公司那样搞纯粹的大规模前后端独立团队，对性能的要求也不会有互联网大促的要求那么高，此外最重要的是每个人的职责除了开发可能还兼顾运维和一定程度的需求梳理，因此利用已掌握的技术栈实现端到端的业务需求，将精力更多放到与业务的融合和微服务API逻辑的编写是更好的选择。

最后，我想说：对传统行业的数字化转型来说，只有适合的技术，没有最好的技术。

入门

使用 Blazor 利用 ASP.NET Core 生成第一个 Web 应用

在 Visual Studio Code | rider 中使用 Blazor 构建第一个包含 ASP.NET Core 的 Web 应用。

先决条件

macOS 12.0 或更高版本。

完成时间

10-15 分钟 + 下载/安装时间

下载并安装

windows

若要生成第一个 .NET 应用程序，需要安装 .NET SDK、Visual Studio Code 和 C# 开发工具包。

什么是 .NET SDK、Visual Studio Code 和 C# 开发工具包?

.NET SDK (软件开发工具包)是使用 C# 生成和运行应用程序所需的工具和库的免费开源集合。C# 是你将在本教程中使用的面向对象的新式编程语言。
Visual Studio Code (VS Code)是全球最受欢迎的轻型、免费的开源代码编辑器。你将在此处编写 C# 代码。
C# 开发工具包是一组功能强大的 VS Code 扩展，可使 C# 开发更轻松。它可帮助你在生成应用时编写、测试和调试代码。

.NET WinGet 配置文件将为你安装 .NET 9 SDK、VS Code 和 C# 开发工具包。如果已安装某些内容，WinGet 将跳过该安装步骤。

下载并运行配置文件

单击以下链接下载 WinGet 文件：

打开下载文件夹并双击该文件以开始安装。如果要求你选择要运行该文件的应用程序，请选择 Windows 程序包管理器客户端。

一个终端将打开，而你应该会看到 WinGet 配置文件已准备好安装 .NET 9 SDK、VS Code (如果没有)和 C# 开发工具包。

阅读许可协议并同意，方法是在终端中键入“y”，然后按 Enter。

注意: 你有责任了解要选择执行的配置设置。Microsoft 不对你创作或导入的配置文件负责。此配置可能会更改 Windows 中的设置、安装软件、更改软件设置(包括安全设置)，并代表你接受第三方程序包和服务的用户协议。运行此配置文件即表示你确认理解并同意这些资源和设置。任何安装的应用程序均由其所有者授权给你。Microsoft 既不对第三方程序包或服务负责，也不授予其许可证。

WinGet 正在安装入门所需的一切内容！安装时间将取决于计算机规格、网络速度等。可能需要 5 分钟，但最多需要 15 分钟才能完成。

某些安装步骤可能需要管理员级权限才能安装。在 Windows 任务栏 中查找闪烁的用户帐户控制 (UAC) 提示，然后单击该图标。若要继续安装，必须选择 出现提示时 是。

安装完成后，你应该在终端中看到下面的输出。

检查是否已正确安装所有内容

现在已设置环境，请转到 Windows 任务栏中的搜索，然后键入 Visual Studio Code。单击应用程序以打开 VS Code。

注意： 如果通过终端打开VS Code，则需要启用工作区信任。

现在，通过转到工具栏并选择终端，然后选择新终端来打开新终端。

在终端中，运行以下命令来检查安装。

Terminal

dotnet

如果安装成功，则应该会看到类似于以下内容的输出:

Terminal

Usage: dotnet [options]
Usage: dotnet [path-to-application]

Options:
-h|--help         Display help.
--info            Display .NET information.
--list-sdks       Display the installed SDKs.
--list-runtimes   Display the installed runtimes.

path-to-application:
The path to an application .dll file to execute.

如果一切正常，请选择下面的继续按钮以转到下一步。

Linux

https://dotnet.microsoft.com/zh-cn/learn/aspnet/blazor-tutorial/install

mac

要生成第一个 .NET 应用程序，需要安装 .NET SDK、Visual Studio Code 和 C# 开发工具包。

什么是 .NET SDK、Visual Studio Code 和 C# 开发工具包?

.NET SDK (软件开发工具包)是使用 C# 生成和运行应用程序所需的工具和库的免费开源集合。C# 是你将在本教程中使用的面向对象的新式编程语言。
Visual Studio Code (VS Code)是全球最受欢迎的轻型、免费的开源代码编辑器。你将在此处编写 C# 代码。
C# 开发工具包是一组功能强大的 VS Code 扩展，可使 C# 开发更轻松。它可帮助你在生成应用时编写、测试和调试代码。

若要使用 Visual Studio Code 构建你的第一个 .NET 应用程序，请设置环境:

下载并安装 .NET SDK:

下载 .NET 9 SDK Arm64 (Apple Silicon)
下载和安装 VS Code:

下载 VS Code
打开 VS Code，并在左侧 VS Code 的活动栏中选择“扩展”按钮。在搜索栏中键入 "C#"，选择“C# 开发工具包”，然后在 C# 开发工具包扩展页上选择“安装”按钮。

下载并运行配置文件

检查是否已正确安装所有内容

设置环境后，打开新的 VS Code 终端。在工具栏中，选择“终端”，然后选择“新终端”。

在终端中，运行以下命令来检查安装。

Terminal

dotnet

如果安装成功，则应该会看到类似于以下内容的输出:

Terminal

Usage: dotnet [options]
Usage: dotnet [path-to-application]

Options:
-h|--help         Display help.
--info            Display .NET information.
--list-sdks       Display the installed SDKs.
--list-runtimes   Display the installed runtimes.

path-to-application:
The path to an application .dll file to execute.

如果一切正常，请选择下面的继续按钮以转到下一步。

创建应用

按 CMD+SHIFT+P，在 VS Code 中打开命令面板。
键入 ".NET: " 来查看可使用 C# 开发工具包运行的命令!
查找“.NET: 新建项目”，并将其选中来创建新的 .NET 项目。
向下滚动并选择“Blazor Web 应用”。
选择要保存项目的文件夹位置。
出现提示时，在命令面板中命名项目 BlazorApp。按 Enter 进行确认。

https://dotnet.microsoft.com/blob-assets/videos/blazor-new-project.mp4

选中复选框并选择是，我信任作者以启用工作区信任。

如果你有 Visual Studio 订阅，请登录你的帐户。如果没有看到弹出提示，请单击窗口右下角 VS Code 状态栏中的 C# 图标。

在边栏中，确保 VS Code 资源管理器已打开。此处将显示 BlazorApp 文件夹和解决方案资源管理器。按照以下视频进行操作: 折叠 BlazorApp 文件夹，打开解决方案资源管理器，打开 BlazorApp 项目，然后将解决方案资源管理器拖放到更高的位置。

折叠 VS Code 资源管理器中的 BlazorApp 文件夹。
单击解决方案资源管理器左侧的 V 形图标可将其展开。
单击“解决方案资源管理器”中 BlazorApp 项目的左侧的 V 形图标可将其展开。
将“解决方案资源管理器”拖放到 BlazorApp下。

已在 Visual Studio Code 中创建并加载你的项目。使用“解决方案资源管理器”查看项目内容。

已创建多个文件，以为你提供可运行的简单 Blazor 应用。

Program.cs 是启动服务器以及在其中配置应用服务和中间件的应用的入口点。
在 Components 目录中:
- App.razor 为应用的根组件。
- Routes.razor 配置 Blazor 路由器。
- Pages 目录包含应用的一些示例网页。
BlazorApp.csproj 定义应用项目及其依赖项，且可以通过双击解决方案资源管理器中的 BlazorApp 项目节点进行查看。
Properties 目录中的 launchSettings.json 文件为本地开发环境定义不同的配置文件设置。创建项目时会自动分配端口号并将其保存在此文件上。

运行应用

选择工作区左侧的“活动栏”中的“运行和调试”图标。

选择蓝色的“运行和调试”按钮。

Visual Studio Code 将打开启动配置的菜单。选择C#: BlazorApp [默认配置]。

然后，你需要选择调试程序。选择 C#。

等待应用在浏览器中启动。转到以下页面后，你已成功运行第一个 Blazor 应用!

站点主页包含一些文本，并在左侧显示了多个选项卡，供你点击和浏览。

可通过单击顶部工具栏中的停止按钮随时停止应用。

使用 VS Code 运行按钮运行应用程序

若要重新运行应用程序，请选择右上角的“运行”按钮右侧的下拉菜单，然后选择“运行与此文件关联的项目”。

使用 VS Code 运行按钮运行应用程序

显示的页面由位于 Components/Pages 目录内的 Home.razor 文件定义。其内容如下所示:

Components/Pages/Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

它已包含将它设置为主页的代码，并显示文本Hello, world! 和 Welcome to your new app。PageTitle 组件会设置当前页面的标题，使其显示在浏览器选项卡中。

对于vs和rider开发者的快速入门

本篇我们来构建第一个Blazor Web应用，这里我们选择Blazor Server类型，后面我们再学习Blazor WebAssembly类型。

话外音：有人问我西门子在用Blazor吗？是的，西门子德国的两家数字化工厂都有在用Blazor开发Web应用，特别用到了MudBlazor这个UI组件库并封装一个完整的内部系统开发模板，值得关注！而作为西门子在中国的首家数字化工厂，成都工厂自然也用Blazor开发新的Web应用系统啦！

创建新的Blazor应用

在VS中，添加一个Blazor Server应用。

在“框架”组合框中选择“.NET 8--9.0(长期支持)”。保持其他设置不变，然后选择“创建”即可。

项目目录

其中：

（1）Data文件夹主要存放Model和Service。

（2）Pages文件夹主要存放基于Razor的页面和组件。其中，.cshtml是页面，.razor的则一般是组件，可复用。

（3）Shared文件夹主要存放页面模板、导航模板等。

其他：

（1）Imports.razor用于声明全局应用的命名空间。

（2）App.razor用于声明默认的Router。

Program.cs：应用的入口点，用于设置 ASP.NET Core 主机并包含应用的启动逻辑，其中包括服务注册和请求处理管道配置：

配置应用的请求处理管道：
- 调用 MapBlazorHub 可以为与浏览器的实时连接设置终结点。使用 SignalR 创建连接，该框架用于向应用添加实时 Web 功能。
- 调用 MapFallbackToPage("/_Host") 以设置应用的根页面 (Pages/_Host.cshtml) 并启用导航。
appsettings.json 和环境应用设置文件：提供应用的配置设置。
_Imports.razor：包括要包含在应用组件 (.razor) 中的常见 Razor 指令，如用于命名空间的 @using 指令。
App.razor：应用的根组件，用于使用 Router 组件来设置客户端路由。 Router 组件会截获浏览器导航并呈现与请求的地址匹配的页面。
wwwroot 文件夹：应用的 Web 根目录文件夹，其中包含应用的公共静态资产
Shared 文件夹：可以理解为前端的项目目录的 Layout 文件夹，里面放的是布局组件。
Tools 文件夹：工具类写在这里以供组件随时调用。
Locales 文件夹：存放国际化映射文件。
Properties 文件夹：在 launchSettings.json 文件中保存开发环境配置。
Pages 文件夹：包含 Blazor 应用的可路由 Razor 组件 (.razor) 和 Blazor Server 应用的根 Razor 页。每个页面的路由都是使用 @page 指令指定的。
_Host.cshtml：实现为 Razor 页面的应用根页面：
- 最初请求应用的任何页面时，都会呈现此页面并在响应中返回。
- 此主机页面指定根 App 组件 (App.razor) 的呈现位置。
Data 文件夹：包含 WeatherForecast 类和 WeatherForecastService 的实现，它们向应用的 FetchData 组件提供示例天气数据，calss 和 service 放到这里面给 pages 组件提供数据，其中 class 的类型要和后端的返回 Model Class 数据类型一致才能正确接收数据

Blazor应用初体验

这里，我们暂时啥也不改，Run起来看看效果：

（1）首先是一段文字介绍：

Net6

net8

让我们来玩一下。然后和我们进入Counter页面也就是计数器页面

（3）点击Weather菜单，进入天气预报示例数据表格：

计数器示例

在Pages/Counter.razor我们可以看到这个Counter组件的实现：

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }

}

我们来看看这个组件的代码：

（1）@page指令说明了浏览器可以通过/counter请求来访问该组件；

（2）@code指令说明了C#代码区域，声明了一个InCrementCount方法用于点击次数的自增。

（3）button标签中通过@onclick绑定了点击事件InCrementCOunt，会触发currentCount的自增。

（4）@rendermode 交互式服务器

使用组件

这里我们尝试在Home.razor文件中添加一个刚刚的Counter组件：

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<Counter />

这时，我们重新启动应用就可以看到Counter组件显示在主页上面了：

此时，假设我们每个Counter组件的调用方希望的递增值是不固定的，不一定都是1。换句话说，我们希望支持调用方传递它需要递增的值，比如10。

这里，我们稍微改动一下Counter组件的实现：

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    private void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.


<Counter IncrementAmount="10"></Counter>

这里的改动为：

使用 [Parameter] 特性为 IncrementAmount 添加公共属性。
更改 IncrementCount 方法以在 currentCount 的值递增时使用 IncrementAmount。
IncrementAmount="10" 进行传参

当我们再次运行，在主页点击后，就会以10递增。

而在Counter组件页，它还是以1递增。

组件

Razor 简介

Razor 是基于 HTML 和 C# 的轻量级标记模板化语言。借助 Razor，可以在标记和 C# 代码之间无缝转换，以定义组件呈现逻辑。编译 .razor 文件时，将在 .NET 类中以结构化方式捕获呈现逻辑。编译类的名称从 .razor 文件名中获取。命名空间从项目的默认命名空间和文件夹路径中获取，也可以使用 @namespace 指令（在下面的 Razor 指令中详细介绍）显式指定命名空间。

组件的呈现逻辑使用常规 HTML 标记创作，并使用 C# 添加动态逻辑。 @ 字符用于转换为 C#。 Razor 通常很聪明，可猜出你何时切换回 HTML。例如，以下组件使用当前时间呈现 <p> 标记：

razor

<p>@DateTime.Now</p>

若要显式指定 C# 表达式的开头和结尾，请使用括号：

razor

<p>@(DateTime.Now)</p>

使用 Razor 还可以在呈现逻辑中轻松地使用 C# 控制流。例如，可以有条件地呈现某些 HTML，如下所示：

razor

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}

或者，可以使用常规 C# foreach 循环生成项目列表，如下所示：

razor

<ul>
@foreach (var item in items)
{
    <li>@item.Text</li>
}
</ul>

像 ASP.NET Web Forms 中的指令一样，Razor 指令可控制 Razor 组件编译的许多方面。示例包括组件的以下项：

命名空间
基类
实现的接口
泛型参数
导入的命名空间
路由

Razor 指令以 @ 字符开头，通常用于文件开头的新行的开头。例如，@namespace 指令定义组件的命名空间：

razor

@namespace MyComponentNamespace

下表总结 Blazor 中使用的各种 Razor 指令及其 ASP.NET Web Forms 等效项（如果存在）。

展开表

指令	描述	示例	Web Forms 等效项
`@attribute`	将类级别属性添加到组件	`@attribute [Authorize]`	None
`@code`	将类成员添加到组件	`@code { ... }`	`<script runat="server">...</script>`
`@implements`	实现指定的接口	`@implements IDisposable`	使用代码隐藏
`@inherits`	从指定的基类继承	`@inherits MyComponentBase`	`<%@ Control Inherits="MyUserControlBase" %>`
`@inject`	将服务注入组件	`@inject IJSRuntime JS`	None
`@layout`	指定组件的布局组件	`@layout MainLayout`	`<%@ Page MasterPageFile="~/Site.Master" %>`
`@namespace`	设置组件的命名空间	`@namespace MyNamespace`	None
`@page`	指定组件的路由	`@page "/product/{id}"`	`<%@ Page %>`
`@typeparam`	指定组件的泛型类型参数	`@typeparam TItem`	使用代码隐藏
`@using`	指定要纳入范围的命名空间	`@using MyComponentNamespace`	在 web.config 中添加命名空间

Razor 组件还广泛使用元素上的指令属性来控制组件编译的各个方面（事件处理、数据绑定、组件和元素引用等）。指令属性均遵循常用泛型语法，其中括号中的值是可选的：

razor

@directive(-suffix(:name))(="value")

下表总结 Blazor 中使用的 Razor 指令的各种属性。

属性	说明	示例
`@attributes`	呈现属性字典	`<input @attributes="ExtraAttributes" />`
`@bind`	创建双向数据绑定	`<input @bind="username" @bind:event="oninput" />`
`@on{event}`	为指定事件添加事件处理程序	`<button @onclick="IncrementCount">Click me!</button>`
`@key`	指定比较算法要用于保存集合中元素的键	`<DetailsEditor @key="person" Details="person.Details" />`
`@ref`	捕获对组件或 HTML 元素的引用	`<MyDialog @ref="myDialog" />`

Blazor 使用的各种指令属性（@onclick、@bind、@ref 等）将在下面的部分和后续章节中介绍。

.aspx 和 .ascx 文件中使用的许多语法在 Razor 中具有并行语法。下面是 ASP.NET Web Forms 语法和 Razor 语法的简单比较。

展开表

功能	Web Forms — Web 窗体	语法	Razor	语法
指令	`<%@ [directive] %>`	`<%@ Page %>`	`@[directive]`	`@page`
代码块	`<% %>`	`<% int x = 123; %>`	`@{ }`	`@{ int x = 123; }`
表达式（HTML 编码）	`<%: %>`	`<%:DateTime.Now %>`	隐式：`@` 显式：`@()`	`@DateTime.Now` `@(DateTime.Now)`
注释	`<%-- --%>`	`<%-- Commented --%>`	`@* *@`	`@* Commented *@`
数据绑定	`<%# %>`	`<%# Bind("Name") %>`	`@bind`	`<input @bind="username" />`

posted @ 2025-08-14 11:43 信仰778 阅读(58) 评论(0) 收藏举报

刷新页面返回顶部

小信仰的net社区

小信仰的net社区

Blazor----web

简介

1.Blazor简介

为什么使用Blazor

功能

Blazor的两种模式

1）Blazor Server模式

（2）Blazor WebAssembly模式

如何选择Blazor两种模式？

Blazor和主流前端框架如何选择？

小结

入门

使用 Blazor 利用 ASP.NET Core 生成第一个 Web 应用

先决条件

完成时间

下载并安装

windows

下载并运行配置文件

检查是否已正确安装所有内容

Linux

mac

下载并运行配置文件

检查是否已正确安装所有内容

创建应用

运行应用

对于vs和rider开发者的快速入门

创建新的Blazor应用

项目目录

Blazor应用初体验

计数器示例

使用组件

组件

Razor 简介

公告