Webentwicklung 101 - Teil 8: Datensätze löschen

Nachdem Sie eine Datenbank angelegt haben, Webseiten zum Hinzufügen und Editieren von Datensätzen erstellt haben, erklärt dieses Tutorial den nächsten logischen Schritt: Eine Webseite, über die Datensätze aus der Webseite gelöscht werden können. Sie haben im Zusammenhang mit Webentwicklung und Datenbanken vielleicht schon einmal den Ausdruck CRUD gehört, dieser steht für Create Retrieve Update Delete – und diese vier Punkte können Sie nun auch mit WebMatrix umsetzen.

Eine “Löschen”-Seite erstellen

Zu Beginn wird erst einmal wieder eine neue Seite benötigt, als Namen bekommt diese FilmEntfernen.cshtml. Wenn Sie die Seite erstellt haben, fügen Sie folgenden Quellcode dort ein:

<h1>Film entfernen</h1>
 <p>Sind Sie sicher, dass Sie <strong>@Movie.Titel</strong> entfernen wollen?</p>
 <form action="" method="post">
     <input type="submit" value="Ja"/>
     <input type="button" value="Nein" onclick="window.location = 'filmtabelle.cshtml'" />
 </form>
 

Durch diesen Code wird ein einfaches Formular mit zwei Buttons erstellt: Zum einen ein Ja-Button, der eine HTTP POST-Aktion auslöst (ähnlich des Editieren-Buttons aus der letzten Folge) und zum anderen einen Nein-Button, der den User zur Seite mit der Filmliste zurückschickt.

Ähnlich der Seite FilmEditieren.cshtml wird FilmEntfernen.cshtml beim Aufrufen eine ID mitgegeben werden, die den Film identifiziert, der gelöscht werden soll. Der Name des Films soll dann an der Stelle von @Movie.Titel eingefügt werden. Sie müssen also dem Server mitteilen, wie er an den richtigen Filmnamen kommt. Hierfür benötigen Sie ein wenig Razor-Code am Anfang Ihrer 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;
    }

In diesem Codeauschnitt können Sie sehen, dass die Seite mit einem Parameter id aufgerufen wird (FilmEntfernen.cshtml?id=<whatever>), welcher den zu löschenden Film enthält. Außerdem startet der Code eine Suche in der Datenbank, die den gesuchten Film dann für die Webseite zur Verfügung stellt.

Probieren Sie es aus und rufen Sie die Seite mit einer gültigen ID nach diesem Schema FilmEntfernen.cshtml?id=<something> auf. Das Ergebnis sollte ungefähr folgendermaßen aussehen:

webmatrix_101_p8_01

Wenn Sie den Nein-Button klicken, schickt Sie die Seite zurück zu filmtabelle.cshtml. Für den Fall, dass Sie Ja drücken, passiert derzeit noch nichts. Hierfür müssen Sie zuerst eine Aktion definieren, die beim Klicken ausgelöst werden soll. Um einen Datensatz zu löschen, benötigen Sie den SQL-Befehl DELETE, der folgende Syntax hat:

DELETE FROM <Table> WHERE <Field>=<Value>

Für den Fall, dass Sie zum Beispiel den Film mit der ID 2 aus der Datenbank löschen wollen, würde der Befehl so lauten:

DELETE FROM Filme WHERE ID=2

Nach einem Klick auf den Ja-Button würde das Formular den Auftrag zum Löschen an die Datenbank schicken und der Eintrag würde entfernt werden. Der komplette Quellcode für das Löschen muss demnach folgendermaßen aussehen:

   if(IsPost){
     var SQLDELETE = "DELETE FROM Filme WHERE ID=@0";
     db.Execute(SQLDELETE,id);
     Response.Redirect("filmtabelle.cshtml");
     }   

Dadurch wird der Film gelöscht und der User gelangt zurück auf die aktualisierte Seite mit der Filmliste. Noch einmal der komplette Quellcode der Seite FilmEntfernen.cshtml, die damit bereits fertig ist:

   @{ 
     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; 
     
       if(IsPost){ 
     var SQLDELETE = "DELETE FROM Filme WHERE ID=@0";
      db.Execute(SQLDELETE,id); 
     Response.Redirect("filmtabelle.cshtml");
      }    
    } 

<h1>Film entfernen</h1>
 <p>Sind Sie sicher, dass Sie <strong>@Movie.Titel</strong> entfernen wollen?</p>
 <form action="" method="post">
     <input type="submit" value="Ja"/>
     <input type="button" value="Nein" onclick="window.location = 'filmtabelle.cshtml'" />
 </form>
 

Die Löschen-Seite aus der Filmliste heraus aufrufen

Die Löschen-Seite ist fertig, nun muss den Usern noch die Möglichkeit gegeben werden, die einzelnen Filme löschen zu können. Hierfür müssen Sie auf der Seite mit der Filmliste lediglich einen weiteren Hyperlink mit dem Hinweis „Entfernen“ zu jedem Film hinzufügen. Der Quellcode von filmtabelle.cshtml müsste daher folgendermaßen aussehen:

     @{ 
        var db = Database.Open("Filme");
        var sqlQ = "SELECT * FROM Filme";
        var data = db.Query(sqlQ); 
     }    
 <div id="filmliste">
      <ol>
      @foreach(var row in data) 
       { 
              <li><a href="FilmEditieren.cshtml?id=@row.id">@row.Titel, @row.Genre, @row.Erscheinungsjahr</a> 
              <br /><a href="FilmEntfernen.cshtml?id=@row.id">Entfernen</a></li>
        } 
     </ol>
     <a href="NeuerFilm.cshtml">Einen neuen Film hinzufügen</a>
 </div>

Wenn Sie die Seite nun im Browser betrachten, sollte ein Ergebnis in dieser Art zu sehen sein:

webmatrix_101_p8_02

Wenn Sie nun einen Film zum Löschen wählen, sollten Sie direkt auf der Löschen-Seite landen und Ihnen der gewählte Film zum Löschen angezeigt werden:

webmatrix_101_p8_01

Wenn Sie auf Nein klicken, landen Sie auf der unveränderten Filmliste. Für den Fall, dass Sie Ja klicken, landen Sie ebenfalls wieder auf der Filmliste, allerdings fehlt dann der gelöschte Film:

webmatrix_101_p8_03

Zusammenfassung

Geschafft! Sie haben eine erste kleine Anwendung erstellt, die die vier Funktionen Create, Retrieve, Update und Delete (CRUD) zur Verfügung stellt. War gar nicht so schwierig, oder? Mehr zur Razor-Syntax können Sie sich auf dieser Seite aneignen: http://www.asp.net/webmatrix/fundamentals

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!