Webframeworkk/ASP.NET Core/Tag-Helfer

Aus Dokument
Zur Navigation springen Zur Suche springen

Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).

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. 

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

Form Tag Helper (<form>)

Erstellt ein Formular und fügt automatisch Sicherheitsmerkmale hinzu. 

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

Input Tag Helper (<input>)

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

&lt;input asp-for="ProductName" class="form-control" /&gt;

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

Select Tag Helper (<select>)

Generiert Dropdown-Listen. 

&lt;select asp-for="CategoryId" asp-items="Model.Categories"&gt;&lt;/select&gt;

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. 

&lt;a asp-action="Edit" asp-route-id="@item.Id"&gt;Bearbeiten&lt;/a&gt;

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

&lt;div asp-validation-summary="All" class="text-danger"&gt;&lt;/div&gt;
&lt;span asp-validation-for="ProductName" class="text-danger"&gt;&lt;/span&gt;

Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).

Abgerufen von „https://mediawiki.wissen-ahrensburg.de/index.php?title=Webframeworkk/ASP.NET_Core/Tag-Helfer&oldid=274“