Wieso geht mein C# Code nicht mit Blazor?
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.
2 Antworten
Das Problem ist, dass dein Button-Element nicht richtig geschrieben ist.
Richtige Schreibweise:
<button @onclick="CheckWeather">Check Weather</button>
Zudem kann es sein, dass der Http-Request an die API fehlschlägt.
Ich habe dafür mal deine Methode CheckWeather ein wenig überarbeitet.
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
{
var result = await client.GetAsync($"{apiUrl}{city}&appid={apiKey}");
var response = await result.Content.ReadFromJsonAsync<WeatherData>();
if(response == null)
{
Console.WriteLine("Keine Daten gefunden");
return;
};
weatherData = response;
}
catch (HttpRequestException e)
{
Console.WriteLine($"Fehler: {e.Message}");
}
}
}
Zudem solltest du hier nicht nur weatherData auf null prüfen, sondern auch die anderen Werte:
@if (weatherData != null)
{
if(weatherData.Main != null)
{
<p>Temperatur: @Math.Round(weatherData.Main.Temperature)°C</p>
}
.......
}
Wichtige Anmerkung noch:
Beachte, dass der JSON-Response von der API auch deiner WeatherData-Klasse entspricht.
"Nicht funktioniert" ist erstmal die bescheidenste Angabe für einen Fehler...
Bitte sagen, was der Ist-Zustand ist und was der Soll-Zustand ist und was du bis jetzt versucht hast.
Wird die Methode nicht ausgelöst? Dann versuch mal einen Breakpoint, ob es an der API des Wetterdienstes liegt.
Hallo, also der Soll-Zustand ist, dass ich in den "input" meine Stadt eingebe soll und auf den "button" klicken kann, damit diese dann gesucht wird und die jeweiligen Sachen angezeigt werden (Temp, WindSpeed, Humidity). Der Ist-Zustand ist, dass nichts davon passiert ich kann weder mit dem Button interagieren als auch werden mir die Sachen angezeigt, dass einzige was ich machen kann ist in den "Input" schreiben.
Hier sind Meldungen in der Konsole auf der Seite, aber ich weiß nicht ob es daran liegt weil ich mit denen nichts anfangen kann. Kannst du mir helfen?
Uncaught (in promise) Error: Found malformed component comment at Blazor:{"sequence":1,"type":"server","prerenderId":"190387e53509492e86cea3d12393bd2a","descriptor":"CfDJ8KwfEBT2y81BhWzhX\u002Bcpjvg\u002B\u002BOYYTa82Ncq1ssTkohJId3igOnFGfDRAXHD20vfF48XNEnkduFzIF0Mk/k7AaWE9nWwSVa9oRdAhug5WmKP\u002BTfYUy1EuLs3NlGdOLjOImHVQ0/F/9Dqvc09bICJ6SS6MvSX9D28yV66QbXiyP4Ej8RtRB11OV7U\u002BLrCEwMscBSS7qw8\u002Bz05VJxAnfQU9dmcruTurlPdRbOIbKz\u002BHVdTg7uhkhySfXsgEzunqjoDuQ2amRNPM\u002BNrSVvCjqtT1bvCLJmHQMhFDrTzj2wT/4PYErxpLPK2\u002Bi97t2jie70FsyN1RitPjsnpI0qTWuDQk1tKBlmcbCZh86BpD6WN7P76M"}
at tr (blazor.server.js:1:128308)
at Zn (blazor.server.js:1:126531)
at Zn (blazor.server.js:1:126567)
at Zn (blazor.server.js:1:126567)
at blazor.server.js:1:131104
at blazor.server.js:1:131276
at ur (blazor.server.js:1:131280)
aspnetcore-browser-refresh.js:239 WebSocket connection to 'wss://localhost:44353/WetterAppupdate/' failed:
(anonymous) @ aspnetcore-browser-refresh.js:239