当前位置: 首页 > news >正文

.NET 9.0 的 Blazor Web App 项目,进度条 <progress> 组件使用注意事项

一、执行过程中,要刷新 进度条 的显示,需要 延时、释放,否则进度条不 实时 更新,最后一下到 100%

 // 延时,释放给前端:【必须】,否则进度条不 实时 更新,最后一下到 100await Task.Delay(1);

二、执行过程中,需要 通知 Blazor 更新 UI,否则不 实时 更新

// 通知 Blazor 更新 UI:【必须】,否则不 实时 更新
StateHasChanged();

三、如果是单击执行,执行过程中,应该禁用 按钮,防止没有执行完毕就再次进入

// 禁用按钮
IsButtonDisabled = true;

四、示例程序

@page "/progress-demo"<h3>进度条示例</h3><br /><button @onclick="StartCalculation" disabled="@IsButtonDisabled">开始计算</button><br />
<br /><progress value="@progressValue" max="100"></progress><p>进度: @progressValue%</p>@code {private bool IsButtonDisabled { get; set; } = false;// 模拟 费时 计算void Calculation(){double d = 1.1;for (int i = 0; i < 1000000; i++){d *= 9.9;}}// 进度条数值变量private int progressValue = 0;private async Task StartCalculation(){// 禁用按钮IsButtonDisabled = true;// 重置进度条progressValue = 0;// 开始 多次 费时 操作for (int i = 1; i <= 1000; i++){// 这儿时 具体 费时 操作代码Calculation();// 更新一次进度条if (i % 10 == 0){// 更改进度条数值progressValue++;// 输出到 Console 观察实际进度System.Console.WriteLine($"progressValue = {progressValue}, i = {i}");// 延时,释放给前端:【必须】,否则进度条不 实时 更新,最后一下到 100await Task.Delay(1);// 通知 Blazor 更新 UI:【必须】,否则不 实时 更新StateHasChanged();}}// 计算完成,确保 进度条 设置为 100%progressValue = 100;// 重新启用按钮IsButtonDisabled = false;await Task.FromResult(true);}
}

相关文章:

.NET 9.0 的 Blazor Web App 项目,进度条 <progress> 组件使用注意事项

一、执行过程中&#xff0c;要刷新 进度条 的显示&#xff0c;需要 延时、释放&#xff0c;否则进度条不 实时 更新&#xff0c;最后一下到 100% // 延时&#xff0c;释放给前端&#xff1a;【必须】&#xff0c;否则进度条不 实时 更新&#xff0c;最后一下到 100await Task.D…...

第J7周:对于ResNeXt-50算法的思考

目录 FROM思考 FROM &#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 &#x1f4cc;你需要解决的疑问&#xff1a;这个代码是否有错&#xff1f;对错与否都请给出你的思考 &#x1f4cc;打卡要求&#xff1a…...

【第2章:神经网络基础与实现——2.3 多层感知机(MLP)的构建与调优技巧】

在当今科技飞速发展的时代,人工智能早已不是一个陌生的词汇,它已经渗透到我们生活的方方面面,从智能语音助手到自动驾驶汽车,从图像识别到自然语言处理。而支撑这一切的核心技术之一,就是神经网络。作为机器学习领域的璀璨明星,神经网络已经在众多任务中取得了令人瞩目的…...

【Elasticsearch】keyword分析器

Elasticsearch 中的keyword分析器是一种非常特殊的分析器&#xff0c;它的行为与其他常见的分析器&#xff08;如standard、whitespace等&#xff09;截然不同。keyword分析器的核心功能是将整个输入字符串作为一个单一的标记&#xff08;token&#xff09;返回&#xff0c;而不…...

重生之我在异世界学编程之C语言:深入预处理篇(上)目录)

大家好&#xff0c;这里是小编的博客频道 小编的博客&#xff1a;就爱学编程 很高兴在CSDN这个大家庭与大家相识&#xff0c;希望能在这里与大家共同进步&#xff0c;共同收获更好的自己&#xff01;&#xff01;&#xff01; 本文目录 引言正文一、预处理的作用与流程&#xf…...

MySQL数据库误删恢复_mysql 数据 误删

2、BigLog日志相关 2.1、检查biglog状态是否开启 声明: 当前为mysql版本5.7 当前为mysql版本5.7****当前为mysql版本5.7 2.1.1、Navicat工具执行 SHOW VARIABLES LIKE LOG_BIN%;OFF 是未开启状态&#xff0c;如果不是ON 开启状态需要开启为ON。{默认情况下就是关闭状态} 2.…...

SpringAI集成DeepSeek实战

SpringAI集成DeepSeek实战教程 引言 Spring AI作为Spring生态系统中的新成员&#xff0c;为开发者提供了便捷的AI集成方案。本文将详细介绍如何在Spring项目中集成DeepSeek模型&#xff0c;实现智能对话等功能。 环境准备 在开始之前&#xff0c;请确保您的开发环境满足以下要…...

