Webframeworkk/ASP.NET Core/Tag-Helfer

Dieses Tutorial führt dich durch die Konzepte von Tag Helpern in ASP.NET Core MVC und zeigt dir, wie du sie effektiv in einer CRUD-Anwendung (Create, Read, Update, Delete) einsetzt.

1. Einführung in Tag Helper

Tag Helper sind C#-Klassen, die es ermöglichen, HTML-Elemente auf der Serverseite mit Logik zu erweitern. Sie sehen aus wie Standard-HTML-Tags, werden aber von der Razor-Engine verarbeitet.

Vorteile von Tag Helpern

• HTML-freundliche Syntax: Sie lassen sich nahtlos in den HTML-Code integrieren.
• Starke Typisierung: Bietet IntelliSense-Unterstützung und Fehlerprüfung zur Kompilierzeit.
• Wiederverwendbarkeit: Einmal erstellt, können sie projektübergreifend genutzt werden.
• Sicherheit: Automatische Generierung von Anti-Forgery-Token in Formularen.

2. Wichtige Tag Helper im Detail

Anchor Tag Helper (<a>)

Erzeugt Links unter Berücksichtigung des Routings.

<a asp-controller="Home" asp-action="Index">Home</a>
<!-- Generiert: <a href="/Home/Index">Home</a> -->

Form Tag Helper (<form>)

Erstellt ein Formular und fügt automatisch Sicherheitsmerkmale hinzu.

<form asp-controller="Products" asp-action="Create" method="post">
    <!-- Felder hier -->
&lt;/form&gt;

Input Tag Helper (<input>)

Bindet ein Eingabefeld direkt an eine Modell-Eigenschaft (asp-for).

<input asp-for="ProductName" class="form-control" />

Vorteil: Setzt automatisch den richtigen type (z.B. email oder password) basierend auf dem Datentyp im Modell.

Select Tag Helper (<select>)

Generiert Dropdown-Listen.

<select asp-for="CategoryId" asp-items="Model.Categories"></select>

3. CRUD-Operationen umsetzen

Ein typisches CRUD-Szenario umfasst einen Controller (PersonsController) und die dazugehörigen Views.

A. Index (Read)

Controller (GET): Ruft die Liste der Personen ab, filtert und sortiert diese optional und gibt sie an die View zurück.

public IActionResult Index(string searchBy, string searchString) {
    var persons = _personsService.GetFilteredPersons(searchBy, searchString);
    return View(persons);
}

View: Zeigt eine Tabelle an und nutzt den Anchor Tag Helper für Links zu Details, Edit oder Delete.

<a asp-action="Edit" asp-route-id="@item.Id">Bearbeiten</a>

B. Create (Erstellen)

Controller:

• GET: Zeigt das leere Formular an.
• POST: Empfängt die Daten, validiert das ModelState und speichert bei Erfolg.

[HttpPost]
public IActionResult Create(PersonAddRequest personRequest) {
    if (!ModelState.IsValid) return View(personRequest);
    _personsService.AddPerson(personRequest);
    return RedirectToAction("Index");
}

C. Edit (Bearbeiten)

Ähnlich wie Create, benötigt aber zusätzlich die ID im GET-Aufruf, um die bestehenden Daten zu laden.

D. Delete (Löschen)

Wichtig: Löschvorgänge sollten aus Sicherheitsgründen immer über einen POST-Request erfolgen, nachdem eine Bestätigungsseite (GET) angezeigt wurde.

4. Validierung & Formular-Submission

ASP.NET Core bietet eine integrierte Validierungskette:

1. Client-Side Validation: JavaScript (jQuery) prüft die Felder sofort (spart Server-Ressourcen).
2. Model Binding: Daten aus dem Formular werden in ein C#-Objekt überführt.
3. Model Validation: Serverseitige Prüfung der Data Annotations (z.B. [Required]).

Anzeige von Fehlern in der View

<div asp-validation-summary="All" class="text-danger"></div>
<span asp-validation-for="ProductName" class="text-danger"></span>