生成第一个 Blazor 应用

news2024/11/26 21:49:50

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

概述: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.coloradmin.cn/o/1167077.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

rabbitmq的confirm模式获取correlationData为null解决办法

回调函数confirm中的correlationDatanull // 实现confirm回调,发送到和没发送到exchange,都触发 Override public void confirm(CorrelationData correlationData, boolean ack, String cause) {// 参数说明:// correlationData: 相关数据,可以在发送消息时,进行设置该参数// …

重大喜讯 | UMS攸信技术斩获厦门5G应用大赛三等奖!

近日,第三届厦门5G应用大赛获奖项目名单公示,攸信技术的“AI5G柔性生产缺陷检测示范线”项目脱颖而出,荣获「第三届厦门5G应用大赛三等奖」! 第三届厦门5G应用大赛获奖项目名单 本次获奖既是对攸信技术5G技术创新的鼓励&#xff0…

Ribbon负载均衡原理

一、先看下流程图 备注:红色后面都为拦截器的逻辑,主要是加载配置文件【LoadBalancerAutoConfiguration】,对发送http请求的RestTemplate进行包装拦截,逻辑拦在拦截器里面。 二、LoadBalancerAutoConfiguration 负载均衡用到配置…

Spring集成高性能队列Disruptor

Disruptor简介 Disruptor(中文翻译为“破坏者”或“颠覆者”)是一种高性能、低延迟的并发编程框架,最初由LMAX Exchange开发。它的主要目标是解决在金融交易系统等需要高吞吐量和低延迟的应用中的并发问题。 Disruptor特点 无锁并发&#x…

kibana中文设置

安装目录下: 修改config/kibana.yml文件,添加如下配置 i18n.locale: "zh-CN"如图: 保存后,重启kibana即可

分组select获取每组用户最新时间的那条数据的查询方式

分组select获取每组用户最新时间的那条数据的查询方式,使用子查询内连接的方式实现 selecttp.user_id AS userId,tp.operator,DATE_FORMAT(tp.create_time,%Y-%m-%d %H:%i:%s) AS operateTimefrom 表名 t1 INNER JOIN(select user_id, max(create_time) max_time from 表名whe…

LeakCanary - Android的内存泄漏检测库

官网 GitHub - square/leakcanary: A memory leak detection library for Android. LeakCanary 项目简介 LeakCanary’s knowledge of the internals of the Android Framework gives it a unique ability to narrow down the cause of each leak, helping developers drama…

知识付费系统小程序开发中的最新趋势和技术是什么?

在迅速发展的移动应用市场中,知识付费系统小程序成为了在线学习和知识传递的重要形式。随着技术的不断进步,了解最新的趋势和技术对于开发知识付费系统小程序至关重要。本文将讨论当前在这一领域中备受关注的最新趋势和技术。 1. 跨平台开发框架的崛起…

赢在电商设计!2024年最新电商设计实战技巧盘点

双十一、双十二、黑五的电商大促即将轮番将至,电商运营人迎来大忙季,选品、直播、采购入库、售后……各种环节都是影响电商转化的关键因素,而电商设计作为打通这些环节,打造高转化率电商平台的关键要素,能够吸引用户注…

淘宝(PC端和APP端)商品详情API接口,可批量采集,高并发请求

淘宝(PC端和APP端)商品详情API接口,可批量采集,高并发请求代码如下: 淘宝商品详情API接口可以获取到商品的详细信息,以下是一个示例: 请求方式:使用HTTP或HTTPS协议,向指…

android studio安卓模拟器启动了但是看不到画面解决办法

当你使用android studio开发软件的时候,可能会遇到这个问题,就是当你点击下拉框中的启动模拟器的时候,看着程序是启动了,并且运行了,但是看不到模拟器界面,如下图: 这个时候,就要停止…

老年性聋不仅是听不到那么简单,如何避免让它来的更晚一些?

你是否有过这样的经历,和老年人聊天时,他们总是让你重复说话,或者说“你说话太小声了,我听不清楚”?这可能是老年性聋的一个信号。 据统计,老年性聋是全球老年人口中第二大常见疾病,也是全球第三…

【React】【react-globe.gl】3D Objects效果

目录 想要实现的效果实现过程踩坑安装依赖引入页面 想要实现的效果 示例地址 实现过程 踩坑 示例是通过script引入的依赖,但本人需要在react项目中实现该效果。按照react-globe.gl官方方法引入总是报错 Cant import the named export AmbientLight from non EcmaS…

pb:导入EXCEL,提示“不能连接EXCEL”

pb:导入EXCEL,提示“不能连接EXCEL” ------------------------------------------------------------------------------------------------------------------------------- 1.pb连上EXCEL代码: //从EXCEL读取文件 STRING LS_PATH,LS_FILE,ls_file_tmp oleobject ole_1…

三国志14信息查询小程序(历史武将信息一览)制作更新过程02-基本架构

0,前期准备 (1)一台有公网IP的云服务器,服务器上安装MySQL数据库,启用IIS服务。出入端口号配置运行(服务器和平台都要配置),IIS服务器上安装SSL证书 (2)域名…

Astah Professional 全功能专业UML建模工具软件

Astah Professional是Mac上一款全新的轻量级UML建模工具。软件集思维导图和UML建模于一体,采用100%纯JAVA构建, 兼容性强,不仅能够实现分布式建模、项目合并,还能够实现和其它建模工具的交互。 Astah Professional软件优点 1、易…

Maven修改仓库和镜像地址

目录 1、修改仓库地址2、修改镜像地址 1、修改仓库地址 使用IDEA时,如果不指定自己下载的Maven,idea会默认使用自带的Maven 3(bundle)。maven 3默认的仓库路径一般是在c盘的用户文件夹中的.m2目录下: 当maven下的pom文件中的依赖逐渐增加时,maven仓库下…

leetcode:26. 删除有序数组中的重复项(python3解法)

难度:简单 给你一个 非严格递增排列 的数组 nums ,请你 原地 删除重复出现的元素,使每个元素 只出现一次 ,返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元素的数…

Android 13 GTS GtsPermissionControllerHostTestCases Test Failed

Android13 平板项目测试GtsPermissionControllerHostTestCases Failed,失败日志如下: java.lang.AssertionError: on-device tests failed: com.android.gts.permissioncontroller.PermissionControllerTest29#testGranted: java.lang.NullPointerExcep…

搭建专属品牌的独立题库小程序,自定义小程序名称和Logo|题库刷题小程序定制开发

土著刷题Plus专业版,以【录题-分组-刷题-考试】为中心打造一套完备的在线组卷刷题学习平台,自定义品牌名称和Logo,入驻后,您将拥有自己独立的企业级专业运营管理平台。 土著刷题Plus专业版v1.3.1版本,我们迭代了独立小…