Hallo, ich programmiere momentan eine WetterApp mit Blazor zur Übung und habe einen C# Code geschrieben, allerdings funktioniert da nichts. Kann mir wer helfen?
Hier mein C# Code
@if (weatherData != null)
{
<h4>@weatherData.Name</h4>
<p>Temperatur: @Math.Round(weatherData.Main.Temperature)°C</p>
<p>Luftfreuchtigkeit: @weatherData.Main.Humidity%</p>
<p>Windgeschwindigkeit: @weatherData.Wind.Speed km/h</p>
<p>Wetter: @weatherData.Weather[0].Main</p>
}
@code{
private string city;
private WeatherData weatherData;
private async Task CheckWeather()
{
string apiKey = "6958878b02398eb62a27936168c23c6";
string apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";
using (HttpClient client = new HttpClient())
{
try
{
HttpResponseMessage response = await client.GetAsync($"{apiUrl}{city}&appid={apiKey}");
response.EnsureSuccessStatusCode();
string responseBody = await response.Content.ReadAsStringAsync();
weatherData = Newtonsoft.Json.JsonConvert.DeserializeObject<WeatherData>(responseBody);
}
catch (HttpRequestException e)
{
Console.WriteLine($"Fehler: {e.Message}");
}
}
}
public class WeatherData
{
public string Name{ get; set; }
public MainData Main { get; set; }
public WindData Wind { get; set; }
public WeatherCondition [] Weather { get; set; }
}
public class MainData
{
public double Temperature { get; set; }
public int Humidity { get; set; }
}
public class WindData
{
public double Speed { get; set; }
}
public class WeatherCondition
{
public string Main { get; set; }
}
}
Hier mein HTML Code:
<body class="backgroundimage">
<div class="card">
<div class="search">
<button @onclick="CheckWeather">
<img src="images/SuchIcon.png"/>
<input type="text" placeholder="Search" spellcheck="false" id="cityInput" @bind="city">
</div>
</div>
<div class="weather">
<div class="center margin-top">
<img src="images/image1.png" width="200" height="200" style="opacity: 1" class="weather-icon"/>
</div>
<div>
<h1 class="temp">22°c</h1>
</div>
<div class="center">
<h2 class="city center margin-top">New York</h2>
</div>
<hr class="hr1 line1"/>
<div id="imagesMain">
<img src="/images/image1.png" width="75" height="75" class="imageline "/>
<img src="/images/image1.png" width="75" height="75" class="imageline "/>
<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;"/>
<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 12px; margin-right: -10px;"/>
<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 2px; margin-right: -14px;"/>
</div>
<div>
<p style="color:black;" class="line0 title margin-left ">Monday</p>
<p style="color:black;" class="line0 title margin-left ">Tuesday</p>
<p style="color:black;" class="line0 title margin-left ">Wednesday</p>
<p style="color:black;" class="line0 title margin-left ">Thursday</p>
<p style="color: black;" class="line0 title margin-left ">Friday</p>
</div>
<hr class="hr1 line"/>
<div class="details">
<div class="col">
<img src="images/humidity.png"/>
<div>
<p class="speed">Humidity</p>
<p class="humidity">50%</p>
</div>
</div>
<div class="col">
<img src="images/wind.png"/>
<div>
<p class="speed">Wind Speed</p>
<p class="wind">15 km/h </p>
</div>
</div>
</div>
</div>
</body>
</html>
Ich verstehe nicht weshalb mein ClickEvent nicht funktioniert und die Wetterdaten nicht angezeigt werden.