Sicherheitsabfrage mit Javascript

Beim Umgang mit Datensätzen ist es elementar, den Benutzer vor sich selbst zu schützen, d.h. der Entwickler sollte z.B. vor dem Löschen von Datensätzen nachfragen, ob diese Aktion wirklich gewollt ist. Im Artikel Sicherheitsabfrage mit ASP habe ich dargestellt, wie man eine solche Sicherheitsabfrage mit reinem ASP bewerkstelligt und bereits angedeutet, dass es für dieses Problem auch eine Javascript-Lösung gibt, bei der sich nach dem Klick auf die Löschen-Schaltfläche eine entsprechende Dialogbox öffnet. Die hier vorgestellte Lösung geht aber noch einen Schritt weiter und implementiert eine weitere Datenmanipulation, nämlich das Speichern eines Datensatzes, über das gleiche Funktionsschema. Das Schema ist beliebig erweiterbar.

Der Ansatz besteht aus zwei ASP-Seiten: einer Datensatzliste und einer Aktionsseite, die die Datensatzmanipulation durchführt.

Die Datensatzliste

Verwenden wir eine kleine Access-Datenbank als Datenquelle und erzeugen über eine Schleife auf der Tabelle "tblKontakte" im Body der ASP-Seite eine Datensatzliste, deren Einträge jeweils zwei Schaltflächen zum Löschen und Speichern beinhalten:

<form method="POST" name="frm" action="">
<table border="0" width="400" style="border-collapse: collapse">

<%
   'Öffnen der Datenbank-Verbindung per UDL-Datei
   Set objConn = Server.CreateObject("ADODB.Connection")
   objConn.Open "file name=" & Server.MapPath("kontakte.udl")

   'Öffnen des Recordsets
   Set rs = Server.CreateObject("ADODB.Recordset")
   strSQL = "SELECT * FROM tblKontakte"
   rs.Open strSQL, objConn

   Set fldID = rs.Fields("ID")
   Set fldVN = rs.Fields("Vorname")
   Set fldNN = rs.Fields("Nachname")
   Set fldStr = rs.Fields("Strasse")
   Set fldPLZ = rs.Fields("PLZ")
   Set fldOrt = rs.Fields("Ort")

   'Schleife über alle Datensätze der Tabelle
   Do Until rs.EOF
%>
   <!-- Vorname und Nachname -->
   <tr><td>
      <input type="text" name="txtNN<%response.write fldID%>"size="17"
         value="<%response.write fldVN%>">
      <input type="text" name="txtVN<%response.write fldID%>"size="18"
         value="<%response.write fldNN%>">
   </td></tr>

   <!-- Strasse -->
   <tr><td>
      <input type="text" name="txtStr<%response.write fldID%>"size="40"
         value="<%response.write fldStr%>">
   </td></tr>

   <!-- PLZ und Ort -->
   <tr><td>
      <input type="text" name="txtPLZ<%response.write fldID%>"size="5"
         value="<%response.write fldPLZ%>">
      <input type="text" name="txtOrt<%response.write fldID%>"size="30"
         value="<%response.write fldOrt%>">
      </td></tr>

   <!-- Schaltflächen -->
   <tr><td>
      <input class="button" type="button" value="Löschen"
         name="cmdDelete<%response.write fldID%>"
         onclick="confirm_cmd(this.form,'DELETE', <%response.write fldID%>)">
      <input class="button" type="button" value="Speichern"
         name="cmdSave<%response.write fldID%>"
         onclick="run_cmd(this.form,'SAVE', <%response.write fldID%>)">
      </td></tr>

   <!-- Trennzeile -->
   <tr><td><br><br></td></tr>
<%
      rs.MoveNext
   Loop

   'Schließen des Recordsets und der Verbindung
   rs.close
   Set rs = nothing
   objConn.Close
   Set objConn = Nothing
%>

Zu beachten ist, dass alle Formularelemente einen unterschiedlichen Namen erhalten, um nachher auf die richtigen Formularfelder zugreifen zu können. Dies wird erreicht, indem einfach die Datensatz-ID dem jeweiligen Namen angehängt wird.

Das Formular, über das die ausführende ASP-Seite aufgerufen wird, trägt kein Action-Attribut, denn dieses wird erst über die Javascript-Funktion run_cmd in Abhängigkeit der gedrückten Schaltfläche gesetzt. Dieser Funktion wird, neben dem Eingangsparameter frm, der das Formular bezeichnet, das auszuführende Kommando als String und die Datensatz-ID übergeben.

Die Sicherheitsabfrage per Dialog wird erreicht, indem beim Klick auf die Löschen-Schaltfläche nicht sofort die Funktion run_cmd aufgerufen wird, sondern die vorgelagerte Funktion confirm_cmd, die dem Benutzer über den Javascript-Befehl CONFIRM eine Dialogbox anzeigt, über die er sich entscheiden kann, wie er weiter verfahren möchte.

Diese beiden Funktionen werden im Header der ASP-Seite abgelegt:

<script language="javascript"><!--
   function run_cmd(frm,cmd,id)
   {
      frm.action = "kontakt_action.asp?cmd=" + cmd + "&id="+ id
      frm.submit();
   }

   function confirm_cmd(frm, cmd, id)
   {
      msg = "Sind Sie sicher, daß Sie diesen Eintrag löschen möchten?";
      var agree=confirm(msg);
      if (agree)
         run_cmd(frm,'DELETE', id);
   }
//--></script>

Willi go...

Der Aufruf der ausführenden Seite "kontakt_action.asp" geschieht über die POST-Methode. Bevor wir jedoch die Formularfelder auswerten können, brauchen wir die ID, die neben dem Kommando als Parameter übergeben wurde. Die ersten Zeilen der lauten somit:

intID = CInt(Trim(Request.QueryString("id")))
strCmd = UCase(Trim(Request.QueryString("cmd")))

strNN = Request.Form("txtNN" & intID)
strVN = Request.Form("txtVN" & intID)
strStr = Request.Form("txtStr" & intID)
strPLZ = Request.Form("txtPLZ" & intID)
strOrt = Request.Form("txtOrt" & intID)

Mit diesen Werten können wir nun in Abhängigkeit des Kommandos die Datenmanipulation durchführen:

Select Case strCmd

   Case "DELETE"
      strShowCmd="<b> 'Löschen' für Datensatz " & intID & "</b>"
      'Code für das Löschen des Datensatzes
      '...

   Case "SAVE"
      strShowCmd = "<b> 'Speichern' für Datensatz " & intID & "</b><br><br>"
      strShowCmd = strShowCmd & "Vorname: " & strVN & "<br>"
      strShowCmd = strShowCmd & "Nachname: " & strNN &"<br>"
      strShowCmd = strShowCmd & "Strasse: " & strStr &"<br>"
      strShowCmd = strShowCmd & "PLZ: " & strPLZ & "<br>"
      strShowCmd = strShowCmd & "Ort: " & strOrt
      'Code für das Speichern des Datensatzes
      '...

End Select