IRC Security

Microsoft MVC Anfänger Tutorial Deutsch

Date: []

Einführung in MVC

Was ist MVC?

MVC steht für Model-View-Controller. Es ist ein Designmuster, das verwendet wird, um Anwendungen übersichtlicher, modularer und wartungsfreundlicher zu gestalten. MVC teilt die Aufgaben einer Anwendung in drei Hauptkomponenten:

Warum ist MVC wichtig?

MVC hat mehrere Vorteile:

  1. Modularität: Jede Komponente hat eine klar definierte Aufgabe.
  2. Wartungsfreundlichkeit: Änderungen im View (Design) beeinflussen weder das Model noch den Controller.
  3. Erweiterbarkeit: Neue Funktionen können einfacher hinzugefügt werden.

Ein einfaches Beispiel

Stell Dir vor, Du erstellst eine Webseite, die eine Willkommensnachricht anzeigt. MVC würde das wie folgt organisieren:

  1. Model:
    Speichert die Nachricht, z. B. "Willkommen auf unserer Seite!".
  2. View:
    Zeigt die Nachricht im Browser an.
  3. Controller:
    Verbindet das Model mit dem View.

Code-Beispiel

Model: Message.cs


// Dieses Model speichert die Nachricht.
public class Message
{
    public string Text { get; set; } = "Willkommen auf unserer Seite!";
}

**Erklärung:**

public class Message: Definiert ein Datenmodell mit einer Eigenschaft.
public string Text { get; set; }: Die Nachricht, die gespeichert und angezeigt wird.
Controller: HomeController.cs

using Microsoft.AspNetCore.Mvc;

// Dieser Controller verbindet das Model mit dem View.
public class HomeController : Controller
{
    public IActionResult Index()
    {
        var message = new Message(); // Erstelle ein neues Model-Objekt.
        return View(message); // Übergib das Model an den View.
    }
}
Erklärung:

public class HomeController : Controller: Definiert einen Controller, der von der Basisklasse Controller erbt.
public IActionResult Index(): Diese Methode wird aufgerufen, wenn die Startseite aufgerufen wird.
return View(message): Übergibt das Model message an den View.
View: Index.cshtml
@model Message

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Lerne MVC für Anfänger">
    <meta name="keywords" content="MVC, Anfänger, Tutorial, ASP.NET Core">
    <meta name="author" content="Dein Name">
    <title>MVC Tutorial</title>
</head>
<body>
    <h1>@Model.Text</h1>
</body>
</html>

Erklärung:

@model Message: Bindet das Model an den View.
@Model.Text: Zeigt die Nachricht aus dem Model an.
FAQ
Was ist der Hauptvorteil von MVC?
MVC trennt die Logik (Model), die Darstellung (View) und die Steuerung (Controller), wodurch die Anwendung modular und wartungsfreundlich wird.

Kann ich MVC auch für kleinere Projekte verwenden?
Ja, besonders bei wachsenden Projekten hilft Dir MVC, den Überblick zu behalten.

Was passiert, wenn ich den Controller überspringe?
Ohne den Controller fehlt der Vermittler zwischen Model und View, was das Projekt unorganisiert macht.

# Razor – Die View-Komponente in MVC

## Was ist Razor?

Razor ist die **Template-Engine** von ASP.NET Core, die HTML und C# kombiniert, um dynamische Webinhalte zu erstellen. Mit Razor kannst Du Daten aus Deinem Model in die View einbinden und dynamisches HTML generieren.

---

## Vorteile von Razor

- **Einfach zu lernen**: Die Syntax ist intuitiv und ähnelt C#.
- **Effizient**: Erzeugt nur das HTML, das benötigt wird.
- **Flexibel**: Ermöglicht Bedingungslogik, Schleifen und mehr direkt in der View.

---

## Grundlegende Razor-Syntax

- **Serverseitiger Code**: Wird mit `@` eingeleitet.
- **Kommentare**: Razor-Kommentare beginnen mit `@*` und enden mit `*@`.
- **Bedingungen und Schleifen**: `@if`, `@for`, `@foreach` usw. können verwendet werden.

---

## Code-Beispiel: Dynamische Anzeige einer Begrüßungsnachricht

