Blazo-Blazor Web App项目结构

让我们还是从创建项目开始,来一起了解下Blazor Web App的项目情况

创建项目

在这里插入图片描述

呈现方式

在这里插入图片描述

这里我们可以看到需要选择项目的呈现方式,有以上四种呈现方式
● WebAssembly
● Server
● Auto(Server and WebAssembly)
● None 纯静态界面静态SSR呈现方式
WebAssembly,Server这两种呈现方式和托管模型有着i相似之处可以参考托管模型的概念,之后也会专门讲解呈现方式。
ASP.NET Blazor托管模型有哪些?

Auto(Server and WebAssembly)

表示Server方式与WebAssembly方式相结合,首次访问自动模式组件时,以Server模式运行,加载速度快,在服务端生成混合代码,并将生成的代码响应给客户端进行显示,用户通过SignalR进行交互。第二次访问自动模式时,自动切换为WebAssembly托管模式。

交互位置

在这里插入图片描述

可以设置的交互位置有两种

Per page/component(每页/组件)

默认设置每个页面/组件的交互性,我们需要在*.razor 文件中使用 [@rendermode 呈现模式] 指令为每个需要交互的组件设置呈现模式。若组件不需要使用 C#或 SignalR 交互,也就不需要为该组件设置交互位置。
在这里插入图片描述
我们可以看到如上图的方式,这种方式就是每个组件去设置交互性,可以看到通过@rendermode InteractiveAuto指定了交互方式。

Global(全局)

为整个 Blazor 应用设置全局交互性,只需要在 App.razor根组件中设置一次即可全局使用,其它任何组件不需要再通过指令设置呈现模式。
在这里插入图片描述
如上图如果选择全局,则设置会在App.razor根组件中标记

自动模式项目结构

自动模式会提高性能和用户体验,加快页面的加载速度,不需要让用户等待访问页面的加载
项目我们创成功了选择了Auto呈现模式,Per page/component交互模式,项目结构如下:
在这里插入图片描述

在项目中BlazorApp1项目为主项目,主要运行静态SSR和交互式SSR渲染的组件,而BlazorApp1.client项目主要运行交互式WebAssembly或自动模式的组件
在Blazor WebAPP自动模式下有一些限制需要注意:

  1. 在主项目中只能运行静态SSR或交互式SSR的组件,不能运行自动模式的组件
  2. 在主项目中运行交互式SSR组件时,则需要使用@rendermode InteractiveServer指定
  3. 运行交互式WebAssembly或者自动模式的组件,必须将该组件放在*.Client项目中。

自动模式流程

下面我画一个自动模式的流程图有助于大家理解

首次访问

在这里插入图片描述
二次访问
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/958605.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

我谈概率论与数理统计的知识体系

学习概率统计二十多年后,在廖老师的指导下,厘清了各章之间的关系。本来就是一条线两个分支,脉络很清晰。 分支一:从随机现象到样本空间到随机事件再到概率。 从随机事件到随机变量:为了进行定量的数学处理&#xff0…

检查w-form-select 组件是否正确透传了 visible-change 事件

文章目录 1. 下拉框的组件2. 点击下拉框时的逻辑(1)handleVisibleChange 方法(2)getIdentifies 方法 3. 选择关联识别点时的逻辑(1)onRelatedChange 方法 4. 相关 UI 更新5. 总结 在这段代码中,…

校验收货地址是否超出配送范围实战3(day09)

