Blazor отображать данные из базы данных - PullRequest
Новая
       16

Blazor отображать данные из базы данных

1 голос
/ 08 ноября 2019

Я создал страницу Blazor, которая просто отображает некоторые данные из базы данных.

Моя разметка выглядит следующим образом: 

@inject MyDataService service;

if(!MyData.Count() > 0) { <div>no data</div>}

else { //display data }

Мой код выглядит так: 

@ code {

       private List<MyData> MyData {get; set;} = new List<MyData>();

       protected override async Task OnInitializedAsync()
    { 
         MyData = MyDataService.GetData();          
    }
}

Это работает, но проблема в том, что:

Я вижу, что MyData отображается - затем он быстро переходит на "Нет данных" - затем снова я вижу MyData обработанным

Что я делаю неправильно?

1 Ответ

0 голосов
/ 08 ноября 2019

Я не могу точно сказать, почему мерцание ... Однако я могу указать на некоторые недостатки в вашем коде, особенно следующие:

  • это выражение !MyData.Count() > 0 не являетсядопустимо и должно вызвать ошибку компиляции. Это должно быть !(MyData.Count() > 0)

  • Вы не должны создавать экземпляр своего списка. Пусть он будет нулевым, и проверьте, является ли он пустым в вашем операторе if:

    @if(MyData == null) { <p><em>Loading...</em></p> }

  • Если вы не ожидаете асинхронного метода, такого как OnInitializedAsync, он будетработать синхронно.

Попробуйте этот код, он должен работать: 

@inject MyDataService service;

@if(MyData == null) 
{ 
   <p><em>Loading...</em></p>
}
else 
{ 
   //display data 
 }


@ code {

    // The initial value of the list is now null
       private List<MyData> MyData {get; set;} 

    protected override async Task OnInitializedAsync()
    { 
        // You've got to await the call to MyDataService because the
        // OnInitializedAsync is executed asyncronously. While 
        // this method is awaited, control is passed to the runtime, 
        // which continues in the component creation... Checking in 
        // the view part of your component the value of MyData, and 
        // as long as it is equal to null, the text "Loading data..." 
        // is displayed withing a p element. 
        // When MyDataService.GetData() **returns**, the runtime 
        // re-renders your component, this time the value of MyData is 
        // not null; the list has already been populated, and thus the 
        // else part of the if expression is executed, where you can 
        // iterate the list with the a foreach loop, and display your 
        // data in whatever manner you find fits.
         MyData = await MyDataService.GetData();          
    }
}

Надеюсь, это поможет ...

...