![\"Basis](\"..\/fileadmin\/_temp_\/2018_02\/pic_131_001.png\")
<\/p>\nWer Anwendungen für den Desktop entwickelt hat, kennt die Vorgehensweise: Bei einem Klick auf OK werden die eingegebenen Werte in einer Ereignisprozedur ausgewertet, gespeichert oder anderen Schritten unterzogen. Bei Internetanwendungen ist das aufgrund der Eigenarten der Browser etwas anders. Hier klicken Sie zwar nach der Eingabe von Daten auch auf eine Schaltfläche, um die Daten zu verarbeiten, aber es gibt dort keine Ereignisprozeduren im klassischen Sinne. Wie die Datenverarbeitung hier geschieht, zeigt der vorliegende Artikel.<\/b><\/p>\n
Für die Beispiele dieses Artikels legen Sie wieder ein Projekt auf Basis der Vorlage Visual C#|Web|ASP.NET Core-Webanwendung<\/b> an. Wählen Sie im Dialog Neue ASP.NET Core Webanwendung <\/b>den Eintrag Webanwendung <\/b>aus.<\/p>\n
Wir wollen zunächst nur eine Seite namens Index.cshtml <\/b>nutzen, die wir allerdings mit eigenen Inhalten füllen wollen. Also entfernen wir den aktuell in der Datei \/Pages\/Index.cshtml <\/b>enthaltenen Code mit Ausnahme der Razor-Anweisungen zu Beginn des Codes (siehe Bild 1).<\/p>\n
<\/p>\n
Bild 1: Basis unseres Formulars<\/span><\/b><\/p>\n In unserem Beispiel wollen wir ein Formular erstellen, in das der Benutzer die Daten wie in einem Kontaktformular eingibt und dessen Inhalt dann an den Betreiber der Webseite geschickt wird. Als E-Mail-Provider wollen wir dann wie im Artikel E-Mails per SendGrid verschicken <\/b>den Anbieter Sendgrid <\/b>nutzen.<\/p>\n Bevor wir mit der Programmierung des eigentlichen Formulars im HTML-Format beginnen, stellen wir ein Model zusammen, oder genauer: eine Klasse mit einem Model für die E-Mail-Daten. Diese Klasse soll wie folgt aussehen und kann der Einfachheit halber direkt in der Datei Index.cshtml.cs <\/b>eingefügt werden:<\/p>\n Hier sehen Sie neben den üblichen Elementen einer Klasse jeweils das Attribut [Required]<\/b>. Damit dieses nicht als Fehler markiert wird, fügen wir der Klassendatei mit der using<\/b>-Anweisung den Namespace System.ComponentModel.DataAnnotations <\/b>hinzu:<\/p>\n Damit wir ein Objekt auf Basis der Klasse KontaktformularModel<\/b> im HTML-Formular nutzen können, machen wir dieses ähnlich wie unter WPF öffentlich verfügbar (siehe Bild 2):<\/p>\n Bild 2: Aktueller Stand der Klassendatei Index.cshtml.cs<\/span><\/b><\/p>\n Damit kommen wir nun zum HTML-Code des Formulars. Die einfachste Form dieses Formulars sieht wie folgt aus – wenn wir das Projekt nun starten, erhalten wir das Formular aus Bild 3:<\/p>\n Bild 3: Start des ersten Beispiels<\/span><\/b><\/p>\n Wenn wir nun auf Absenden klicken, geschieht allerdings noch nichts. Das liegt daran, dass wir nicht – wie früher üblich – die Zielseite angegeben haben, die nach dem Anklicken der Submit<\/b>-Schaltfläche aufgerufen werden soll. Diese wurde sonst im Attribut action <\/b>des form<\/b>-Elements angegeben. Wir geben hingegen mit dem Attribut method <\/b>nur die Art der Übermittlung der Inhalte des Formulars an, und zwar als post <\/b>(es gibt auch noch get<\/b>). Wenn Sie hier get <\/b>angeben, werden die in das Formular eingegebenen Daten an die durch das Formular aufgerufene Seite über die URL übermittelt, für eine PHP-Seite also etwa mit \/index.phpvorname=andre&nachname=minhorst&email=andre@minhorst.com<\/b>. Der Nachteil dieser Version ist, dass die Anzahl der übermittelbaren Zeichen je nach Browser begrenzt ist. Deshalb verwenden wir post <\/b>als action<\/b>.<\/p>\n Wie aber wollen wir das Formular nun nach dem Senden auswerten Unter PHP beispielsweise gibt man eine Zielseite an, die dann den notwendigen Code enthält, um die entweder in der Variablen $_GET <\/b>oder $_POST <\/b>übermittelten Informationen zu verarbeiten. Unter ASP.NET Core läuft das ganz anders. Hier enthält die Code behind-Datei der Seite mit dem Formular eine Ereignismethode, welche die Daten auswertet. Sie brauchen also keine Zielseite für das Formular anzugeben, die Verarbeitung erfolgt in der Seite selbst beziehungsweise in ihrem serverseitigen Code. Die einfachste Version dieser Methode, die lediglich zu der Seite mit dem Namen About.cshtml <\/b>weiterleitet, sieht wie folgt aus:<\/p>\n Wenn Sie die Anwendung nun starten, die Daten in das Formular eingeben und dann auf Absenden klicken, wird anschließend die Seite About.cshtml <\/b>geladen.<\/p>\n Und nun kommt ein wenig ASP.NET Core-Magie ins Spiel. Wir fügen nun eine if<\/b>-Bedingung ein, welche die Eigenschaft IsValid <\/b>des Objekts ModelState <\/b>prüft und erneut die aktuelle Seite aufruft, wenn IsValid <\/b>nicht den Wert true <\/b>liefert:<\/p>\n Wie funktioniert das Nun: Wir haben ja mit dem [Required]<\/b>-Element festgelegt, dass die Daten für die vier Felder der Klasse KontaktformularModel <\/b>angegeben werden müssen. Diese werden bei der Prüfung durch ModelState.IsValid <\/b>untersucht. Ist eines der Felder leer, hat IsValid <\/b>den Wert False <\/b>und man landet wieder auf der auslösenden Seite. Erst wenn alle Felder gefüllt sind, wird die Seite About <\/b>mit der RedirectToPage<\/b>-Methode aufgerufen.<\/p>\n Um die Mail mit den Kontaktinformationen schließlich zu versenden, fügen wir der Methode OnPostAsync <\/b>noch den Aufruf einer weiteren Methode namens SendMail <\/b>hinzu:<\/p>\n Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span>Model anlegen<\/h2>\n
public class KontaktformularModel {\r\n [Required]\r\n public string Vorname { get; set; }\r\n [Required]\r\n public string Nachname { get; set; }\r\n [Required]\r\n public string Email { get; set; }\r\n [Required]\r\n public string Nachricht { get; set; }\r\n}<\/pre>\nusing System.ComponentModel.DataAnnotations;<\/pre>\n
![\"Aktueller](\"..\/fileadmin\/_temp_\/2018_02\/pic_131_002.png\")
<\/p>\n[BindProperty]\r\npublic KontaktformularModel Kontakt{ get; set; }<\/pre>\n![\"Start](\"..\/fileadmin\/_temp_\/2018_02\/pic_131_003.png\")
<\/p>\n<form method=\"post\">\r\n <table>\r\n <tr>\r\n <td>Vorname:<\/td>\r\n <td><input asp-for=\"Kontakt.Vorname\" \/><\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Nachname:<\/td>\r\n <td><input asp-for=\"Kontakt.Nachname\" \/><\/td>\r\n <\/tr>\r\n <tr>\r\n <td>E-Mail:<\/td>\r\n <td><input asp-for=\"Kontakt.Email\" \/><\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Nachricht:<\/td>\r\n <td><input asp-for=\"Kontakt.Nachricht\" \/><\/td>\r\n <\/tr>\r\n <tr>\r\n <td colspan=\"2\"><button type=\"submit\">Absenden<\/button><\/td>\r\n <\/tr>\r\n <\/table>\r\n<\/form> <\/pre>\n
Auswertung des Formulars<\/h2>\n
public async Task<IActionResult> OnPostAsync() {\r\n return RedirectToPage(\"About\");\r\n}<\/pre>\nValidieren<\/h2>\n
public async Task<IActionResult> OnPostAsync() {\r\n if (!ModelState.IsValid) {\r\n return Page();\r\n }\r\n return RedirectToPage(\"About\");\r\n}<\/pre>\nMail versenden<\/h2>\n
public async Task<IActionResult> OnPostAsync() {\r\n if (!ModelState.IsValid) {\r\n return Page();\r\n }\r\n SendMail();\r\n return RedirectToPage(\"About\");\r\n}<\/pre>\n
\nHier geht es zur Bestellung des Jahresabonnements des Magazins Visual Basic Entwickler<\/strong>:<\/span>
\nZur Bestellung ...<\/a><\/span>
\nDanach greifen Sie sofort auf alle rund 200 Artikel<\/strong> unseres Angebots zu - auch auf diesen hier!<\/span>
\nOder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:<\/span><\/p>\n<\/div>\n\n\t\n\t