生成第一个 Blazor 应用

news/2024/5/19 22:25:34 标签: c#, .netcore

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

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

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

运行效果

首页

在这里插入图片描述

计数器

在这里插入图片描述

数据项

在这里插入图片描述


http://www.niftyadmin.cn/n/5148980.html

相关文章

FSCTF2023-MISC部分WP

FSCTF2023-MISC部分WP 前言:MISC:[FSCTF 2023]Simple Encryption:[FSCTF 2023]萧河:[FSCTF 2023]base套:[FSCTF 2023]行不行啊细狗:[FSCTF 2023]ez-osint:[FSCTF 2023]为什么不换换思路捏:[FSCT…

Pytorch从零开始实战08

Pytorch从零开始实战——YOLOv5-C3模块实现 本系列来源于365天深度学习训练营 原作者K同学 文章目录 Pytorch从零开始实战——YOLOv5-C3模块实现环境准备数据集模型选择开始训练可视化模型预测总结 环境准备 本文基于Jupyter notebook,使用Python3.8&#xff0c…

Mybatis 概述

一、Mybatis 概述 1.Mybatis是什么? MyBatis 是一款优秀的持久层框架,它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息&#xff0…

[笔记] 汉字判断

参考博客&#xff1a;如果判断一个字符是西文字符还是中文字符 结论&#xff1a; 汉字转数字后&#xff0c;会占两位字符位&#xff0c;两位都是负数。 参考下面代码 输入&#xff1a;你 输出&#xff1a;01 #include<bits/stdc.h> using namespace std; int main() {cha…

浅谈低压无功补偿在分布式光伏现场中的应用-安科瑞 蒋静

摘要&#xff1a;分布式光伏电站由于建设时间短、技术成熟、收益明显而发展迅速&#xff0c;但光伏并网引起用户功率因数异常的问题也逐渐凸显。针对分布式光伏电站接入配电网后功率因数降低的问题&#xff0c;本文分析了低压无功补偿装置补偿失效的原因&#xff0c;并提出了一…

根据正则表达式截取字串符,这个办法打败99%程序员

作为一名程序员&#xff0c;常常会在以下情况下使用函数功能根据正则表达式截取字符串&#xff1a; 1.字符串处理&#xff1a;当需要使用正则表达式匹配和提取字符串中的特定模式时&#xff0c;可以使用该函数。例如&#xff0c;从一段文本中提取电子邮件地址、电话号码或网站…

python PyQt5 MySQL GUI 学生信息管理系统

学生信息管理系统 本系统使用python&#xff0c;pyqt5&#xff0c;数据库使用MySQL&#xff0c;实现windowsGUI应用。 python使用pymysql模块操作数据库代码 import pymysqldef handle_db(cmd, sql):result None# print(f" sql {sql}")# 连接数据库conn pymysql…

区块链与教育:颠覆传统,引领未来

区块链与教育&#xff1a;颠覆传统&#xff0c;引领未来 摘要&#xff1a;本文将探讨区块链技术在教育领域的应用及其潜在影响。通过介绍区块链技术的基本原理、教育领域的现状&#xff0c;以及区块链技术在教育中的实际应用案例&#xff0c;我们将展望一个去中心化、安全可信…