Webentwicklung 101 - Teil 7: Daten aus der Datenbank editieren

In den ersten sechs Teilen dieser Tutorialreihe wurde unter anderem das Erstellen und Stylen einer Webseite, das Anlegen einer Datenbank sowie das Hinzufügen von Daten zur Datenbank demonstriert. In dieser Folge soll gezeigt werden, wie Sie über ein Formular Daten aus der Datenbank bearbeiten können.

Eine “Editieren-Seite” erstellen

Sie sehen die in den letzten Folgen angelegte Filmliste und die Möglichkeit, Filme hinzuzufügen. Jeder angelegte Film wurde bereits mit einem Hyperlink versehen, daher bietet es sich an, diesen Link dafür zu verwenden, einen Film zu ändern.

webmatrix_101_p7_01

Im ersten Schritt muss eine neue CSHTML-Seite angelegt werden, nennen wir sie FilmEditieren.cshtml. Diese Seite sollte ein Formular mit den Filmdetails enthalten, von dem Film, der angeklickt wurde. Außerdem sollen diese Details änderbar sein und die Änderungen zurück an die Datenbank geschickt werden können. Fügen Sie daher folgenden Quelltext in die neu angelegte Seite ein:

<h1>Film editieren</h1>
 <form action="" method="post">
     <p>Titel:<input type="text" name="formTitel" /></p>
     <p>Genre:<input type="text" name="formGenre" /></p>
     <p>Jahr:<input type="text" name="formErscheinungsjahr" /></p>
     <p><input type="submit" value="Editieren" /></p>
 </form>

Die Editieren-Seite über die Filmliste aufrufen

Damit steht die Grundlage für das benötigte Formular. Nun ist noch die Frage, wie das Formular mit den Daten des jeweiligen Films aus der Datenbank heraus gefüllt werden kann. Um dies zu realisieren, müssen Sie auf die Seite filmtabelle.cshmtl wechseln. Wie Sie sich vielleicht erinnern, werden die einzelnen Listenpunkte dort auf diese Weise eingepflegt:

<li><a href="#">@row.Titel, @row.Genre, @row.Erscheinungsjahr</a></li>

Der Hyperlink wurde lediglich mit dem Platzhalter # gefüllt, hat also noch keinen Zielort. Dieser Platzhalter kann nun durch die Editieren-Seite ersetzt werden:

<li><a href="FilmEditieren.cshtml">@row.Titel, @row.Genre, @row.Erscheinungsjahr</a></li>

Da ist allerdings nur ein erster Schritt, denn nun kommt man zwar zu Editieren-Seite, allerdings weiß diese Seite noch nicht, welchen Film man editieren will. Da die Seite filmtabelle.cshtml aber weiß, welcher Film geklickt wurde, können Sie dies nutzen und der Editieren-Seite die ID des Filmes auf diese Weise mitteilen:

FilmEditieren.cshtml?id=<something>

Da beim Anlegen der Datenbank auch eine Spalte mit einer festen ID vergeben wurde (@row.id), kann Razor genutzt werden, um diese ID weiterzugeben:

<li><a href="FilmEditieren.cshtml?id=@row.id">@row.Titel, @row.Genre, @row.Erscheinungsjahr</a></li> 
 

Die Seite mit der Filmliste sieht nun folgend aus:

webmatrix_101_p7_01

