生成第一个 Blazor 应用

前言:博主文章仅用于学习、研究和交流目的,不足和错误之处在所难免,希望大家能够批评指出,博主核实后马上更改。

概述:Blazor 是一个使用 Blazor 生成交互式客户端 Web UI 的框架使用 C# 创建丰富的交互式 UI。共享使用 .NET 编写的服务器端和客户端应用逻辑。将 UI 呈现为 HTML 和 CSS,以支持众多浏览器,其中包括移动浏览器。

Blazor Server和Blazor WebAssembly

**Blazor Server:**Blazor Server在 ASP.NET Core 应用中支持在服务器上托管 Razor 组件。 可通过 SignalR 连接处理 UI 更新。

运行时停留在服务器上并处理:

  • 执行应用的 C# 代码。
  • 将 UI 事件从浏览器发送到服务器。
  • 将 UI 更新应用于服务器发送回的已呈现的组件。

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

前言:博主文章仅用于学习、研究和交流目的,不足和错误之处在所难免,希望大家能够批评指出,博主核实后马上更改。

概述:Blazor 是一个使用 Blazor 生成交互式客户端 Web UI 的框架使用 C# 创建丰富的交互式 UI。共享使用 .NET 编写的服务器端和客户端应用逻辑。将 UI 呈现为 HTML 和 CSS,以支持众多浏览器,其中包括移动浏览器。

Blazor Server和Blazor WebAssembly

**Blazor Server:**Blazor Server在 ASP.NET Core 应用中支持在服务器上托管 Razor 组件。 可通过 SignalR 连接处理 UI 更新。

运行时停留在服务器上并处理:

  • 执行应用的 C# 代码。
  • 将 UI 事件从浏览器发送到服务器。
  • 将 UI 更新应用于服务器发送回的已呈现的组件。

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

**Blazor WebAssembly:**Blazor WebAssembly 是单页应用 (SPA) 框架,用于使用 .NET 生成交互式客户端 Web 应用。

当 Blazor WebAssembly 应用生成并运行时:

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

1.启动 Visual Studio 并选择"创建新项目"。

2.在"配置新项目"窗口中,输入 BlazorApp 作为项目名称,然后选择"下一步"。

3.在"其他信息"窗口中,如果尚未选择,则在"框架"下拉列表中选择".NET 6.0 (标准期限支持)",然后单击"继续"按钮。

4.项目结构

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

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

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

运行效果

首页

计数器

数据项

相关推荐
云草桑2 小时前
C#入坑JAVA 使用XXLJob
java·开发语言·c#
玉夏3 小时前
【每日算法C#】爬楼梯问题 LeetCode
算法·leetcode·c#
云草桑9 小时前
.net AI MCP 入门 适用于模型上下文协议的 C# SDK 简介(MCP)
ai·c#·.net·mcp
工程师00710 小时前
C#中堆和栈的概念
c#·堆和栈
weixin_3077791311 小时前
C#实现MySQL→Clickhouse建表语句转换工具
开发语言·数据库·算法·c#·自动化
CsharpDev-奶豆哥18 小时前
ASP.NET中for和foreach使用指南
windows·microsoft·c#·asp.net·.net
cimeo21 小时前
【C 学习】12.2-函数补充
学习·c#
晚枫~1 天前
零基础快速上手Playwright自动化测试
javascript·python·测试工具·c#·自动化
爱编程的鱼1 天前
C# 变量详解:从基础概念到高级应用
java·算法·c#
cimeo1 天前
【C学习】13-数组使用与运算
学习·c#