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
Javafx intersec funktioniert nicht?
class GameWindow {
    int circleX = 0;
    int circleY = 0;
    int maxX = 500;
    int maxY = 500;
    Circle circle,circlerand;
    HBox root;
    public void fenster()
    {
        figure();
        Stage stage = new Stage();
        root = new HBox();
        create();
        if(circle.getBoundsInParent().intersects(circlerand.getBoundsInParent())){
            System.out.println("circle x =" + circle.getCenterX() + " circlrand x =" + circlerand.getCenterX());
            System.out.println("GameWindow.fenster() getroffen");
            root.getChildren().remove(circlerand);
            create();
        }
        
        
        Scene scene = new Scene(root,maxX, maxY);
        scene.setOnKeyPressed((KeyEvent event) -> {
            switch (event.getCode()) {
                case UP -> {
                    if(circleY >= 2)
                    {
                        circleY -= 1;
                        circle.setTranslateY(circleY);
                        System.out.println("circle Y =" + circleY);
                        
                    }
                }
                case DOWN -> {
                    if(circleY <= (maxY - 42)){
                        circleY += 1;
                    circle.setTranslateY(circleY);
                    System.out.println("circle Y =" + circleY);
                    }
                    
                }
                case LEFT -> {
                    if(circleX >= 0){
                        circleX -= 1;
                        circle.setTranslateX(circleX);
                        System.out.println("circle x = " + circleX);
                    }
                }
                case RIGHT -> {
                    if(circleX <= maxX - 30){
                        circleX += 1;
                        circle.setTranslateX(circleX);
                        System.out.println("circle x =" + circleX);
                        
                    }
                }
                case SHIFT -> {
                System.out.println("circlerand x =" + circlerand.getCenterX() + " y=" + circlerand.getCenterY());
                    System.out.println("circle x = " + circle.getCenterX() + " y = " + circle.getCenterY());
                    
                       
                }
            }
        });
        
        
        
        root.getChildren().addAll(circle);
        stage.setScene(scene);
        stage.show();
    }
    
    private void figure(){
        circle = new Circle(circleX,circleY,15);
          
    }
    
        private void create(){
            Random rand = new Random();
            int x = rand.nextInt(450);
            int y = rand.nextInt(450);
            circlerand = new Circle(x,y,10);
            circlerand.setTranslateX(x);
            circlerand.setTranslateY(y);
            System.out.println("circlerand x =" + circlerand.getCenterX() + " y=" + circlerand.getCenterY());                    
            root.getChildren().add(circlerand);
            
            
        }
    
}

Moin, ich möchte abfragen ob 2 Kreise kollidieren jedoch funktioniert es nicht. Jemand ne Idee woran es liegt?

Java, 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
Wie mache ich eine ziemlich spezielle Linux Distro?

Es wird vielleicht etwas länger werden, aber das sollte nicht so kompliziert sein.

Also, ich möchte aus meinem Raspberry Pi meine eigene Spielekonsole machen. Und ich meine nicht einfach: RetroPie installieren oder sowas. Ich möchte nicht, das meine Konsole einfach nur ein Emulator ist.

Erstmal: Warum möchte ich das machen? - Weil ich da Lust drauf habe. Ich habe diese Idee seit Monaten in meinem Kopf, und werde sie nicht los, bis ich es endlich gemacht habe.

Also, ich möchte meine eigene Linux-Distro machen, für meine eigene Konsole (Der Raspberry Pi, wo ich die Distro drauflade). Warum Linux-Distro? Weil ein komplett eigenes Betriebssystem quasi unmöglich ist.

Was soll die Distro können?

Sie soll ziemlich ähnlich einer PS1 sein (Einziges Beispiel von mir, da ich sonst nicht so wirklich eine vergleichbare Konsole kenne.) Also: Kein Desktop, kein Dateimanager, kein Texteditor, nichts. Nur eine einfache Instanz von cmd (Ich weiß nicht wie dass in Linux heißt, ich benutze hauptsächlich Windows.) welches aber nur Python installiert hat, und bei jedem Start einfach nur ein Python Script startet.

Warum Python? - Ich habe meine eigene Programmiersprache in Python geschrieben, auf die meine Spiele basieren sollen. Meine Programmiersprache ist nicht Grafisch oder so, sondern einfach nur Konsole, wie JavaScript (Standalone). Ich weiß, das ist nicht gerade "spiel-isch" um Spiele zu erstellen, aber Hey! Ich will es trotzdem.

Also, Ich drücke den An-Knopf auf meinem Pi, ein Startup-Jingle wird abgespielt mit dem Logo, python startet im Hintergrund shell.py (Die shell für meine Programmiersprache) welche direkt ein Skript ausführt (home.tlps, ausgeführt durch start("home.tlps"), welches ich direkt in der shell.py für die Konsole implementieren werde.) und dann einfach meine Programmiersprachen-Shell anzeigt, mit dem home.tlps Programm welches ich bereits geschrieben habe, und halt Spiele vom Internen Speicher anzeigt, abspielt, etc. Das ist alles in meiner Sprache schon erstellt worden.

Also Kurz: Eine Linux-Distro, welche beim Start nicht diesen ganzen Mount-Gibberisch und so anzeigt, kurz das Logo einblendet, den Startup-Jingle abspielt, cmd in Vollbild startet, und automatisch ein Python-Skript ausführt.

Eigentlich ganz einfach oder? Nur wie mache ich die Distro?

Betriebssystem, Linux, Konsolen, Distribution, Programmiersprache, Linux-Distribution
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

Meistgelesene Beiträge zum Thema Programmiersprache