Reputation: 124
I'm practicing with Blazor. Now is the Virtualize turn. I copy an example and I modified it. When I try to use the Virtualize tag, working fine, but when I want to add a Placeholder tag, it doesn't work. Is there a general bug or that? Now I will publish the code:
amaurys.razor.cs
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web.Virtualization;
namespace BlazorApp1.Pages
{
public partial class Amaurys
{
private List<Car> cars;
public EventCallback LoadCarsEvent { get; set; }
public void OnButtonAClicked()
{
LoadCarsEvent.InvokeAsync();
}
public void AnswerASelected()
{
MakeTenThousandCars();
}
protected override async Task OnInitializedAsync()
{
cars = await MakeTenThousandCars();
}
private async Task<List<Car>> MakeTenThousandCars()
{
List<Car> myCarList = new List<Car>();
for (int i = 0; i < 10000; i++)
{
var car = new Car()
{
Id = Guid.NewGuid(),
Name = $"Car {i}",
Cost = i * 100
};
myCarList.Add(car);
}
return await Task.FromResult(myCarList);
}
private async ValueTask<ItemsProviderResult<Car>> LoadCars(ItemsProviderRequest request)
{
var cars = await MakeTenThousandCars();
int milliseconds = 2000;
//Thread.Sleep(milliseconds);
return new ItemsProviderResult<Car>(cars.Skip(request.StartIndex).Take(request.Count), cars.Count());
}
public class Car
{
public Guid Id { get; set; }
public string Name { get; set; }
public int Cost { get; set; }
}
}
}
amaurys.razor
@page "/amaurys"
@inject HttpClient Http
<PageTitle>Virtualize Example</PageTitle>
<h1>Virtualize Example</h1>
<p>Parapipo.</p>
<button @onclick="@OnButtonAClicked" />
@if(LoadCars == null)
{
<tr class="amarillo">
<td>
Loading item...
</td>
</tr>
}
else
{
<Virtualize Context="car" ItemsProvider="@LoadCars">
<ItemContent>
<tr class="test">
<td>@car.Id</td>
<td>@car.Name</td>
<td>@car.Cost</td>
</tr>
</ItemContent>
<Placeholder>
<tr class="amarillo">
<td>
Loading item...
</td>
</tr>
</Placeholder>
</Virtualize>
}
<style>
.test {
background-color:red;
}
.amarillo {
background-color: yellow;
}
</style>
If you have any question just let me now. TIA! :)
Upvotes: 1
Views: 528
Reputation: 11896
I think you should use await Task.Delay()
instead of Thread.Sleep()
to simulate loading data
in this method:
private async ValueTask<ItemsProviderResult<Car>> LoadCars(ItemsProviderRequest request)
{
var cars = await MakeTenThousandCars();
int milliseconds = 2000;
//Thread.Sleep(milliseconds);
return new ItemsProviderResult<Car>(cars.Skip(request.StartIndex).Take(request.Count), cars.Count());
}
Now I could see the placeholder:
Upvotes: 3