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.

HTML, programmieren, C Sharp, Programmiersprache
Welche Programmiersprache nach javascript?

ich hab eine lange zeit nichts anderes als javascript gemacht darunter ist auch Typescript und react und vieles mehr und klar man kann noch mehr lernen. Php kann ich ausreichend fürs backend.

aber immer auf den Browser beschränkt zu sein und websites macht auf Dauer keinen spass. Ich will auch in der lage sein desktop programme zu schreiben.
electron js kann das aber ist auch nicht das beste was man nutzen kann und sobalds aufwendiger wird hat man Probleme und riesige Dateien. Man lernt auch nichts neues dadurch das ist nichts für mich.

c# c++ c java oder rust hatte ich im kopf.

(python syntax gefällt mir auch nicht , mir geht es auch ums lernen. Nicht nur mit pip install irgendwas nutzen von jemand anderes. Am ende hast du keine ahnung von der programmierung)

aber wie weiss ich welches der oben genannten Sprachen eher was für mich ist.

Java ist Typescript sehr ähnlich, läuft überall und ich könnte da schnell zurechtkommen aber dafür ist es deutlich langsamer als C++ und nicht so mächtig.

Mit c++ lernst du auch viel und wird oft in Unis oder Schulen gelehrt, hätte damit einen vorteil wenn ich es schon gut kann.
Rust hat einen kleinen hype und viele meinen es wird in zukunft wichtiger werden = mehr jobs.

c# ist soweit ich weiss
nur für windows Anwendungen gut, mit den anderen sprachen könnte man auch in zukunft was für linux machen wenn man lust drauf hat.

ich seh da keinen grossartigen vorteil zu java oder c++ in der schnelligkeit.

Computer, Microsoft, App, IT, Webseite, Java, JavaScript, compiler, Cplusplus, C Sharp, CPP, Informatik, Oracle, Programmiersprache, Python, sdk, C (Programmiersprache), React, Angular
Hilfe für c# code mit HTML &CSS in Blazor?

Hallo, ich möchte eine WetterApp programmieren mit Blazor und sitze jetzt schon 4 Tage an dem Problem mit C#, da ich keine Ahnung habe wo ich anfangen soll und generell neu bin und nicht ganz vertraut bin. Ich habe die WetterApp mit JavaScript programmiert, allerdings soll ich C# verwenden und nicht JavaScript deshalb brauch ich eure Hilfe! Kann mir wer dabei helfen einen C# Code zu schreiben, welcher dasselbe macht wie mein javaScript-Code:

1. Ich möchte das mein "SeachrIcon-Button" aus einem HTML-Code als Suchbutton fungieren kann, womit ich die einzelnen Städte suchen kann, damit mir dabei dann die Wetterdaten angezeigt werden.

2.

Ich möchte, dass dann die Bilder der zu den jeweiligen Wetter vorkommnissen angepasst werden, also die Wetter Daten sollen in der Console angezeigt werden aber nicht auf dem Display

Hier mein Html Code:

<body class="backgroundimage">


  <div class="card">
      <div class="search">
          <button><img src="/images/SuchIcon.png"></button>


              <input type="text" placeholder="Search" spellcheck="false" />
        
      
      </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>

Im unteren Kommentar werd ich die restlichen Codes posten


HTML, CSS, JavaScript, C Sharp

Meistgelesene Beiträge zum Thema C Sharp