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.

ServerManagement/Components/Controls/CityComponent.razor

@@ -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);
+  }
+}

ServerManagement/Components/Controls/CityListComponent.razor

@@ -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);
+  }
+}

ServerManagement/Components/Pages/Servers.razor

@@ -4,24 +4,7 @@
 <h3>Servers</h3>
 <br/>
 <br/>
-
+<CityListComponent SelectCityCallBack="HandleCitySelection"></CityListComponent>
-<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>
-
 <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;
   }
 }