解决 THC/THC.h: No such file or directory 报错

报错现象&#xff1a; cc1plus: warning: command line option ‘-Wstrict-prototypes’ is valid for C/ObjC but not for C In file included from /data/joyiot/liyong/codes/graspnet-baseline/knn/src/knn.h:5:0,from /data/joyiot/liyong/codes/graspnet-baseline/knn/s…...

S4D480 S4HANA 基于PDF的表单打印

2022年元旦的笔记草稿 SAP的表单打印从最早的SAPScripts 到后来的SMARTFORM&#xff0c;步入S4时代后由于Fiori的逐渐普及&#xff0c;更适应Web的Adobe Form成了SAP主流output文件格式。 目录 一、 基于PDF表单打印系统架构Interface 接口Form 表单ContextLayout 二、表单接…...

数组_移除元素

数组_移除元素 一、leetcode-27二、题解1.代码2.思考 一、leetcode-27 移除元素 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素。元素的顺序可能发生改变。然后返回 nums 中与 val 不同的元素的数量。 假设 nums 中不等于 val 的元素数…...

Vue2/Vue3分别如何使用Watch

在 Vue 2 和 Vue 3 中&#xff0c;watch 用于监听数据的变化并执行相应的逻辑。虽然两者的核心功能相同&#xff0c;但在语法和使用方式上有一些区别。以下是 Vue 2 和 Vue 3 中使用 watch 的详细说明&#xff1a; Vue 2 中的 watch 在 Vue 2 中&#xff0c;watch 是通过选项式…...

C++从入门到实战(四)C++引用与inline,nullptr

C从入门到实战&#xff08;四&#xff09;C引用与inline&#xff0c;nullptr 前言一、C 引用&#xff08;一&#xff09;什么是引用&#xff08;二&#xff09;引用的特点&#xff08;三&#xff09;引用作为函数参数&#xff08;四&#xff09;引用作为函数返回值&#xff08;…...

Linux库制作与原理:【静态库】【动态库】【目标文件】【ELF文件】【ELF从形成到假造轮廓】【理解链接和加载】

目录 一.什么是库 二.静态库 2.1创建静态库 我们在之前的路径下新建lib使用我们自己的库 2.2 使用makefile生成静态库 三.动态库 3.1动态库生成 3.2动态库使用 3.3库运行搜索路径 四.目标文件 五.ELF文件 六.ELF从形成到加载轮廓 6.1ELF形成可执行 6.2 ELF可执行文…...

项目BUG

项目BUG 前言 我创作这篇博客的目的是记录学习技术过程中的笔记。希望通过分享自己的学习经历&#xff0c;能够帮助到那些对相关领域感兴趣或者正在学习的人们。 项目BUG 1.低频率信号(100k或 200K以下)可以直接用一根导线焊接出几根导线来分几路&#xff0c;高频率信号只能…...

wordpress部署nginx版的

一、通过nginx部署wordpress 1、用yum源安装nginx yum install -y nginx 2、安装php相关软件 前提安装webtatic rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm 通过yum源安装php相关软件 yum -y install php72w php72w-pdo php72w-mysqlnd php72w…...

【鸿蒙Next】优秀鸿蒙博客集锦

鸿蒙基础开发&#xff1a;多文件压缩上传及断点续传_鸿蒙 断点续传-CSDN博客...

【第2章:神经网络基础与实现——2.1 前馈神经网络的结构与工作原理】

老铁们好!今天我们要来一场长达两万字的超详细技术探险,我会像拆解乐高积木一样把前馈神经网络(Feedforward Neural Network)的每个零件摆在台面上,用最接地气的方式让你彻底搞懂这个深度学习基石的工作原理。准备好了吗?我们开始吧! 第一章:神经网络的 “乐高积木” 1…...

python-leetcode-阶乘后的零

172. 阶乘后的零 - 力扣&#xff08;LeetCode&#xff09; class Solution:def trailingZeroes(self, n: int) -> int:count 0while n > 5:n // 5count nreturn count...

Python:学生管理系统(继承性、多态性)。

输出样例如图&#xff1a; 题目内容&#xff1a; 利用继承、多态性等面向对象程序功能编写程序&#xff0c;实现学生管理系统&#xff0c;并包含以下内容&#xff1a; 第一&#xff0c;基类为学生类&#xff0c;并以此派生出本科生类、研究生类。 第二&#xff0c;本科生类包含…...

网络安全RSA加密

网络安全课相关知识&#xff1a; RSA预备知识 1.1 快速幂算法 顾名思义&#xff0c;快速幂就是快速算底数的$n$次幂。其时间复杂度为${\rm{O(log n)}}$&#xff0c;与朴素的$O\left( n \right)$相比&#xff0c;效率有了极大的提高。具体可以参考百度百科&#xff1a;快速幂。…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

淘宝扭蛋机小程序系统开发:打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

适应性Java用于现代 API:REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...