优化用户下单功能,加入校验逻辑,如果用户的收货地址距离商家门店超出配送范围(配送范围为5公里内),则下单失败。 提示: ​ 1. 基于百度地图开放平台实现(https://lbsyun.baidu.com/&#xff09…

Linux应用编程(五)USB应用开发-libusb库

一、基础知识 1. USB接口是什么? USB接口(Universal Serial Bus)是一种通用串行总线,广泛使用的接口标准,主要用于连接计算机与外围设备(如键盘、鼠标、打印机、存储设备等)之间的数据传输和电…

【优选算法】7----三数之和

来了来了,他来了,又是学习算法的一天~ 今天的嘉宾是中等难度的算法题----三数之和! ------------------------------------------begin------------------------------------ 题目解析: 哇趣!又是给了一个数组&#…

深度学习|表示学习|卷积神经网络|参数共享是什么?|07

如是我闻: Parameter Sharing(参数共享)是卷积神经网络(CNN)的一个重要特性,帮助它高效地处理数据。参数共享的本质就是参数“本来也没有变过”。换句话说,在卷积层中,卷积核的参数&…

DeepSeek-R1:性能对标 OpenAI,开源助力 AI 生态发展

DeepSeek-R1:性能对标 OpenAI,开源助力 AI 生态发展 在人工智能领域,大模型的竞争一直备受关注。最近,DeepSeek 团队发布了 DeepSeek-R1 模型,并开源了模型权重,这一举动无疑为 AI 领域带来了新的活力。今…

递归的本质

字节面试题叠罗汉,很遗憾没想出来,看了答案挺巧妙的,但是居然是个案例题。。。 复习一下递归的本质 正面解决问题 利用子问题来解决 可以通过规约推导的,基本可以用递归解决! 在写这道算法题时,我想规…

【力扣:新动计划,编程入门 —— 题解 ②】

—— 25.1.23 1512. 好数对的数目 给你一个整数数组 nums 。 如果一组数字 (i,j) 满足 nums[i] nums[j] 且 i < j &#xff0c;就可以认为这是一组 好数对 。 返回好数对的数目。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3,1,1,3] 输出&#xff1a;4 解释&#xff…

K8S 快速实战

K8S 核心架构原理: 我们已经知道了 K8S 的核心功能:自动化运维管理多个容器化程序。那么 K8S 怎么做到的呢?这里,我们从宏观架构上来学习 K8S 的设计思想。首先看下图: K8S 是属于主从设备模型(Master-Slave 架构),即有 Master 节点负责核心的调度、管理和运维,Slave…

Redis 集群模式入门

Redis 集群模式入门 一、简介 Redis 有三种集群模式&#xff1a;主从模式、Sentinel 哨兵模式、cluster 分片模式 主从复制&#xff08;Master-Slave Replication&#xff09;: 在这种模式下&#xff0c;数据可以从一个 Redis 实例&#xff08;主节点 Master&#xff09;复…

Vue2 项目二次封装Axios

引言 在现代前端开发中&#xff0c;HTTP请求管理是构建健壮应用的核心能力之一。Axios作为目前最流行的HTTP客户端库&#xff0c;其灵活性和可扩展性为开发者提供了强大的基础能力。 1. 为什么要二次封装Axios&#xff1f; 1.1 统一项目管理需求 API路径标准化&#xff1a;…

Ceisum无人机巡检直播视频投射

接上次的视频投影&#xff0c;Leader告诉我这个视频投影要用在两个地方&#xff0c;一个是我原先写的轨迹回放那里&#xff0c;另一个在无人机起飞后的地图回显&#xff0c;要实时播放无人机拍摄的视频&#xff0c;还要能转镜头&#xff0c;让我把这个也接一下。 我的天&#x…

AI Agent:深度解析与未来展望

一、AI Agent的前世&#xff1a;从概念到萌芽 &#xff08;一&#xff09;早期探索 AI Agent的概念可以追溯到20世纪50年代&#xff0c;早期的AI研究主要集中在简单的规则系统上&#xff0c;这些系统的行为是确定性的&#xff0c;输出由输入决定。随着时间的推移&#xff0c;…

Spring MVC:HTTP 请求的参数传递2.0

本篇博客接上文: Spring MVC&#xff1a;Spring 前置知识 & HTTP 请求的参数传递1.0-CSDN博客 目录 1. 传递 json - RequestBody 1.1 json 1.1.1 什么是 json 1.1.2 json 的语法 1.1.3 json 和 Java 中对象的转换 1.1.4 json 优点 1.2 传递 json 2. 获取路径参数 -…

电子应用设计方案103:智能家庭AI浴缸系统设计

智能家庭 AI 浴缸系统设计 一、引言 智能家庭 AI 浴缸系统旨在为用户提供更加舒适、便捷和个性化的沐浴体验&#xff0c;融合了人工智能技术和先进的水疗功能。 二、系统概述 1. 系统目标 - 实现水温、水位和水流的精确控制。 - 提供多种按摩模式和水疗功能。 - 具备智能清洁…

设计模式的艺术-外观模式

结构性模式的名称、定义、学习难度和使用频率如下表所示&#xff1a; 1.如何理解外观模式 外观类充当了软件系统中的“服务员”&#xff0c;它为多个业务类的调用提供了一个统一的入口&#xff0c;简化了类与类之间的交互。 外观模式&#xff08;Facade Pattern&#xff09;&a…

“““【运用 R 语言里的“predict”函数针对 Cox 模型展开新数据的预测以及推理。】“““

主题与背景 本文主要介绍了如何在R语言中使用predict函数对已拟合的Cox比例风险模型进行新数据的预测和推理。Cox模型是一种常用的生存分析方法&#xff0c;用于评估多个因素对事件发生时间的影响。文章通过具体的代码示例展示了如何使用predict函数的不同参数来获取生存概率和…

戴尔电脑设置u盘启动_戴尔电脑设置u盘启动多种方法

最近有很多网友问&#xff0c;戴尔台式机怎么设置u盘启动&#xff0c;特别是近两年的戴尔台式机比较复杂&#xff0c;有些网友不知道怎么设置&#xff0c;其实设置u盘启动有两种方法&#xff0c;下面小编教大家戴尔电脑设置u盘启动方法。 戴尔电脑设置u盘启动方法一、戴尔进入b…

【React】 react路由

这一篇文章的重点在于将React关于路由的问题都给搞清楚。 一个路由就是一个映射关系&#xff0c;key:value。key是路径&#xff0c;value 可能是function或者component。 安装react-router-dom包使用路由服务&#xff0c;我这里想要用的是6版本的包&#xff0c;因此后面加”6&q…