学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（上）

r囧r小猫 2024-03-16 13:10 36阅读 0赞

一、概述

Blazor 是一个生成交互式客户端 Web UI 的框架：

1.  使用 C\# 代替 JavaScript 来创建信息丰富的交互式 UI。
2.  共享使用 .NET 编写的服务器端和客户端应用逻辑。
3.  将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。
4.  与新式托管平台（如 Docker）集成。
5.  使用 .NET 和 Blazor 生成混合桌面和移动应用。

使用 .NET 进行客户端 Web 开发可提供以下优势：

1.  使用 C\# 代替 JavaScript 来编写代码。
2.  利用现有的 .NET 库生态系统。
3.  在服务器和客户端之间共享应用逻辑。
4.  受益于 .NET 的性能、可靠性和安全性。
5.  使用开发环境（例如 Visual Studio 或 Visual Studio Code）保持 Windows、Linux 或 macOS 上的工作效率。
6.  以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。

二、开始学习第一个ASP.NET Blazor应用程序

在学习本教程之前，我随便说两句，如果一直是在跟随微软的技术路线的话，应该记得当初微软用来跟flash打擂台的SilverLigth，也是一个富客户端的开发框架，现在不知道在哪个犄角旮旯里呆着。Blazor未来的钱景如何，暂时未知？从目前来看Blazor还是要学习一下的。本教程首先通过一个微软提供的Blazor应用程序模板示例，来简单学习一下如何创建基于ASP.NET Core Blazor的Web应用程序。

三、正式开始之前，请先安装以下软件

1）.NET Core SDK 6.0版本或更高版本

2）Visual Studio 2022版本17.3 或更高版本。

3）在安装Visual Studio 2022的时候，必须选择“ASP.NET和Web开发”。如下图红框。

![5f8a0b216e9d86591bf17c295589af56.png][]

**图2-1**

4)如果已经安装了Visual Studio 2022，但在安装的时候，没有选择“ASP.NET 和Web开发”功能。请启动Visual Studio 2022，选择“继续但无需代码”，如下图红框所示。

![f6c4a409f61353c9a37cd3fec8881a23.png][]

**图2-2**

5) 在Visual Studio 2022主界面中的菜单栏上选择“工具—》获取工具和功能”，弹出界面如第4）步中的图2-1。

![fa0182cdc6d26655ba16c89163b4b5e6.png][]

**图2-3**

6) 选择了之后，在安装程序中点击“修改”按钮。如下图。

![1c48e7e7818f6ed367f680f4f8f16f5d.png][]

**图2-4**

[5f8a0b216e9d86591bf17c295589af56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/bb8d9c55ae8448758ffc5fa706343b56.png
[f6c4a409f61353c9a37cd3fec8881a23.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/4f635c314eac40c89ad3a34bf2cba8b6.png
[fa0182cdc6d26655ba16c89163b4b5e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/f24ddaf2fd684e399b5d978062e96127.png
[1c48e7e7818f6ed367f680f4f8f16f5d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/68a6cda494704486a9d5a35530d8694b.png