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
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
WetterApp mit HTML, Css und C# über Blazor Server App?

Hallo undzwar bin ich neu in C# und möchte über die Blazor Server App eine Wetter-App programmieren, allerdings fehlt mir dazu noch der Code, da ich nicht weiß wie ich anfangen soll. Ich möchte dass mein "SearchIcon" welcher in HTML hinterlegt ist als suchbutton fungiert, damit ich die Städte suchen kann und über API möchte ich, dass mir dann die jeweiligen Temperaturen angegeben werden. Kann mir wer helfen und gegebenenfalls einen Code dafür geben.

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: 22px; margin-right: -5px;"

        <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; 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>

hier mein Css code:

.backgroundimage {

  background-image: url('../images/sun_background.png');

  background-attachment: fixed;

  background-repeat: no-repeat;

  background-size: cover;

}

.cloud-background {

  background-image: url('../images/cloud.png');

  /* Füge hier die gewünschten Hintergrundbilderigenschaften hinzu */

}

.card {

  width: 90%;

  max-width: 470px;

  color: #fff;

  margin: 10px auto 0;

  border-radius: 20px;

   

   

}

.search{ 

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.search input{

  border: 0;

  outline: 0;

  background: #ebfffc;

  color: #555;

  padding: 10px 25px;

  height: 60px;

  border-radius: 30px;

  flex: 1;

  margin-right: 16px;

  font-size: 18px;

}

.search button{

  border: 0;

  outline: 0;

  background: #ebfffc;

  border-radius: 60%;

  width: 60px;

  height: 60px;

  cursor: pointer;

}

.weather-icon{

   

  margin-bottom: -30px;

}

.weather h1 {

  font-size: 80px;

  font-weight: 500;

  color: floralwhite;

}

.weather h2 {

  font-size: 40px;

  font-weight: 400;

  margin-top: -10px;

  color: floralwhite;

}

.details {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 20px;

  margin-top: 50px;

  

}

.col {

  display: flex;

  align-items: center;

  text-align: left;

  margin-top: 150px;

  

}

  .col img {

    width: 20px;

    margin-right: 20px;

    margin-bottom: 70px

  }

.humidity, .wind{

  font-size: 28px;

  margin-top: -6px;

  color: floralwhite;

}

.speed{

  font-weight: bold;

}

.temp {

  margin-bottom: 20px;

  display: flex;

  justify-content: center;

}

.search button img{

  width: 55%;

}

.center {

  display: flex;

  justify-content: center;

  

}

.top-left{

  display: flex;

  justify-content:left 

}

.top-left

{

  margin-left: 10px;

}

.margin-top{

  margin-top: 20px;

}

.hr1 {

  width: 390px;

  height: 2px;

  color: black;

}

.line{

  margin-bottom: -100px;

  margin-top: 10px;

}

.line1{

  margin-top: 30px;

  margin-bottom: -20px;

}

.line0{

  margin-top: 70px;

  margin-bottom: -90px;

  font-size: 14px;

  font-weight: bold;

  color: black;

}

.imageline {

  margin-top: 5px;

  margin-bottom: -90px;

   

}

.imagesMain {

  padding: 0;

  margin-left: auto;

  margin-right: auto;

  margin-top: 20px;

  text-align: center;

}

  .imagesMain img {

    height: 400px;

    width: 300px;

    vertical-align: middle;

  }

.title {

  display: inline-block;

  color: lightgray;

}

.margin-left{

  margin-left: 14px;

}

Internet, App, HTML, CSS, Code, Programmiersprache, Webentwicklung
Hilfe beim html/css code?

Habe folgendes Problem, ich möchte die Website so umändern das sie für jedes gerät abrufbar ist bzw. verschiedene Display Größen.

Das ganze soll mit Flexboxen gemacht werden aber bei mir will das nicht so, unten ist mein backup code.

html:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Fledermäuse</title>
    <link rel="stylesheet" href="formatieren.css">
  </head>
  <body>
    <header>
      <table>
        <tr>
          <td>
            <img src="bilder/Fledermaus_Logo.jpg" height="100" width="200" alt="Dieses Bild ist Nicht Verfügbar">
          </td>
          <td>
            <h1>Bat out of Hell</h1>
          </td>
        </tr>
      </table>
    </header>
    <nav>
        <p><a href="index.html" style="color: #b4b4b4">Start</a></p>
        <p><a href="verbreitung.html" style="color: #b4b4b4">Verbreitung</a></p>
        <p><a href="merkmale.html" style="color: #b4b4b4">Merkmale</a></p>


    </nav>
    <article>
      <h2><a href="https://de.wikipedia.org/wiki/Flederm%C3%A4use" style="color: #b4b4b4">Fledermäuse</a></h2>
      <p>
        Die <span class="fett">Fledermäuse</span> (Microchiroptera) sind eine
        <span class="magenta">Säugetiergruppe</span>, die zusammen mit den <span class="magenta">Flughunden</span> (Megachiroptera)
        die Ordnung der <span class="magenta">Fledertiere</span> (Chiroptera)
        bilden. Zu dieser Ordnung gehören die einzigen Säugetiere
        und neben den <span class="magenta">Vögeln</span> die einzigen <span class="magenta">Wirbeltiere</span>,
        die aktiv fliegen können. Weltweit gibt es rund 900 Fledermausarten.
      </p>
        Der Name bedeutet eigentlich „Flattermaus“
        (ahd. <span class="schräg">fledarmūs</span>, zu ahd. <span class="schräg">fledarōn</span> „flattern“)
    </article>
    <aside>
      <img src="bilder/Fledermaus_Skelett_Seite.jpg" width="200" alt="Dieses Bild ist Nicht Verfügbar">
    </aside>
    <footer>
      Der Inhalt dieser Webseite stammt von Wikipedia und ist vom Stand: 16. Dezember 2017, 7:25 Uhr.
    </footer>
  </body>
</html>

css:



header
{
  position: absolute		;
  top:      0px 			;
  left: 	0px				;
  width:    1200px			;
  height:   100px	 	   	;
  background-color: #3c3c3c	;
  font-family: Helvetica	;
  color: white 				;
}


nav
{
  position: absolute		;
  top: 	    100px			;
  left: 	0px		     	;
  width: 	200px			;
  height: 	550px		    ;
  background-color: #3c3c3c	;
  text-align: center 		;
  font-size: 25px			;
  font-family: Comic Sans MS ;
  color: white 				;
}


article
{
  position: absolute		;
  top: 		100px			;
  left: 	200px			;
  background-color: #616161	;
  overflow-y: scroll		;
  font-family: Arial		;
  color: white  			;
  font-size: 20px 			;
}


aside
{
  position: absolute		;
  top: 	    100px    		;
  left: 	1000px			;
  width: 	200px			;
  height: 	550px  			;
  background-color: #3c3c3c	;
}


footer
{
  position: absolute		;
  top: 		650px			;
  left: 	0px				;
  width: 	1200px			;
  height:   25px 			;
  background-color: black	;
  color: white 				;
}


.fett
{
	font-weight: bold;
}


.magenta
{
	text-decoration: underline;
	color: magenta;
}


.schräg
{
	font-style: oblique;
}
HTML, CSS, Programmiersprache
Clickfunnel: Wieso funktioniert nur jedes zweite JavaScript-Element?

Ich habe in meinem ClickFunnel vier JavaScript-Elemente. Sie sind nicht direkt hintereinander, aber genau gleich gecodet.

Es handelt sich dabei um Dropdown-Elemente.

Mein Problem ist, dass das erste und dritte Element problemlos funktioniert, aber das zweite und vierte nicht. Da kommt kein Dropdown, wenn ich darauf klicke, obwohl alle Elemente gleich gecodet sind.

Woran könnte das liegen? Stehen die einander vielleicht im Weg? Ich kann es auch leider nicht anders machen, da zwischen den Elementen Bilder sind, die dazu gehören.

Hier mein Code (HTML / JS) von einem Element:

<div class="all4">
  <div class="obj">
    <button class="Produkte" style="margin-right: 1vw;">Kompressor</button>
    <div class="panel">
      <p>
        Tankinhalt: 2 × 50 Liter</br>
        Energiequelle: Honda 4Takt GX200 bleifrei</br>
        Antrieb: Riemen</br>
        Atom. Standgas: Ja</br>
        Start: Zugseil</br>
        Abgabeleistung: 490 Liter Minute bei 12 bar</br>
        Abgabeleistung: 550 Liter Minute bei 6 bar</br>
        Max. Druck: 12 bar</br>
        Abmessungen: 95cm × 51cm × 85cm (ohne Transportgriffe)</br>
        Gewicht: ca. 75 Kg</br>
        Lärm: ca. 95 Db</br>
        Garantie: 1 Jahr</br>
      </p>
    </div>
  </div>
  <script>
    var acc = document.getElementsByClassName("Produkte");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;

        if (panel.style.display === "block") {
          panel.style.display = "none";
        }
        else {
          panel.style.display = "block";
        }
      });
    }
  </script>
HTML, CSS, JavaScript

Meistgelesene Fragen zum Thema HTML