.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);}
}

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vivado生成edif网表及其使用

介绍如何在Vivado中将模块设为顶层&#xff0c;并生成相应的网表文件&#xff08;Verilog文件和edif文件&#xff09;&#xff0c;该过程适用于需要将一个模块作为顶层设计进行综合&#xff0c;并生成用于其他工程中的网表文件的情况。 例如要将fpga_top模块制作成网表给其它工…

【Python网络爬虫】爬取网站图片实战

【Python网络爬虫】爬取网站图片实战 Scrapying Images on Website in Action By Jackson@ML *声明:本文简要介绍如何利用Python爬取网站数据图片,仅供学习交流。如涉及敏感图片或者违禁事项,请注意规避;笔者不承担相关责任。 1. 创建Python项目 1) 获取和安装最新版…

Python从0到100(八十八):LSTM网络详细介绍及实战指南

前言&#xff1a; 零基础学Python&#xff1a;Python从0到100最新最全教程。 想做这件事情很久了&#xff0c;这次我更新了自己所写过的所有博客&#xff0c;汇集成了Python从0到100&#xff0c;共一百节课&#xff0c;帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…

window patch按块分割矩阵

文章目录 1. excel 示意2. pytorch代码3. window mhsa 1. excel 示意 将一个三维矩阵按照window的大小进行拆分成多块2x2窗口矩阵&#xff0c;具体如下图所示 2. pytorch代码 pytorch源码 import torch import torch.nn as nn import torch.nn.functional as Ftorch.set_p…

python013-基于Python的智能停车系统的设计与实现(源码+数据库+论文+部署讲解等)

&#x1f495;&#x1f495;作者&#xff1a; 爱笑学姐 &#x1f495;&#x1f495;个人简介&#xff1a;十年Java&#xff0c;Python美女程序员一枚&#xff0c;精通计算机专业前后端各类框架。 &#x1f495;&#x1f495;各类成品Java毕设 。javaweb&#xff0c;ssm&#xf…

gitlab无法登录问题

在我第一次安装gitlab的时候发现登录页面是 正常的页面应该是 这种情况的主要原因是不是第一次登录&#xff0c;所以我们要找到原先的密码 解决方式&#xff1a; [rootgitlab ~]# vim /etc/gitlab/initial_root_password# WARNING: This value is valid only in the followin…

无线4G多联机分户计费集中控制系统

拓森无线4G多联机集中控制系统应用于宝龙广场多联机计费集中控制节能改造项目&#xff0c;包括多联机集中控制&#xff0c;分户计费&#xff0c;空调监控管理、告警管理、节能管控、统计报表、能效分析、空调远程开关机等功能。项目的成功实施&#xff0c;不仅提升了维护管理效…

oracle多次密码错误登录,用户锁住或失效

多次输入错误账号查询状态&#xff1a; select username,account_status from dba_users; TEST EXPIRED(GRACE) 密码错误延迟登录&#xff0c;延迟登录还能登录 或者 TEST LOCKED(TIMED) 密码错误锁 TEST EXPIRED(GR…

连通两台VMware虚拟机

连通两台VMware虚拟机 Fairing Winds and Following Seas VMware各模式的区别 在尝试连接之前&#xff0c;我们要搞清楚各模式的区别 简单来说就是&#xff0c;只有桥接模式和NAT模式是可以实现虚拟机联通的&#xff0c;而桥接模式和NAT模式分别对应了 V M w a r e VMware VM…

C++ 容器适配器

文章目录 1. 适配器2. stack和queue2.1 deque2.1.1 deque的底层结构2.1.2 deque如何实现头插和随机访问 2.2 用deque实现栈和队列2.3 deque的优缺点 3. priority_queue 1. 适配器 适配器是什么&#xff1f; 适配器是一种设计模式&#xff0c;实质上就是一种复用&#xff0c;即…

DeepSeek R1本地部署解决,DeepSeek服务繁忙

