当前位置: 首页 > 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;快速幂。…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...