Blazo-Blazor Web App项目结构

news2025/1/24 7:34:56

让我们还是从创建项目开始,来一起了解下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项目中。

自动模式流程

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

首次访问

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

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

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

相关文章

数据表中的数据查询

文章目录 一、概述二、简单查询1.列出表中所有字段2.“*”符号表示所有字段3.查询指定字段数据4.DISTINCT查询 三、IN查询四、BETWEEN ADN查询1.符合范围的数据记录查询2.不符合范围的数据记录查询 五、LIKE模糊查询六、对查询结果排序七、简单分组查询1.统计数量2.统计计算平均…

System slimming and Quicker action

今天介绍2款提升工作效率的软件,一款用于系统瘦身,当你的各个盘快满的时候,你又不知道该删除哪些文件的时候,就可以用这个插件,进行系统瘦身;另外一款是可以快捷做很多操作以节省时间,比如有很多…

2025年华为云一键快速部署饥荒联机服务器教程

饥荒是一款动作冒险类求生游戏,自行部署专属游戏联机服务器,可以确保游戏的流畅性和稳定性,获得更好的游戏体验。为了方便玩家搭建专属游戏联机服务器,华为云推出了云游戏专场,无需专业技术,新手小白也能一…

OSCP - Proving Grounds - Quackerjack

主要知识点 端口转发 具体步骤 执行nmap扫描,开了好多端口,我先试验80和8081,看起来8081比较有趣 Nmap scan report for 192.168.51.57 Host is up (0.0011s latency). Not shown: 65527 filtered tcp ports (no-response) PORT STATE SERVICE …

Go 切片:用法和本质

要想更好的了解一个知识点,实战是最好的经历。 题目 我这里放一道题目: package mainimport "fmt"func SliceRise(s []int) {s append(s, 0)for i : range s {s[i]}fmt.Println(s) }func SlicePrint() {s1 : []int{1, 2}s2 : s1s2 append…

零售业革命:改变行业的顶级物联网用例

mpro5 产品负责人Ruby Whipp表示,技术进步持续重塑零售业,其中物联网(IoT)正引领这一变革潮流。 研究表明,零售商们正在采用物联网解决方案,以提升运营效率并改善顾客体验。这些技术能够监控运营的各个方面…

安卓动态设置Unity图形API

命令行方式 Unity图像api设置为自动,安卓动态设置Vulkan、OpenGLES Unity设置 安卓设置 创建自定义活动并将其设置为应用程序入口点。 在自定义活动中,覆盖字符串UnityPlayerActivity。updateunitycommandlineararguments (String cmdLine)方法。 在该方法中,将cmdLine…

Go学习:iota枚举

iota注意事项: iota:常量自动生成器,每隔一行,自动累加iota给常量赋值使用iota 遇到 const,重置为 0可以只写一个iotaiota如果是同一行,值都一样 简单代码: package mainimport "fmt&qu…

SpringBoot篇 单元测试 理论篇

1.单元测试概念介绍 简单来说,单元测试是对软件中的最小可测试单元进行检查和验证。在 Java 中,单元测试的最小单元是类。Spring Boot 提供了 spring-boot-starter-test 依赖,包含了 JUnit、Mockito、Hamcrest 等常用的测试框架1。&#xff0…

Formality:不可读(unread)的概念

相关阅读 Formalityhttps://blog.csdn.net/weixin_45791458/category_12841971.html?spm1001.2014.3001.5482https://blog.csdn.net/weixin_45791458/category_12841971.html?spm1001.2014.3001.5482 在Formality中有时会遇到不可读(unread)这个概念,本文就将对此…

ThreeJS示例教程200+【目录】

Three.js 是一个强大的 JavaScript 库,旨在简化在网页上创建和展示3D图形的过程。它基于 WebGL 技术,但提供了比直接使用 WebGL 更易于使用的API,使得开发者无需深入了解 WebGL 的复杂细节就能创建出高质量的3D内容。 由于目前内容还不多,下面的内容暂时做一个占位。 文章目…

【前端】Hexo 部署指南_hexo-deploy-git·GitHub Actions·Git Hooks

文章目录 前言基于 hexo-deploy-git基于 GitHub Actions基于 Git Hooks云平台端服务器端Git HooksSSHNginx 本地机端原理参考 前言 原文地址:https://blog.dwj601.cn/FrontEnd/Hexo/hexo-deployment/ #mermaid-svg-dfuCXqzZCx5I07IO {font-family:"trebuchet …

法律与认知战争:新时代的战略博弈

文章目录 前言全文摘要与关键词一、影响意志二、通过网络空间进行认知战1、网络行动的影响>行为本身2、与破坏性网络攻击相反,数字影响力行动可以产生战略效果三、法律作为一种战争工具四、如何反制法律战的使用?1、自由民主国家需要认识到俄罗斯等国的认知战在意图和深度上…

【Linux】其他备选高级IO模型

其他高级 I/O 模型 以上基本介绍的都是同步IO相关知识点,即在同步I/O模型中,程序发起I/O操作后会等待I/O操作完成,即程序会被阻塞,直到I/O完成。整个I/O过程在同一个线程中进行,程序在等待期间不能执行其他任务。下面…

Arduino D1 通过 Wi-Fi 控制 LED

Arduino D1 通过 Wi-Fi 控制 LED 硬件连接 将 LED 的正极(长脚)连接到 Arduino D1 的 D1 引脚。将 LED 的负极(短脚)通过一个电阻(例如 220 欧姆)连接到 Arduino D1 的 GND 引脚。 安装必要的库 在 Ard…

Flutter:自定义Tab切换,订单列表页tab,tab吸顶

1、自定义tab切换 view <Widget>[// 好评<Widget>[TDImage(assetUrl: assets/img/order4.png,width: 36.w,height: 36.w,),SizedBox(width: 10.w,),TextWidget.body(好评,size: 24.sp,color: controller.tabIndex 0 ? AppTheme.colorfff : AppTheme.color999,),]…

Tailscale 配置 subnet 实现访问 Openwrt 路由器下的子网

Openwrt 安装 Tailscale 参考 OpenWrt 配置 Tailscale 内网穿透。 tailscale两台openwrt(双lan)网对网(site to site)互通OpenWrt安装配置Tailscale 在 OpenWrt 上使用 Tailscale 使用 tailscale subnet 在openwrt terminal 执行 tailscale up --advertise-routes192.168.…

低代码可视化-转盘小游戏可视化-代码生成器

转盘小程序是一种互动工具&#xff0c;它通过模拟真实的转盘抽奖或决策体验&#xff0c;为用户提供了一种有趣且公平的选择方式。以下是对转盘小程序的详细介绍&#xff1a; 转盘小程序的应用场景 日常决策&#xff1a;转盘小程序可以帮助用户解决日常生活中的选择困难问题&a…

【Uniapp-Vue3】uni-icons的安装和使用

一、uni-icon的安装 进入到如下页面中&#xff0c;点击“点击下载&安装”。 uni-icons 图标 | uni-app官网 点击“下载插件并导入HBuilder”&#xff0c;如果没有登录就登陆一下 网页中会打开Hbuilder&#xff0c;进入Hbuilder以后&#xff0c;选择需要使用该插件的项目进…

【橘子ES】Kibana的分析能力Analytics简易分析

一、kibana是啥&#xff0c;能干嘛 我们经常会用es来实现一些关于检索&#xff0c;关于分析的业务。但是es本身并没有UI,我们只能通过调用api来完成一些能力。而kibana就是他的一个外置UI&#xff0c;你完全可以这么理解。 当我们进入kibana的主页的时候你可以看到这样的布局。…