Блог

Главная - Вопросы по программированию - Попытка извлечь элементы из списка и отобразить в компоненте Blazor razor

Попытка извлечь элементы из списка и отобразить в компоненте Blazor razor

#c# #blazor-server-side

#c# #blazor-на стороне сервера

Вопрос:

Я новичок в Blazor Server, исходя из фона в ASP.NET Веб-формы. У меня есть база данных, в которой хранятся вопросы и ответы для теста безопасности сотрудников, и я пытаюсь программно отобразить тестовые вопросы в разделе HTML моей страницы. При отладке я получаю ошибку Index Out of Range.

Связанный код:

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

Когда я отлаживаю testquestion, он отображает данные правильно, как показано на рисунке:

Отладка

Когда я пытаюсь отобразить элемент по индексу, основанному на нуле, я получаю индекс вне диапазона, хотя Intellisense не жалуется на мой код:

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

Очевидно, что я что-то упускаю, но я снова изучаю Blazor. Любая помощь приветствуется!

Комментарии:

1. Похоже, html отображается до вызова или возврата OnInitializedAsync, после чего testQuestion по-прежнему имеет значение null. Остерегайтесь этого, и это должно сработать.

2. В то же время на этой странице предлагается отложить рендеринг до тех пор, пока не будет ожидаться задача OnInitializedAsync …

3. Спасибо @jeroenh! Это правильно

Ответ №1:

Когда ваша страница blazor будет отображаться в первый раз, она еще не ожидает вашей асинхронной операции, она будет повторно отображаться после завершения этой операции. Это означает, что при первом рендеринге ваш testquestion будет пустым — вот почему у вас индекс вне диапазона, поэтому вам нужно его обработать, скажем, например, «если тестовый вопрос пуст — отобразите загрузку»

Ответ №2:

Спасибо @Nikita! Это было идеально!

Я завернул форму редактирования в if /else следующим образом:

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