Zugegeben, es ist keine Änderungen zu sehen. Bei einem Blick unter die Oberfläche bemerkt man allerdings, dass sich doch so einiges geändert hat. Das generierte HTML sieht nämlich inzwischen folgendermaßen aus (im Internet Explorer 9 wird Ihnen das HTML über „Rechte Maustaste“ und „Quellcode anzeigen“ angezeigt:

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>Lieblingsfilme von mir</title>
   <link rel="stylesheet" type="text/css" href="filme.css" />
 </head>
 <body>
     <header><h1>Meine Lieblingsfilme</h1></header>
  <div id="filmliste">
      <ol>
               <li><a href="FilmEditieren.cshtml?id=1">Last Boy Scout, Action, 1994</a></li>
               <li><a href="FilmEditieren.cshtml?id=2">Waynes World, Kom&#246;die, 1992</a></li>
               <li><a href="FilmEditieren.cshtml?id=3">Sonnenallee, Kom&#246;die, 2001</a></li>
               <li><a href="FilmEditieren.cshtml?id=4">Tron, Action, 2011</a></li>
               <li><a href="FilmEditieren.cshtml?id=5">Sissi, die junge Kaiserin, Heimatfilm, 1978</a></li>
               <li><a href="FilmEditieren.cshtml?id=6">Dead or Alive (DOA), Action, 2007</a></li>
               <li><a href="FilmEditieren.cshtml?id=7">Bladerunner, Action, 1975</a></li>
      </ol>
     <a href="NeuerFilm.cshtml">Einen neuen Film hinzufügen</a>
 </div>
   <footer>
     <p>Diese Seite wurde mit Microsoft WebMatrix erstellt.<br />
     <a href="http://web.ms/webmatrix">Jetzt herunterladen!</a></p>
   </footer>
 </body>
 </html>
 

Jeder Link hat eine eigene ID zugeordnet bekommen – wenn die Editieren-Seite jetzt aufgerufen wird, kann diese ID dazu verwendet werden, die Daten zum gewünschten Film aus der Datenbank auszulesen.

Letzte Schritte auf der Editieren-Seite

Zurück zu FilmEditieren.cshtml: Wie bereits bekannt, kann man mit @{ zu Beginn des Quellcodes Befehle einfügen, die beim Laden der Seite gestartet werden sollen. Das ist auch der ideale Platz, um die gesuchte ID auszulesen.

Wenn Sie eine Seite mit einer solchen Syntax aufrufen, wie in diesem Fall (z.B. SeitenName.cshtml?<Parameter>=<Value>), kann man den Wert des Parameters über das Request-Objekt auslesen. Für FilmEditieren.cshtml?id=6 kann zum Beispiel dieser Code verwendet werden:

var id=Request["id"];

Der Codeausschnitt erstellt eine lokale Variable mit dem Namen id und füllt diese mit dem Wert des Parameters (der ebenfalls id heißt). WebMatrix kann die beiden IDs voneinander unterscheiden und erkennt welche welche ist. Nachdem die ID nun bekannt ist, kann Sie mit dem Befehl SELECT aus der Datenbank ausgelesen werden:

   var id=Request["id"]; 
   var SQLSELECT = "SELECT * FROM Filme where ID=@0";
   var db = Database.Open("Filme"); 
   var Movie = db.QuerySingle(SQLSELECT,id); 
   var MovieTitel=Movie.Titel; 
   var MovieGenre=Movie.Genre; 
   var MovieErscheinungsjahr=Movie.Erscheinungsjahr;

Nun besteht nur noch ein Problem und zwar, dass die Werte in den Variablen sind und nicht im Formular. Die Lösung ist hier ganz einfach, da die Datenbank gleich zu Beginn der Seite ausgelesen wird, also noch bevor das HTML geschrieben wird. Wir müssen also nur noch das Formular mit den Werten aus den Variablen füllen. Dies sieht dann im Code folgend aus:

@{ 
   var id=Request["id"]; 
   var SQLSELECT = "SELECT * FROM Filme where ID=@0";
    var db = Database.Open("Filme"); 
   var Movie = db.QuerySingle(SQLSELECT,id); 
   var MovieTitel=Movie.Titel; 
   var MovieGenre=Movie.Genre; 
   var MovieErscheinungsjahr=Movie.Erscheinungsjahr; 
}

<h1>Film editieren</h1>
 <form action="" method="post">
     <p>Titel:<input type="text" name="formTitel" value="@MovieTitel" /></p>
     <p>Genre:<input type="text" name="formGenre" value="@MovieGenre" /></p>
     <p>Jahr:<input type="text" name="formErscheinungsjahr" value="@MovieErscheinungsjahr" /></p>
     <p><input type="submit" value="Editieren" /></p>
 </form>

Wenn Sie nun einen Titel in der Filmliste anklicken, bekommen Sie das folgende Ergebnis geliefert:

webmatrix_101_p7_02

Sie können nun beliebige Änderungen bei Titel, Genre oder Erscheinungsjahr vornehmen, wenn Sie anschließend den Editieren-Button klicken, passiert allerdings noch nichts. Es wird noch eine Aktion für den HTTP POST-Befehl benötigt, der mit Klicken des Editieren-Buttons ausgelöst wird. Ähnlich wie in der letzten Folge des Tutorials sollte dieser Befehl ungefähr so aussehen:

  if(IsPost){
   MovieTitel=Request["formTitel"];
   MovieGenre=Request["formGenre"];
   MovieErscheinungsjahr=Request["formErscheinungsjahr"];
    }   

Das Formular nutzt formTitel, formGenre und formErscheinungsjahr für die Inhalte von Titel, Genre und Erscheinungsjahr. Diese wurden mit dem Request-Objekt ja bereits ausgelesen. Eventuell vom User vorgenommene Änderungen können nun der Datenbank mitgeteilt werden. Hierfür steht der SQL-Befehl UPDATE zur Verfügung, der folgende Syntax hat:

UPDATE table SET column=value, column=value, column=value... WHERE key=value

In unserem Fall werden drei Spalten für eine bereits bekannte ID aktualisiert, der nötige Sourcecode lautet also folgend:

var SQLUPDATE = "UPDATE Filme Set Titel=@0, Genre=@1, Erscheinungsjahr=@2 WHERE id=@3";
db.Execute(SQLUPDATE, MovieTitel, MovieGenre, MovieErscheinungsjahr,id);

Schließlich soll die Seite, sobald ein Film geändert wurde, zur geänderten Filmliste zurückspringen. Hierfür wird noch diese kurze Codezeile benötigt:

Response.Redirect("filmtabelle.cshtml");

Der Einfachheit halber hier noch einmal der komplette Sourcecode für die Editieren-Seite:

@{ 
   var id=Request["id"]; 
   var SQLSELECT = "SELECT * FROM Filme where ID=@0";
   var db = Database.Open("Filme"); 
   var Movie = db.QuerySingle(SQLSELECT,id); 
   var MovieTitel=Movie.Titel; 
   var MovieGenre=Movie.Genre; 
   var MovieErscheinungsjahr=Movie.Erscheinungsjahr; 

  if(IsPost){ 
   MovieTitel=Request["formTitel"]; 
   MovieGenre=Request["formGenre"]; 
   MovieErscheinungsjahr=Request["formErscheinungsjahr"];
   var SQLUPDATE = "UPDATE Filme Set Titel=@0, Genre=@1, Erscheinungsjahr=@2 WHERE id=@3";
   db.Execute(SQLUPDATE, MovieTitel, MovieGenre, MovieErscheinungsjahr,id); 
  Response.Redirect("filmtabelle.cshtml"); 
    }    

}

<h1>Film editieren</h1>
 <form action="" method="post">
     <p>Titel:<input type="text" name="formTitel" value="@MovieTitel" /></p>
     <p>Genre:<input type="text" name="formGenre" value="@MovieGenre" /></p>
     <p>Jahr:<input type="text" name="formErscheinungsjahr" value="@MovieErscheinungsjahr" /></p>
     <p><input type="submit" value="Editieren" /></p>
 </form>

Zusammenfassung

Wenn Sie datengetriebene Seiten erstellen, ist es wichtig, dass User nicht nur die Möglichkeit haben, Daten einzusehen und Daten hinzuzufügen, sondern auch Datensätze zu ändern. In diesem Kapitel wurde Ihnen gezeigt, wie einfach Sie Datensätze in Ihrer Datenbank über ein Formular ändern können. Im nächsten Schritt folgt der letzte logische Schritt, das Löschen eines Datensatzes.

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!