DeepSeek 本地部署是指将DeepSeek模型下载到本地电脑上&#xff0c;利用电脑的显卡进行数据处理和推理&#xff0c;可以减少网络延迟&#xff0c;提高数据处理和响应速度&#xff0c;从而避免将数据传输到云端&#xff0c;增强了数据的主权和控制&#xff0c;减少了因网络连接可…

GPT和BERT

笔记来源&#xff1a; Transformer、GPT、BERT&#xff0c;预训练语言模型的前世今生&#xff08;目录&#xff09; - B站-水论文的程序猿 - 博客园 ShusenWang的个人空间-ShusenWang个人主页-哔哩哔哩视频&#xff08;RNN模型与NLP应用&#xff09; 一、GPT 1.1 GPT 模型的…

深入浅出Java反射:掌握动态编程的艺术

小程一言反射何为反射反射核心类反射的基本使用获取Class对象创建对象调用方法访问字段 示例程序应用场景优缺点分析优点缺点 注意 再深入一些反射与泛型反射与注解反射与动态代理反射与类加载器 结语 小程一言 本专栏是对Java知识点的总结。在学习Java的过程中&#xff0c;学习…

JDK 14,15,17的一些新特性(部分常用)

1&#xff1a;instanceof&#xff08;后&#xff0c;使用不再需要墙转&#xff09; 2&#xff1a;switch语句增强 1&#xff1a;支持lmbda&#xff0c;自动防击穿&#xff0c;有返回值 2&#xff1a;支持case多个值&#xff0c;复杂逻辑结果支持yield返回 3&#xff1a;字符串…

活字格使用说明书

字格设计使用说明书 目录 1. 数据 2. 页面 3. 组件 4. 命令 一、数据 1.表数据创建(鼠标移动到表右击点击创建表) ‘ 图表 1 鼠标移至表1右击可重命名,添加字段输入所需字段名(一般数据类型的要注意:日期格式字段---日期、ID或者字典字段---整数、金…

springboot021校园周边美食探索及分享平台

版权声明 所有作品均为本人原创&#xff0c;提供参考学习使用&#xff0c;如需要源码数据库配套文档请移步 www.taobysj.com 搜索获取 技术实现 开发语言&#xff1a;Javavue。 框架&#xff1a;后端spingboot前端vue。 模式&#xff1a;B/S。 数据库&#xff1a;mysql。 开…

Kubernetes部署KeyDB服务

Kubernetes YAML 配置文件&#xff0c;部署一个 KeyDB 容器 vi keydb-deployment.yaml内容如下 apiVersion: apps/v1 kind: Deployment metadata:name: keydb-deployment spec:replicas: 1selector:matchLabels:app: keydbtemplate:metadata:labels:app: keydbspec:container…

新手自学:如何用gromacs对简单分子复合物进行伞形采样

1、建立体系: 1、将蛋白的pdb文件转化为gmx: gmx pdb2gmx -f 2BEG_model1_capped.pdb -ignh -ter -o complex.gro 这个网页可以实现将多肽序列转化为pdb: ProBuilder On-line 这个教程的蛋白2BFG包含两条链(chain A和B) 在生成的topol文件中,增加如下的内容,效果就…

如何使用Java语言在Idea和Android中分别建立服务端和客户端实现局域网聊天

手把手教你用Java语言在Idea和Android中分别建立服务端和客户端实现局域网聊天 目录 文章目录 手把手教你用**Java**语言在**Idea**和**Android**中分别建立**服务端**和**客户端**实现局域网聊天**目录**[toc]**基本实现****问题分析****服务端**Idea:结构预览Server类代码解…

金蝶云星空与马帮平台无缝对接,提高供应链效率

采购退货金蝶》马帮ok&#xff1a;系统对接集成案例分享 在企业的供应链管理中&#xff0c;数据的高效流转和准确处理至关重要。本文将聚焦于一个实际运行的系统对接集成案例——将金蝶云星空的数据集成到马帮平台&#xff0c;以实现采购退货数据的无缝传输和处理。 为了确保…