登录 Blazor 服务器应用程序时如何显示加载图标？

Posted 2023-03-27

【中文标题】登录 Blazor 服务器应用程序时如何显示加载图标？

【英文标题】：How to display a loading icon when logging into Blazor server application?

【发布时间】：2020-12-06 18:38:25

【问题描述】：

我有一个带有 Razor 页面登录表单的 Blazor 服务器应用程序（很棒）（我的后背非常痛苦）。

提交登录表单后，在 PageModel 类中，我有一个 OnPostAsync 方法，它调用我的 API 登录并获取身份验证令牌，但显然这有一个延迟因素（在我现在的情况）。事实上，我的页面在按下登录后几乎没有显示任何迹象表明它正在做任何事情，而正在联系 API 时页面就在那里，就像提交按钮甚至没有被按下一样，这对用户来说显然是非常糟糕的，因为他们要做的第一件事就是捣碎提交按钮，直到他们得到视觉响应（我可能会公平地说）。

究竟如何在 Razor 页面中执行此操作？我试过this 和this，都没有成功。目前我并不特别关心展示或完成的内容，我只是希望它做一些事情。对我来说完美的解决方案是禁用表单和/或覆盖某些内容以表明它很忙，但我会在某处使用基本的“正在加载...”消息。

有什么办法吗？

【参考方案1】：

似乎根本不可能在 Blazor 服务器应用程序中处理 Razor 页面，因为没有任何东西可以更新 UI，它不像 Blazor 组件那样在服务器之间保持活动的 SignalR 连接和客户。在登录页面的情况下，页面被提供给客户端，然后连接被切断，因此发生的下一个操作是页面将其持有的详细信息提交给服务器，并期望登录结果作为响应。

javascript 应该可以工作，但我不知道为什么没有，我添加了一个脚本来在提交表单时更改一些 UI 元素，但似乎 PageModel 中的 OnPostAsync 方法是首先被调用并且脚本是否正在运行，它只是没有更新 UI，我猜是因为它在做任何事情之前等待响应。另一种方法是从PageModel 中删除登录代码并改用AJAX 调用，但我并不想这样做。

我添加了ILoginHandlerService，以及StoreLogin 和RetrieveLogin。在实现中，它接收包含凭据的登录对象，对它们进行加密并将它们存储在私有变量中。此服务作为单例添加到应用程序启动类中。登录页面现在使用提交的详细信息调用StoreLogin 方法，并重定向到新的“登录”页面。这个新页面有一个“表单”，其中只有一个包含请稍候消息的文本元素，以及一个在加载时在表单上调用 Post 的脚本。

“登录”页面的OnPostAsync 是实际执行登录的内容。它调用注入的IAuthService 登录，而不向其传递任何详细信息。 IAuthService 实现本身（作为应用程序启动中的范围服务添加）被注入ILoginHandlerService，然后在内部调用该服务以提供存储的登录对象。存储的对象被解密、清空并返回到IAuthService，然后提交给我的API，然后用登录的用户令牌响应，返回到“登录”页面，然后调用@987654334 @，添加接收到的 API 令牌，并将用户重定向到主页，登录。

这对我来说似乎很令人费解，我不完全确定它是否正确。根据我对上述内容的了解，一旦从登录表单提交凭据，所有未来的凭据处理现在都应该在服务器端完成，并且永远不会返回给客户端？

【讨论】：

JavaScript 方法在原始问题中，即最后一段中的“this and this”。