Lies in den Artikel rein und unten bekommst Du ein unschlagbares Angebot!
Wenn Sie eine Webanwendung zur Verwaltung von Daten programmieren, wollen Sie Daten anzeigen, eingeben, löschen und so weiter. Das gelingt nicht ohne Navigation zwischen den verschiedenen Seiten. Die Hauptseiten sind über die Navigationsleisten erreichbar, aber wenn Sie etwa einen bestimmten Datensatz anzeigen, Daten von einer Seite zur nächsten übermitteln oder nach dem Löschen eines Datensatzes wieder die Übersicht einblenden wollen, benötigen Sie entsprechende Techniken. Dieser Artikel zeigt, wie Sie mit Links, Senden von Formularen und anderen Methoden von Seite zu Seite gelangen und die gewünschten Daten übermitteln. Dabei spielen auch die Ereignis-Handler einer Seite eine Rolle.
Einfache Links
Einen einfachen Link erstellen Sie in herkömmlichen HTML-Seiten mit dem a-Element. In Razor Pages verwenden Sie ein anderes Attribut, um die Zielseite anzugeben – nämlich asp-page. Wenn Sie etwa von der Index.cshtml-Seite im Verzeichnis Pages des Projekts auf die About-Seite verlinken wollen, können Sie das etwa mit dem folgenden Code erledigen:
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<h2>Link-Beispiele</h2>
<p><a asp-page="About">Zur Seite ''About''</a></p>
Das Ergebnis sieht dann etwa wie in Bild 1 aus. Da sich die Seite About.cshtml im gleichen Verzeichnis wie die Seite Index.cshtml befindet, reicht die Angabe des Namens der Seite ohne die Dateiendung .cshtml. Ein Klick auf diesen Link zeigt dann die Seite About.cshtml im Browser an.
Bild 1: Einfacher Link
Handler-Methoden
Unter ASP.NET Core/Razor Pages gibt es verschiedene Handler-Methoden. Diese heißen beispielsweise wie folgt:
- OnPost
- OnGet
- OnPostAsync
- OnGetAsync
Die Code behind-Datei einer Razor Page enthält normalerweise die folgende Handler-Methode:
public void OnGet() {
}
Diese wird gleich beim Laden der Seite auf der Serverseite ausgelöst. Dies können wir prüfen, indem wir der Methode einen Haltepunkt hinzufügen und das Projekt starten. Bevor die Seite im Browser erscheint, hält die Methode an der Stelle mit dem Haltepunkt an. Auch wenn Sie die Seite mit der Taste F5 aktualisieren, wird die Methode wieder ausgelöst.
In der durch unsere Seite Index.cshtml verlinkten Seite About.cshtml haben wir die gleiche Prozedur angelegt und mit einem Haltepunkt versehen. Klicken wir zur Laufzeit auf den Link, löst dies die Methode OnGet dieser Seite aus.
Methode OnPost auslösen
Nun wollen wir eine zweite Handler-Methode namens OnPost hinzufügen, die genau gleich aufgebaut ist wie OnGet. Auch diese fügen wir wieder beiden Pages hinzu, also Index.cshtml und About.cshtml:
public void OnPost() {
}
Um diese zu testen, benötigen wir auf der Seite Index.cshtml ein Formular. Dieses erhält die Methode post für das Attribut method und eine Schaltfläche zum Absenden des Formulars:
<form method="post">
<button class="btn btn-default">Zur gleichen Seite.</button>
</form>
Wenn wir nun auf diese Schaltfläche klicken, wird die Methode OnPost der aufgerufenen Seite Index.cshtml aufgerufen – diese wird dann auch erneut angezeigt.
Nun fügen wir eine weitere Schaltfläche in einem neuen Formular hinzu, welche die Seite About.cshtml aufrufen soll. Standardmäßig wird beim Absenden eines Formulars immer die Seite aufgerufen, auf der sich das Formular befindet. Um eine andere Seite wie etwa About.cshtml aufzurufen, fügen Sie dem button-Element das Attribut asp-page mit dem Namen der aufzurufenden Datei hinzu:
<form method="post">
<button class="btn btn-default" asp-page="About">Zur Seite ''About''.</button>
</form>
Dies öffnet die Seite About.cshtml und führt dort die Handler-Methode OnPost aus.
Mehrere Formulare für die gleiche Seite
Im obigen Fall haben wir nun zwei Formulare, die allerdings verschiedene Seiten aufrufen. Wenn Sie jedoch verschiedene Formulare auf einer Seite nutzen, die alle die gleiche Seite aufrufen – beispielsweise die aktuelle Seite – gelingt dies natürlich. Allerdings wird immer die gleiche Handler-Methode aufgerufen, standardmäßig OnPost. Wenn Sie mehrere Formulare nutzen wollen, die zur Ausführung verschiedener OnPost-Methoden führen sollen, legen Sie etwa die folgenden Formulare an:
<h3>Zwei Formulare zu verschiedenen OnPost-Methoden</h3>
<form method="post" asp-page-handler="Eins">
<button class="btn btn-default">Zur Methode OnPostEins.</button>
</form>
<form method="post" asp-page-handler="Zwei">
<button class="btn btn-default" >Zur Methode OnPostZwei.</button>
</form>
Die Seite sieht mittlerweile wie in Bild 2 aus. Wenn Sie nun nacheinander auf die beiden Schaltflächen Zur Methode OnPostEins und Zur Methode OnPostZwei anklicken, wird nun beide Male die Methode OnPost des Formulars Index.cshtml ausgeführt. Es hat sich also erstmal nichts geändert.
