生成第一个 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 文件为本地开发环境定义不同的配置文件设置。创建项目时会自动分配端口号并将其保存在此文件上。

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

运行效果

首页

计数器

数据项

相关推荐
CoderIsArt4 小时前
参数系统的基类Parameter抽象类
c#
盛夏绽放5 小时前
Python字符串常用方法详解
开发语言·python·c#
Tummer83639 小时前
C#+WPF+prism+materialdesign创建工具主界面框架
开发语言·c#·wpf
ghost14310 小时前
C#学习第23天:面向对象设计模式
开发语言·学习·设计模式·c#
yngsqq11 小时前
(for 循环) VS (LINQ) 性能比拼 ——c#
c#·solr·linq
想做后端的小C11 小时前
C# 面向对象 构造函数带参无参细节解析
开发语言·c#·面向对象
炯哈哈11 小时前
【上位机——WPF】App.xml和Application类简介
xml·开发语言·c#·wpf·上位机
bestcxx11 小时前
c# UTC 时间赋值注意事项
c#·utc
酷炫码神12 小时前
C#运算符
开发语言·c#
zybsjn12 小时前
后端系统做国际化改造,生成多语言包
java·python·c#