Blazor Timer 调用异步 API 任务来更新 UI

2024-03-11

我正在 Blazor 服务器端页面中设置计时器。目标是每 x 秒调用一次 API,并根据返回值更新 UI。

我得到这个代码:

private string Time { get; set; }

protected override void OnInitialized()
{
    var timer = new System.Threading.Timer((_) =>
    {
        Time = DateTime.Now.ToString();
        InvokeAsync(() =>
        {
            StateHasChanged();
        });
    }, null, 0, 1000);
    base.OnInitialized();
}

这效果很好。 UI 每秒更新一次新的时间值。但是,我不知道如何调用异步任务来获取值。我想更换线路:

Time = DateTime.Now.ToString();

一行调用以下函数:

private async Task<string> GetValue()
{
    var result = await _api.GetAsync<StringDto>("/api/GetValue");
    return result.Text;
}

我试过这条线:

Time = GetValue().Result;

但我收到以下错误:

The current thread is not associated with the Dispatcher. Use InvokeAsync() to switch execution to the Dispatcher when triggering rendering or component state.

我需要做什么来调用异步方法?

非常感谢!


您可能不想 Invoke() GetValue(),那是毫无意义的。您可以像这样实现计时器:

System.Threading.Timer timer;
protected override void OnInitialized()
{
    timer = new System.Threading.Timer(async _ =>  // async void
    {
        Time = await GetValue();
        // we need StateHasChanged() because this is an async void handler
        // we need to Invoke it because we could be on the wrong Thread          
        await InvokeAsync(StateHasChanged);
    }, null, 0, 1000);
}

我使用一个字段来存储计时器,因为您应该处置它,将其添加到 Razor 部分:

@implements IDisposable

这是代码:

