尝试从 List<model> 中提取元素并在 Blazor razor 组件中显示答案

【问题标题】：Trying to extract elements from a List<model> and display in Blazor razor component尝试从 List<model> 中提取元素并在 Blazor razor 组件中显示
【发布时间】：2020-11-06 21:59:18
【问题描述】：

我是 Blazor Server 的新手，具有 ASP.NET Webforms 的背景。我有一个存储员工安全测试问题和答案的数据库，我试图在我页面的 HTML 部分中以编程方式显示测试问题。调试时，我得到一个 Index Out of Range 错误。

相关代码：

@code {
private List<IForkLiftPerfTestContentModel> testquestion = new List<IForkLiftPerfTestContentModel>();
protected override async Task OnInitializedAsync()
{
    testquestion = await testService.GetTestQuestions();
}

当我调试 testquestion 时，它会正确显示数据，如下所示：

当我尝试按从零开始的索引显示元素时，我得到 Index out of Range，尽管 Intellisense 没有抱怨我的代码：

<td>
   @testquestion[0].Topic
</td>

显然我错过了一些东西，但我又在学习 Blazor。任何帮助表示赞赏！

【问题讨论】：

看起来 html 是在调用或返回 OnInitializedAsync 之前呈现的，此时 testQuestion 仍然为空。提防这种情况，它应该可以工作。
同时this page建议渲染应该推迟到等待OnInitializedAsync任务之后...
谢谢@jeroenh！没错

标签： c# blazor-server-side

【解决方案1】：

当您的 blazor 页面首次呈现时，它还没有等待您的异步操作，一旦该操作完成，它将重新呈现。第一次渲染时的含义 testquestion 将为空 - 这就是索引超出范围的原因，因此您需要处理它，例如“如果 testquestion 为空 - 显示加载”

【讨论】：

【解决方案2】：

感谢@Nikita！太完美了！

我将编辑表单包装在 if/else 中，如下所示：

@if (testquestion.Count == 0)
{
<h4>Test Loading...</h4>
}
else
{ <Editform>.....</EditForm>

【讨论】：