kevin/BlazorDeepDive
1
0
Fork 0
Code

Replace foreach loop with Virtualize component.

Browse Source 
Improves performance greatly when lots of li elements are to be created. Note that every li should have the same height in pixels in order for the Virtualize component to work properly.
This commit is contained in:
Kevin Matsubara 2025-03-26 00:09:03 +01:00
parent ea04b947e8
commit 7159c8ffed
1 changed files with 2 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ServerManagement/Components/Pages/Servers.razor
View File

@ -36,8 +36,7 @@
<br/> <br/>
<ul> <ul>
@foreach(var server in servers) <Virtualize Items="this.servers" Context="server">
{
<li @key="server.Id"> <li @key="server.Id">
@server.Name in @server.City is @server.Name in @server.City is
<span style="color:@(server.IsOnline ? "green" : "red")"> <span style="color:@(server.IsOnline ? "green" : "red")">
@ -53,7 +52,7 @@
<button type="submit" class="btn btn-danger">Delete</button> <button type="submit" class="btn btn-danger">Delete</button>
</EditForm> </EditForm>
</li> </li>
} </Virtualize>
</ul> </ul>
@code { @code {