public void Dispose()
{
    timer?.Dispose();
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Blazor Timer 调用异步 API 任务来更新 UI 的相关文章

  • Blazor 服务器端应用程序上的子 Blazor 应用程序

    将客户端 Blazor 应用添加到服务器端 Blazor 应用 Hi 继续这里的有用答案 升级到预览版 6 后 Blazor 子应用程序出现 404 错误 https stackoverflow com questions 56586677
  • Blazor 服务器和 EF Core:在上一个操作完成之前,已在此上下文实例上启动第二个操作

    我的 ef 核心有问题 我有两个从数据库读取数据的服务 在一个页面上调用第一个服务 在第二个页面上调用第二个服务 当我单击按钮创建新程序时 出现错误 我通常从带有注入服务的页面调用它 有人可以帮我吗 在应用程序中显示 https i sta
  • 如何在 Blazor 中使用 TagHelpers?

    我创建了一个标签助手 并想在我的 Blazor 示例项目中使用它 但是 当我想使用标签助手时 编译器会抱怨 CS0103 The name StartTagHelperWritingScope does not exist in the c
  • 如何访问 Blazor WebAssembly 中的应用程序设置

    我当前正在尝试将 api url 保存在应用程序设置中 但是 configuration Properties似乎是空的 我不确定如何获取该设置 在程序 cs中 public static async Task Main string ar
  • 在 Blazor 组件中使用带有继承的泛型类型

    我正在尝试在 Blazor 中创建一个 通用列表 组件 并希望该组件能够接受从基类派生的任何对象 我的代码目前如下 基类 public class Model PK for the record Key public int Id get
  • C# 修改身份或添加声明

    应用程序是 Blazor Server NET Core 5 0 我正在使用 NET Core 的身份系统 但遇到了问题 我希望将这个人的名字与身份一起存储 以便我可以轻松地调用它 目前我有一个类覆盖基本身份 public class Ap
  • 如何动态生成blazor的@bind-Value?

    我正在使用 Blazor 我想创建一个动态生成的表单 它是网格的一部分 数据的实体类型被传递到网格 这是表单的基础 我现在面临的问题是 bind Value 需要它才能编辑给定的实体 I use Blazor表带 https blazors
  • 我可以阻止 Blazor 中的导航吗?

    在 Blazor 服务器端应用程序中 是否涉及一些执行实际导航的 javascript 例如当用户点击链接时 我的意思是像window history pushState 理论上是否可以覆盖该 javascript 以防止在某些情况下 当页
  • 在服务器端 Blazor 项目中构建身份时出错

    我正在开发一个服务器端 Blazor 应用程序 该应用程序是使用为身份验证选择的 个人用户帐户 选项创建的 我现在想要自定义登录页面 但是当我选择通过脚手架添加身份页面时 我收到以下错误 并且我不确定从哪里开始进行故障排除 无法在内存中编译
  • Blazor - 如何动态创建组件

    我想测试是否可以动态创建 Blazor 组件 我找不到任何方法来做到这一点 我尝试了一些在上面找到的动态内容这个链接 https learn blazor com pages dynamic content 但最终还没有得到任何结果 根据对
  • Blazor按钮,使用父组件@onclick

    是否可以使用父组件方法 onclick 或者我需要从子组件中调用它 假设我想调用父方法 Foo Parent page Custom component button
  • 仅允许在 blazor 中上传特定文件类型

    我在用BlazorInputFile用于在 Blazor 中上传文件的包 Problem 这段代码不起作用
  • Sqlite 与 Blazor Wasm (.NET 6) -> System.DllNotFoundException: e_sqlite3

    根据 NET 6 中的新 Blazor WebAssembly 功能 NET 6 中的新 Blazor WebAssembly 功能 Sqlite 与 Blazor Wasm NET 6 gt System DllNotFoundExcep
  • 在 Blazor 中显示计时器

    我正在尝试在服务器端 Blazor 应用程序中显示倒计时器 我的代码同时使用 F 和 C 语言 该代码在某种程度上可以工作 但计时器永远不会按预期停止 并且计时器显示偶尔不会呈现所有数字 这是我第一次尝试 Blazor 服务器端应用程序 我
  • 如何在服务器端应用程序中获取本地数据源?

    我正在使用 blazor 服务器端应用程序 我需要引用本地数据源 我已经使用 Http 作为默认客户端示例 code ChartData dataSource protected override async Task OnInitAsyn
  • “TransformAppSettings”任务意外失败

    我有一个 NET Core 3 Blazor 服务器端 应用程序 我最近从预览版 5 版本升级到了 NET Core 3 0 1 预览版 6 版本 当我在本地构建并运行它时 它工作正常 但是当尝试将其发布到文件系统文件夹 在框架相关模式下
  • 如何通过 HttpContext 访问 Blazor Server .Net 6 中的 cookie?

    不幸的是 有关在 Blazor Server 中访问 c ookie 的教程和之前的 StackOverflow 答案似乎在新的 Net 版本中变得无效 例如 我无法获得以下任一答案 根据 net 6 中没有的评论来判断 如何在服务器端 B
  • 如何用bunit打开blazored模态?

    我想测试是否可以用bunit打开模态 问题是 模式没有被渲染 如何用bunit打开blazored模态 我的测试组件中的模态创建 div style display flex div
  • 共享类与 swagger 生成的类

    我有一个包含三个项目的 asp net Blazor VS 解决方案 Shared ASP NET核心API Blazor 网络组件 我创建了一堆课程Shared项目和其他两个项目 参考了Shared项目 到目前为止一切都很好 然后我用了S
  • 可以在 Blazor 布局中使用 ViewComponent 吗?

    刚刚第一次尝试 Blazor 使用默认的 Blazor 模板 我添加了一个ViewComponent致电MainLayout cshtml await Component InvokeAsync HeaderComponent Intell

随机推荐

  • whitespaceAndNewlineCharacterSet() 中有哪些字符?

    我正在解析一些讨厌的文件 你知道 在一个文件中混合逗号 空格和制表符分隔符单线 然后通过文本编辑器运行它 该编辑器会在第 65 列用 CRLF 换行 啊 作为我在 Cocoa 中解析此内容的努力的一部分 我使用 Apple 的whitesp
  • 验证传递给 Mock 的参数是否按预期设置的正确方法

    如果您稍后验证调用了这些方法 是否可以在回调中进行断言 这是确保我的模拟获得传递给它的预期参数的首选方法 还是应该在回调中设置局部变量并在该实例上执行断言 我遇到的情况是 Presenter 类中有一些逻辑 它根据输入派生值并将它们传递给
  • 在 R 中使用 persp3D 函数时,如何向轴标签添加下标?

    I am trying to define my z axis label as R0 in plot3D below are my code I am using expression for my zlab but I get the
  • 错误:文件已加密或不是数据库

    我使用 PHP 创建了一个带有表的数据库 我通过以下方式做到了 从命令行执行 PHP 文件 php test php 后 我在目录中得到一个名为 test db 的新文件 这就是我想要的 然后 在命令行中 我输入 sqlite3 test
  • em 与 px...针对移动浏览器

    对于桌面浏览器 所有现代浏览器都使用缩放功能 因此我们可以使用 PX 但如果可以在移动设备上看到相同的站点 那么 px 不适合在移动浏览器中缩放 或者使用 px 对于移动浏览器也很好 即使我们不关心 IE 6 如果我们不为移动设备制作不同的
  • 如何在cassandra中构建范围查询?

    CREATE TABLE users userID uuid firstname text lastname text state text zip int age int PRIMARY KEY userID 我想构造以下查询 selec
  • 独立 Java SE 应用程序的项目目录结构是什么?

    独立 Java SE 基于命令行 应用程序的标准项目目录结构是什么 src文件夹将包含我的所有 java正确组织的包中的文件 除此之外我还有bin文件夹将包含我的 class files 我的项目中有属性文件和 XML 配置文件 我应该将它
  • 使用 .htaccess 通过 index.php 重新路由除一组特定请求之外的所有请求

    所以我只是继承了一个网站 我想做的第一件事是构建一个漂亮的小标准 简单易用的 CMS 允许使用任何 URL 创建页面 例如 whatever html 因此 如果用户点击 example com whatever html 它应该获取wha
  • Android Webview - 当用户滚动时检测标题名称

    我有这种模式的 html 文件 a a h2 First Heading h2 a Some Text goes here a br br a a h2 Second Heading h2 Some Text goes here br br
  • 如何在 C++ 中将成员变量指针转换为泛型类型

    我的应用程序中有与此类似的代码 class A public int b class C public int d void DoThings void arg1 MYSTERYTYPE arg2 A obj a C obj c DoThi
  • 如何从 R 调用 Fortran 程序

    我对 Fortran 完全陌生 但对 R 很熟悉 我得到了一个巨大的 Fortran 程序 其中包含大约 30 个子例程和大约 15 个函数以及许多其他代码行 有人告诉我需要从R中调用Fortran程序 我一直在网上寻找方法 在 R 和 F
  • 如何使用 SBCL 正确保存 Common Lisp 图像?

    如果我想创建我的程序的 Lisp 映像 我该如何正确地做到这一点 有什么先决条件吗 它与 QUICKLISP 配合得很好吗 现在 如果我启动 SBCL 仅预加载 QUICKLISP 并保存图像 save lisp and die core
  • 如何用Java解析ini文件? [复制]

    这个问题在这里已经有答案了 这是一个示例 ini 文件 link 1 alias My Link 1 link https www yandex ru link 2 alias My Link 2 link https mail ru li
  • Python中的变量插值[重复]

    这个问题在这里已经有答案了 可能的重复 在Python中打印变量的非Pythonic方式 https stackoverflow com questions 3534803 unpythonic way of printing variab
  • kafka 是否有默认的 Web UI [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我有几个关于卡夫卡的问题 1 Kafka 有默认的 Web UI 吗 2 我们如何优雅地关闭独立的kafka服务器 kafka控制台
  • 如何在悬停图像时向下滚动?

    我想当悬停图像时 它会向下滚动到图像的末尾 我有两个问题 当用户将鼠标悬停在图像上时如何滚动到图像的末尾 目前 我开始将鼠标悬停在图像上 它没有滚动到图像的末尾 如何控制鼠标悬停在图像上时滚动的速度 My code body margin
  • 用户未定义:Nodejs/Express + Passport

    我的问题非常类似于这个问题 https stackoverflow com questions 16434893 node express passport req user undefined然而答案似乎对我不起作用 我看到用户也从未选择
  • ASC2.0 和帧元标记

    显然 新的 ActionScript Compiler 2 0 不再支持旧的 frame 元标记 该元标记允许您将预加载器添加到纯 ActionScript 项目中 我已经验证了这个 IntelliJ 切换 首选 ActionScript
  • Eclipse DDMS 窗口不显示任何内容 +android

    在模拟器中运行我的应用程序时 我的 Eclipse DDms 窗口未显示任何内容 空 logcat 空文件浏览 等 有时 如果我重新启动 Eclipse 它会起作用 但并非总是如此 为什么要这样挂 即使我多次遇到同样的问题 我用来做的是转到
  • Blazor Timer 调用异步 API 任务来更新 UI

    我正在 Blazor 服务器端页面中设置计时器 目标是每 x 秒调用一次 API 并根据返回值更新 UI 我得到这个代码 private string Time get set protected override void OnIniti