### Datei: `Message.cs` (Model)
```csharp
// Model zur Speicherung der Begrüßungsnachricht
public class Message
{
    public string Text { get; set; } = "Willkommen auf unserer Webseite!";
}

Datei: HomeController.cs (Controller)

    using Microsoft.AspNetCore.Mvc;

// Controller, um das Model an die View zu übergeben
public class HomeController : Controller
{
    public IActionResult Index()
    {
        var message = new Message(); // Model erstellen
        return View(message); // Model an View weitergeben
    }
}

Datei: Index.cshtml (View)

@model Message <!-- Bindet das Model an die View -->

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Lerne Razor-Syntax">
    <meta name="keywords" content="Razor, MVC, ASP.NET Core, Anfänger">
    <title>Razor Tutorial</title>
</head>
<body>
    <h1>@Model.Text</h1> <!-- Zeigt die Nachricht an -->

    <!-- Dynamische Begrüßung basierend auf der Uhrzeit -->
    @if (DateTime.Now.Hour < 12)
    {
        <p>Guten Morgen!</p>
    }
    else if (DateTime.Now.Hour < 18)
    {
        <p>Guten Tag!</p>
    }
    else
    {
        <p>Guten Abend!</p>
    }

    <!-- Schleifen: Liste von Namen -->
    <ul>
        @foreach (var name in new[] { "Dennis", "Sarah", "Max" })
        {
            <li>@name</li>
        }
    </ul>
</body>
</html>

FAQ
1. Was ist Razor?
Razor ist die Template-Engine von ASP.NET Core, die HTML und C# kombiniert, um dynamische Inhalte zu erstellen.

2. Woran erkenne ich Razor-Syntax?
Razor-Syntax wird immer mit @ eingeleitet.

3. Kann ich Razor auch ohne Controller verwenden?
Ja, Razor funktioniert auch mit statischen Dateien oder direkt mit Daten im View. Ohne Controller verlierst Du jedoch die Trennung der Logik.

4. Wie kommentiere ich in Razor?
Mit @* Kommentar *@.

# Routing – Die Steuerung des Datenflusses

## Was ist Routing?

Routing in ASP.NET Core definiert, **welcher Controller und welche Aktion aufgerufen werden**, wenn ein Benutzer eine bestimmte URL besucht. Es ist das Rückgrat einer MVC-Anwendung, das sicherstellt, dass Benutzeranfragen an die richtigen Ressourcen weitergeleitet werden.

---

## Aufbau eines Routenmusters

Ein Routenmuster ist eine Zeichenkette, die Platzhalter für URL-Parameter enthält. Standardmäßig sieht ein Routenmuster in ASP.NET Core so aus:

```plaintext
{controller=Home}/{action=Index}/{id?}

**Erklärung:**
controller: Gibt den Namen des Controllers an, z. B. HomeController.
action: Gibt die Methode an, die im Controller aufgerufen wird, z. B. Index.
id?: Ein optionaler Parameter.

Code-Beispiel: Routing in Aktion
Datei: Program.cs
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

// Standardroute definieren
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

**Erklärung:**
pattern: Das Routenmuster.
{controller=Home}: Wenn kein Controller angegeben ist, wird HomeController verwendet.
{action=Index}: Wenn keine Aktion angegeben ist, wird die Index-Methode aufgerufen.
{id?}: Der id-Parameter ist optional.

##Datei: HomeController.cs ## 

URLs und Ergebnisse
http://localhost/: Zeigt die Startseite an (Controller: Home, Aktion: Index).
http://localhost/Home/Details/5: Zeigt die Details von Artikel 5 an.

FAQ
<section> <h2>Häufig gestellte Fragen (FAQ)</h2> <details> <summary>1. Was passiert, wenn kein Controller oder keine Aktion angegeben wird?</summary> <p>Die Standardwerte aus dem Routenmuster greifen. Zum Beispiel wird der <code>HomeController</code> und dessen <code>Index</code>-Methode aufgerufen.</p> </details> <details> <summary>2. Kann ich benutzerdefinierte Routen hinzufügen?</summary> <p>Ja, Du kannst beliebige Routen in <code>Program.cs</code> oder über Attribut-Routing im Controller definieren.</p> </details> <details> <summary>3. Was ist Attribut-Routing?</summary> <p>Attribut-Routing erlaubt es, Routen direkt in der Controller- oder Aktionsmethode zu definieren, z. B. mit <code>[Route("blog/{id}")]</code>.</p> </details> <details> <summary>4. Was bedeutet der Parameter <code>id?</code>?</summary> <p>Das Fragezeichen (<code>?</code>) macht den Parameter optional. Ohne diesen Parameter tritt kein Fehler auf.</p> </details> </section>