1
0

Use Cascading Parameter to provide server component with selected city parameter to set a background color.

This commit is contained in:
Kevin Matsubara 2025-03-28 12:20:07 +01:00
parent 21e24945fd
commit f24cc284f7
2 changed files with 30 additions and 6 deletions

View File

@ -4,7 +4,7 @@
@if (Server != null)
{
<li @key="Server.Id">
<li @key="Server.Id" style="background-color: @GetBackgroundColor();">
@Server.Name in @Server.City is
<span style="color:@(Server.IsOnline ? "green" : "red")">
@(Server.IsOnline ? "online" : "offline")
@ -51,6 +51,9 @@
[Parameter]
public Server? Server { get; set; }
[CascadingParameter(Name="SelectedCity")]
public string? SelectedCity { get; set; }
private void DeleteServer(int serverId)
{
if (serverId > 0)
@ -59,4 +62,24 @@
NavigationManager.Refresh(forceReload: true);
}
}
private string GetBackgroundColor()
{
if (SelectedCity != null) {
switch (this.SelectedCity)
{
case "Eindhoven": return "lightskyblue";
case "Helmond": return "lightcoral";
case "Oosterhout": return "lightgreen";
case "Roosendaal": return "lightsalmon";
case "Deurne": return "lightpink";
default:
return "white";
}
}
else
{
return "white";
}
}
}

View File

@ -11,11 +11,12 @@
<a href="@($"/servers/add")" class="btn btn-primary">Add</a>
<br/>
<ServerListComponent
CityName="@this.selectedCity"
SearchFilter="@this.searchFilter">
</ServerListComponent>
<CascadingValue Name="SelectedCity" Value="@selectedCity">
<ServerListComponent
CityName="@this.selectedCity"
SearchFilter="@this.searchFilter">
</ServerListComponent>
</CascadingValue>
@code {
private string selectedCity = "Eindhoven";