kevin/BlazorDeepDive
1
0
Fork 0
Code

Move city into its own component and use EventCallback to bubble events when a city is clicked to be handled by the parents of the component.

Browse Source
This commit is contained in:
Kevin Matsubara 2025-03-27 12:05:31 +01:00
parent 60aa4f9c46
commit af8d7a7698
4 changed files with 58 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
ServerManagement/Components/Controls/CityComponent.razor Normal file
View File

@ -0,0 +1,24 @@
<div class="col">
<div class="card @((city == selectedCity) ? "border-primary" : "")">
<img src=@($"/images/{@city}.png") class="card-img-top" alt="@city">
<div class="card-body @((city == selectedCity) ? "active" : "")">
<button class="btn btn-primary" @onclick="@(() => { SelectCity(city); })">@city</button>
</div>
</div>
</div>
@code {
[Parameter]
public string? city { get; set; } = "";
[Parameter]
public string? selectedCity { get; set; } = "Eindhoven";
[Parameter]
public EventCallback<string> SelectCityCallBack { get; set; }
private void SelectCity(string cityName)
{
SelectCityCallBack.InvokeAsync(cityName);
}
}

0
ServerManagement/Components/Pages/Servers.razor.css → ServerManagement/Components/Controls/CityComponent.razor.css
View File

30
ServerManagement/Components/Controls/CityListComponent.razor Normal file
View File

@ -0,0 +1,30 @@
@if (cities != null && cities.Count > 0)
{
<div class="container-fluid text-center">
<div class="row">
@foreach(var city in cities)
{
<CityComponent
city="@city"
selectedCity="@this.selectedCity"
SelectCityCallBack="HandleCitySelection">
</CityComponent>
}
</div>
</div>
}
@code {
private string selectedCity = "Eindhoven";
private List<string> cities = ServersRepository.GetCities();
[Parameter]
public EventCallback<string> SelectCityCallBack { get; set; }
private void HandleCitySelection(string cityName)
{
this.selectedCity = cityName;
SelectCityCallBack.InvokeAsync(cityName);
}
}

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

@ -4,24 +4,7 @@
<h3>Servers</h3>
<br/>
<br/>
<div class="container-fluid text-center">
<div class="row">
@foreach(var city in cities)
{
<div class="col">
<div class="card @((city == selectedCity) ? "border-primary" : "")">
<img src=@($"/images/{@city}.png") class="card-img-top" alt="@city">
<div class="card-body @((city == selectedCity) ? "active" : "")">
<button class="btn btn-primary" @onclick="@(() => { SelectCity(city); })">@city</button>
</div>
</div>
</div>
}
</div>
</div>
<CityListComponent SelectCityCallBack="HandleCitySelection"></CityListComponent>
<br/>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search servers"
@ -36,7 +19,6 @@
<ServerListComponent CityName="@this.selectedCity"></ServerListComponent>
@code {
private List<string> cities = ServersRepository.GetCities();
private string selectedCity = "Eindhoven";
private string _serverFilter = "";
private string serverFilter {
@ -45,11 +27,11 @@
{
_serverFilter = value;
//this.servers = ServersRepository.SearchServers(_serverFilter);
this.selectedCity = string.Empty;
//this.selectedCity = string.Empty;
}
}
private void SelectCity(string cityName)
private void HandleCitySelection(string cityName)
{
this.selectedCity = cityName;
}
@ -57,6 +39,6 @@
private void HandleSearch()
{
//this.servers = ServersRepository.SearchServers(serverFilter);
this.selectedCity = string.Empty;
// this.selectedCity = string.Empty;
}
}