Freigeben über

Einführung in das Arbeiten mit einer Datenbank in ASP.NET Web Pages Websites (Razor)

  • Artikel

von Tom FitzMacken

In diesem Artikel wird beschrieben, wie Sie microsoft WebMatrix-Tools verwenden, um eine Datenbank auf einer ASP.NET Web Pages -Website (Razor) zu erstellen, und wie Sie Seiten erstellen, mit denen Sie Daten anzeigen, hinzufügen, bearbeiten und löschen können.

Was Sie lernen:

  • Erstellen einer Datenbank
  • Herstellen einer Verbindung mit einer Datenbank
  • So zeigen Sie Daten auf einer Webseite an.
  • Hier erfahren Sie, wie Sie Datenbankdatensätze einfügen, aktualisieren und löschen.

Dies sind die im Artikel vorgestellten Features:

  • Arbeiten mit einer Microsoft SQL Server Compact Edition-Datenbank.
  • Arbeiten mit SQL-Abfragen.
  • Die Database-Klasse.

Im Tutorial verwendete Softwareversionen

  • ASP.NET Web Pages (Razor) 2
  • WebMatrix 2

Dieses Tutorial funktioniert auch mit WebMatrix 3. Sie können ASP.NET Web Pages 3 und Visual Studio 2013 (oder Visual Studio Express 2013 für Web) verwenden. Die Benutzeroberfläche unterscheidet sich jedoch.

Einführung in Datenbanken

Stellen Sie sich ein typisches Adressbuch vor. Für jeden Eintrag im Adressbuch (d. h. für jede Person) verfügen Sie über mehrere Informationen wie Vorname, Nachname, Adresse, E-Mail-Adresse und Telefonnummer.

Eine typische Möglichkeit zum Bild von Daten wie dieser ist eine Tabelle mit Zeilen und Spalten. In Datenbankbegriffen wird jede Zeile häufig als Datensatz bezeichnet. Jede Spalte (manchmal auch als Felder bezeichnet) enthält einen Wert für jeden Datentyp: Vorname, Nachname usw.

ID Vorname Nachname Adresse E-Mail Telefon
1 Klaus Abrus 210 100th St SE Orcas WA 98031 jim@contoso.com 555 0100
2 Terry Adams 1234 Main St. Seattle WA 99011 terry@cohowinery.com 555 0101

Für die meisten Datenbanktabellen muss die Tabelle über eine Spalte verfügen, die einen eindeutigen Bezeichner enthält, z. B. eine Kundennummer, eine Kontonummer usw. Dies wird als Primärschlüssel der Tabelle bezeichnet, und Sie verwenden ihn, um jede Zeile in der Tabelle zu identifizieren. Im Beispiel ist die ID-Spalte der Primärschlüssel für das Adressbuch.

Mit diesem grundlegenden Verständnis von Datenbanken können Sie lernen, wie Sie eine einfache Datenbank erstellen und Vorgänge wie das Hinzufügen, Ändern und Löschen von Daten ausführen.

Tipp

Relationale Datenbanken

Sie können Daten auf viele Arten speichern, einschließlich Textdateien und Kalkulationstabellen. Für die meisten geschäftlichen Verwendungen werden Daten jedoch in einer relationalen Datenbank gespeichert.

Dieser Artikel geht nicht sehr ausführlich auf Datenbanken ein. Sie können es jedoch nützlich finden, ein wenig über sie zu verstehen. In einer relationalen Datenbank werden Informationen logisch in separate Tabellen unterteilt. Beispielsweise kann eine Datenbank für eine Schule separate Tabellen für Schüler und Für Kursangebote enthalten. Die Datenbanksoftware (z. B. SQL Server) unterstützt leistungsstarke Befehle, mit denen Sie beziehungen zwischen den Tabellen dynamisch herstellen können. Beispielsweise können Sie die relationale Datenbank verwenden, um eine logische Beziehung zwischen Kursteilnehmern und Kursteilnehmern herzustellen, um einen Zeitplan zu erstellen. Das Speichern von Daten in separaten Tabellen verringert die Komplexität der Tabellenstruktur und reduziert die Notwendigkeit, redundante Daten in Tabellen beizubehalten.

Erstellen einer Datenbank

In diesem Verfahren erfahren Sie, wie Sie eine Datenbank mit dem Namen SmallBakery erstellen, indem Sie das in WebMatrix enthaltene SQL Server Compact-Datenbankentwurfstool verwenden. Obwohl Sie eine Datenbank mithilfe von Code erstellen können, ist es üblicher, die Datenbank und Datenbanktabellen mit einem Designtool wie WebMatrix zu erstellen.

  1. Starten Sie WebMatrix, und klicken Sie auf der Schnellstartseite auf Website aus Vorlage.

  2. Wählen Sie Leere Website aus, geben Sie im Feld Websitename "SmallBakery" ein, und klicken Sie dann auf OK. Die Website wird erstellt und in WebMatrix angezeigt.

  3. Klicken Sie im linken Bereich auf den Arbeitsbereich Datenbanken .

  4. Klicken Sie im Menüband auf Neue Datenbank. Eine leere Datenbank wird mit demselben Namen wie Ihre Website erstellt.

  5. Erweitern Sie im linken Bereich den Knoten SmallBakery.sdf , und klicken Sie dann auf Tabellen.

  6. Klicken Sie im Menüband auf Neue Tabelle. WebMatrix öffnet den Tabellen-Designer.

    [Screenshot: Webmatrix beim Öffnen des Tabellen-Designers.]

  7. Klicken Sie in die Spalte Name , und geben Sie "ID" ein.

  8. Wählen Sie in der Spalte Datentypdie Option int aus.

  9. Legen Sie die Optionen Ist Primärschlüssel? und Ist Identifiziert? auf Ja fest.

    Wie der Name schon sagt, teilt Is Primary Key der Datenbank mit, dass dies der Primärschlüssel der Tabelle sein wird. Is Identity weist die Datenbank an, automatisch eine ID-Nummer für jeden neuen Datensatz zu erstellen und ihm die nächste sequenzielle Zahl zuzuweisen (ab 1).

  10. Klicken Sie in die nächste Zeile. Der Editor startet eine neue Spaltendefinition.

  11. Geben Sie als Name-Wert "Name" ein.

  12. Wählen Sie unter Datentyp "nvarchar" aus, und legen Sie die Länge auf 50 fest. Der var-Teil von nvarchar teilt der Datenbank mit, dass es sich bei den Daten für diese Spalte um eine Zeichenfolge handelt, deren Größe von Datensatz zu Datensatz variieren kann. (Das Präfix n stellt national dar, was angibt, dass das Feld Zeichendaten enthalten kann, die ein beliebiges Alphabet oder Schreibsystem darstellen – d. h., dass das Feld Unicode-Daten enthält.)

  13. Legen Sie die Option Null-Werte zulassen auf Nein fest. Dadurch wird erzwungen, dass die Spalte Name nicht leer bleibt.

  14. Erstellen Sie mit diesem Prozess eine Spalte mit dem Namen Description. Legen Sie den Datentyp auf "nvarchar" und 50 für die Länge fest, und legen Sie NULL-Werte zulassen auf false fest.

  15. Erstellen Sie eine Spalte mit dem Namen Price. Legen Sie datentyp auf "money" fest , und legen Sie Null-Werte zulassen auf false fest.

  16. Nennen Sie im Feld oben die Tabelle "Product".

    Wenn Sie fertig sind, sieht die Definition wie folgt aus:

    [Screenshot zeigt, wie die Definition nach Abschluss aussehen wird.]

  17. Drücken Sie STRG+S, um die Tabelle zu speichern.

Hinzufügen von Daten zur Datenbank

Jetzt können Sie Ihrer Datenbank einige Beispieldaten hinzufügen, mit denen Sie später im Artikel arbeiten werden.

  1. Erweitern Sie im linken Bereich den Knoten SmallBakery.sdf , und klicken Sie dann auf Tabellen.

  2. Klicken Sie mit der rechten Maustaste auf die Tabelle Product, und klicken Sie dann auf Daten.

  3. Geben Sie im Bearbeitungsbereich die folgenden Datensätze ein:

    Name Beschreibung Preis
    Brot Jeden Tag frisch gebacken. 2,99
    Strawberry Shortcake Hergestellt mit Bio-Erdbeeren aus unserem Garten. 9.99
    Apfelkuchen Nur der Zweite nach dem Kreis Ihrer Mutter. 12.99
    Pekannkuchen Wenn Sie Pekanneln mögen, ist dies für Sie. 10.99
    Zitronenkuchen Hergestellt mit den besten Zitronen der Welt. 11.99
    Cupcakes Ihre Kinder und das Kind in Ihnen werden diese lieben. 7,99

    Denken Sie daran, dass Sie für die Id-Spalte nichts eingeben müssen. Wenn Sie die Id-Spalte erstellt haben, legen Sie die Is Identity-Eigenschaft auf true fest, wodurch sie automatisch ausgefüllt wird.

    Wenn Sie die Daten eingegeben haben, sieht der Tabellen-Designer wie folgt aus:

    [Screenshot zeigt, wie der Tabellen-Designer aussieht, wenn die Eingabe der Daten abgeschlossen ist.]

  4. Schließen Sie die Registerkarte, die die Datenbankdaten enthält.

Anzeigen von Daten aus einer Datenbank

Sobald Sie über eine Datenbank mit Daten verfügen, können Sie die Daten in einer ASP.NET Webseite anzeigen. Um die anzuzeigenden Tabellenzeilen auszuwählen, verwenden Sie eine SQL-Anweisung, bei der es sich um einen Befehl handelt, den Sie an die Datenbank übergeben.

  1. Klicken Sie im linken Bereich auf den Arbeitsbereich Dateien .

  2. Erstellen Sie im Stammverzeichnis der Website eine neue CSHTML-Seite namens ListProducts.cshtml.

  3. Ersetzen Sie das vorhandene Markup durch Folgendes:

    @{
    var db = Database.Open("SmallBakery");
    var selectQueryString = "SELECT * FROM Product ORDER BY Name";
 }
<!DOCTYPE html>
<html>
 <head>
   <title>Small Bakery Products</title>
   <style>
       table, th, td {
         border: solid 1px #bbbbbb;
         border-collapse: collapse;
         padding: 2px;
       }
    </style>
 </head>
 <body>
   <h1>Small Bakery Products</h1>
   <table>
       <thead>
           <tr>
               <th>Id</th>
               <th>Product</th>
               <th>Description</th>
       <th>Price</th>
           </tr>
       </thead>
       <tbody>
           @foreach(var row in db.Query(selectQueryString)){
            <tr>
               <td>@row.Id</td>
                   <td>@row.Name</td>
                   <td>@row.Description</td>
                   <td>@row.Price</td>
            </tr>
           }
       </tbody>
   </table>
 </body>
</html>

    Im ersten Codeblock öffnen Sie die Zuvor erstellte Datei SmallBakery.sdf (Datenbank). Bei Database.Open der -Methode wird davon ausgegangen, dass sich die SDF-Datei im Ordner App_Data Ihrer Website befindet. (Beachten Sie, dass Sie die Erweiterung .sdf nicht angeben müssen. Wenn Sie dies tun, funktioniert die Open Methode nicht.)

    Hinweis

    Der Ordner App_Data ist ein spezieller Ordner in ASP.NET, der zum Speichern von Datendateien verwendet wird. Weitere Informationen finden Sie weiter unten in diesem Artikel unter Herstellen einer Verbindung mit einer Datenbank .

    Anschließend stellen Sie eine Anforderung zum Abfragen der Datenbank mithilfe der folgenden SQL-Anweisung Select :

    SELECT * FROM Product ORDER BY Name

    Identifiziert in der -Anweisung Product die abzufragende Tabelle. Das * Zeichen gibt an, dass die Abfrage alle Spalten aus der Tabelle zurückgeben soll. (Sie können Spalten auch einzeln auflisten, getrennt durch Kommas, wenn Sie nur einige der Spalten anzeigen möchten.) Die Order By -Klausel gibt an, wie die Daten sortiert werden sollen– in diesem Fall nach der Spalte Name . Dies bedeutet, dass die Daten alphabetisch basierend auf dem Wert der Spalte Name für jede Zeile sortiert werden.

    Im Textkörper der Seite erstellt das Markup eine HTML-Tabelle, die zum Anzeigen der Daten verwendet wird. Innerhalb des <tbody> -Elements verwenden Sie eine foreach -Schleife, um jede Datenzeile, die von der Abfrage zurückgegeben wird, einzeln abzurufen. Für jede Datenzeile erstellen Sie eine HTML-Tabellenzeile (<tr> Element). Anschließend erstellen Sie HTML-Tabellenzellen (<td> Elemente) für jede Spalte. Jedes Mal, wenn Sie die Schleife durchlaufen, befindet sich die nächste verfügbare Zeile aus der Datenbank in der row Variablen (Sie haben dies in der foreach -Anweisung eingerichtet). Um eine einzelne Spalte aus der Zeile abzurufen, können Sie oder row.Description den Namen der gewünschten Spalte verwendenrow.Name.

  4. Führen Sie die Seite in einem Browser aus. (Stellen Sie sicher, dass die Seite im Arbeitsbereich Dateien ausgewählt ist , bevor Sie sie ausführen.) Auf der Seite wird eine Liste wie die folgende angezeigt:

    [Screenshot: Liste, die auf der Seite im Browser angezeigt wird.]

Tipp

Structured Query Language (SQL)

SQL ist eine Sprache, die in den meisten relationalen Datenbanken zum Verwalten von Daten in einer Datenbank verwendet wird. Es enthält Befehle, mit denen Sie Daten abrufen und aktualisieren können und mit denen Sie Datenbanktabellen erstellen, ändern und verwalten können. SQL unterscheidet sich von einer Programmiersprache (wie die, die Sie in WebMatrix verwenden), da bei SQL die Idee ist, dass Sie der Datenbank mitteilen, was Sie möchten, und es ist die Aufgabe der Datenbank, herauszufinden, wie die Daten abgerufen oder die Aufgabe ausgeführt werden kann. Hier finden Sie Beispiele für einige SQL-Befehle und deren Funktionsweise:

SELECT Id, Name, Price FROM Product WHERE Price > 10.00 ORDER BY Name

Dadurch werden die Spalten Id, Name und Price aus Datensätzen in der Tabelle Product abgerufen, wenn der Wert von Price größer als 10 ist, und die Ergebnisse werden in alphabetischer Reihenfolge basierend auf den Werten der Spalte Name zurückgegeben. Dieser Befehl gibt ein Resultset zurück, das die Datensätze enthält, die die Kriterien erfüllen, oder einen leeren Satz, wenn keine Datensätze übereinstimmen.

INSERT INTO Product (Name, Description, Price) VALUES ("Croissant", "A flaky delight", 1.99)

Dadurch wird ein neuer Datensatz in die Tabelle Product eingefügt, wobei die Spalte Name auf "Croissant", die Spalte Beschreibung auf "Eine schuppige Freude" und der Preis auf 1,99 festgelegt wird.

DELETE FROM Product WHERE ExpirationDate < "01/01/2008"

Dieser Befehl löscht Datensätze in der Tabelle Product , deren Spalte "Ablaufdatum" vor dem 1. Januar 2008 liegt. (Dabei wird natürlich davon ausgegangen, dass die Tabelle Product über eine solche Spalte verfügt.) Das Datum wird hier im Format MM/TT/JJJJ eingegeben, es sollte jedoch im Format eingegeben werden, das für Ihr Gebietsschema verwendet wird.

Die Insert Into Befehle und Delete geben keine Resultsets zurück. Stattdessen geben sie eine Zahl zurück, die Ihnen angibt, wie viele Datensätze vom Befehl betroffen waren.

Für einige dieser Vorgänge (wie das Einfügen und Löschen von Datensätzen) muss der Prozess, der den Vorgang anfordert, über die entsprechenden Berechtigungen in der Datenbank verfügen. Aus diesem Grund müssen Sie bei Produktionsdatenbanken häufig einen Benutzernamen und ein Kennwort angeben, wenn Sie eine Verbindung mit der Datenbank herstellen.

Es gibt Dutzende von SQL-Befehlen, aber sie folgen alle einem Muster wie diesem. Sie können SQL-Befehle verwenden, um Datenbanktabellen zu erstellen, die Anzahl der Datensätze in einer Tabelle zu zählen, Preise zu berechnen und viele weitere Vorgänge auszuführen.

Einfügen von Daten in eine Datenbank

In diesem Abschnitt wird gezeigt, wie Sie eine Seite erstellen, auf der Benutzer der Product-Datenbanktabelle ein neues Produkt hinzufügen können. Nachdem ein neuer Produktdatensatz eingefügt wurde, zeigt die Seite die aktualisierte Tabelle mithilfe der Seite ListProducts.cshtml an, die Sie im vorherigen Abschnitt erstellt haben.

Die Seite enthält eine Überprüfung, um sicherzustellen, dass die Vom Benutzer eingegebenen Daten für die Datenbank gültig sind. Code auf der Seite stellt beispielsweise sicher, dass für alle erforderlichen Spalten ein Wert eingegeben wurde.

  1. Erstellen Sie auf der Website eine neue CSHTML-Datei mit dem Namen InsertProducts.cshtml.

  2. Ersetzen Sie das vorhandene Markup durch Folgendes:

    @{
    Validation.RequireField("Name", "Product name is required.");
    Validation.RequireField("Description", "Product description is required.");
    Validation.RequireField("Price", "Product price is required.");

    var db = Database.Open("SmallBakery");
    var Name = Request.Form["Name"];
    var Description = Request.Form["Description"];
    var Price = Request.Form["Price"];

    if (IsPost && Validation.IsValid()) {
        // Define the insert query. The values to assign to the
        // columns in the Product table are defined as parameters
        // with the VALUES keyword.
        if(ModelState.IsValid) {
            var insertQuery = "INSERT INTO Product (Name, Description, Price) " +
                "VALUES (@0, @1, @2)";
            db.Execute(insertQuery, Name, Description, Price);
            // Display the page that lists products.
            Response.Redirect("~/ListProducts");
        }
    }
}

<!DOCTYPE html>
<html>
<head>
 <title>Add Products</title>
 <style type="text/css">
    label {float:left; width: 8em; text-align: right;
           margin-right: 0.5em;}
    fieldset {padding: 1em; border: 1px solid; width: 50em;}
    legend {padding: 2px 4px; border: 1px solid; font-weight:bold;}
    .validation-summary-errors {font-weight:bold; color:red;
           font-size: 11pt;}
 </style>
</head>
<body>
 <h1>Add New Product</h1>

 @Html.ValidationSummary("Errors with your submission:")

 <form method="post" action="">
   <fieldset>
     <legend>Add Product</legend>
     <div>
       <label>Name:</label>
       <input name="Name" type="text" size="50" value="@Name" />
     </div>
     <div>
       <label>Description:</label>
       <input name="Description" type="text" size="50"
           value="@Description" />
     </div>
     <div>
       <label>Price:</label>
       <input name="Price" type="text" size="50" value="@Price" />
     </div>
     <div>
       <label>&nbsp;</label>
       <input type="submit" value="Insert" class="submit" />
     </div>
   </fieldset>
 </form>
</body>
</html>

    Der Text der Seite enthält ein HTML-Formular mit drei Textfeldern, in denen Benutzer einen Namen, eine Beschreibung und einen Preis eingeben können. Wenn Benutzer auf die Schaltfläche Einfügen klicken, öffnet der Code oben auf der Seite eine Verbindung mit der Datenbank SmallBakery.sdf . Anschließend rufen Sie die Werte ab, die der Benutzer mithilfe des Request -Objekts übermittelt hat, und weisen diese Werte lokalen Variablen zu.

    Um zu überprüfen, ob der Benutzer einen Wert für jede erforderliche Spalte eingegeben hat, registrieren Sie jedes <input> Element, das Sie überprüfen möchten:

    Validation.RequireField("Name", "Product name is required.");
Validation.RequireField("Description", "Product description is required.");
Validation.RequireField("Price", "Product price is required.");

    Das Validation Hilfsprogramm überprüft, ob in jedem der felder, die Sie registriert haben, ein Wert vorhanden ist. Sie können testen, ob alle Felder die Überprüfung bestanden haben, indem Sie überprüfen Validation.IsValid(), was Sie in der Regel tun, bevor Sie die Informationen verarbeiten, die Sie vom Benutzer erhalten:

    if (IsPost && Validation.IsValid()) {
    // Process information here
}

    (Der && Operator bedeutet AND – dieser Test lautet If this a form submission AND all the fields have passed validation.)

    Wenn alle Spalten überprüft wurden (keine war leer), erstellen Sie eine SQL-Anweisung, um die Daten einzufügen, und führen sie dann wie im Folgenden gezeigt aus:

    var insertQuery =
    "INSERT INTO Product (Name, Description, Price) VALUES (@0, @1, @2)";

    Für die einzufügenden Werte schließen Sie Parameterplatzhalter (@0, , @1) @2ein.

    Hinweis

    Übergeben Sie aus Sicherheitsgründen werte immer mithilfe von Parametern an eine SQL-Anweisung, wie sie im vorherigen Beispiel sehen. Dies gibt Ihnen die Möglichkeit, die Daten des Benutzers zu überprüfen und schützt vor Versuchen, böswillige Befehle an Ihre Datenbank zu senden (manchmal auch als SQL-Einschleusungsangriffe bezeichnet).

    Um die Abfrage auszuführen, verwenden Sie diese Anweisung, und übergeben sie die Variablen, die die Werte enthalten, um die Platzhalter zu ersetzen:

    db.Execute(insertQuery, Name, Description, Price);

    Nachdem die Insert Into -Anweisung ausgeführt wurde, senden Sie den Benutzer zu der Seite, auf der die Produkte aufgeführt sind, indem Sie diese Zeile verwenden:

    Response.Redirect("~/ListProducts");

    Wenn die Überprüfung nicht erfolgreich war, überspringen Sie die Einfügung. Stattdessen haben Sie ein Hilfsprogramm auf der Seite, das die akkumulierten Fehlermeldungen (falls vorhanden) anzeigen kann:

    @Html.ValidationSummary("Errors with your submission:")

    Beachten Sie, dass der Stilblock im Markup eine CSS-Klassendefinition mit dem Namen .validation-summary-errorsenthält. Dies ist der Name der CSS-Klasse, die standardmäßig für das <div> Element verwendet wird, das validierungsfehler enthält. In diesem Fall gibt die CSS-Klasse an, dass Validierungszusammenfassungsfehler rot und fett angezeigt werden. Sie können jedoch die .validation-summary-errors Klasse definieren, um beliebige Formatierungen anzuzeigen.

Testen der Seite "Einfügen"

  1. Zeigen Sie die Seite in einem Browser an. Auf der Seite wird ein Formular angezeigt, das dem in der folgenden Abbildung gezeigten Formular ähnelt.

    [Screenshot: Formular, das in einem Browser auf der Seite angezeigt wird.]

  2. Geben Sie Werte für alle Spalten ein, aber stellen Sie sicher, dass Sie die Spalte Price leer lassen.

  3. Klicken Sie auf Einfügen. Auf der Seite wird eine Fehlermeldung angezeigt, wie in der folgenden Abbildung dargestellt. (Es wird kein neuer Datensatz erstellt.)

    [Screenshot zeigt eine Fehlermeldung.]

  4. Füllen Sie das Formular vollständig aus, und klicken Sie dann auf Einfügen. Dieses Mal wird die Seite ListProducts.cshtml angezeigt, auf der der neue Datensatz angezeigt wird.

Aktualisieren von Daten in einer Datenbank

Nachdem Daten in eine Tabelle eingegeben wurden, müssen Sie sie möglicherweise aktualisieren. In diesem Verfahren erfahren Sie, wie Sie zwei Seiten erstellen, die denen ähneln, die Sie zuvor für das Einfügen von Daten erstellt haben. Auf der ersten Seite werden Produkte angezeigt, und Benutzer können ein Produkt auswählen, das geändert werden soll. Auf der zweiten Seite können die Benutzer die Bearbeitungen vornehmen und speichern.

Hinweis

Wichtig In einer Produktionswebsite schränken Sie in der Regel ein, wer Änderungen an den Daten vornehmen darf. Informationen zum Einrichten der Mitgliedschaft und zu Möglichkeiten zum Autorisieren von Benutzern zum Ausführen von Aufgaben auf der Website finden Sie unter Hinzufügen von Sicherheit und Mitgliedschaft zu einer ASP.NET Web Pages Website.

  1. Erstellen Sie auf der Website eine neue CSHTML-Datei mit dem Namen EditProducts.cshtml.

  2. Ersetzen Sie das vorhandene Markup in der Datei durch Folgendes:

    @{
    var db = Database.Open("SmallBakery");
    var selectQueryString = "SELECT * FROM Product ORDER BY Name";

}
<!DOCTYPE html>
<html>
<head>
    <title>Edit Products</title>
    <style type="text/css">
        table, th, td {
          border: solid 1px #bbbbbb;
          border-collapse: collapse;
          padding: 2px;
        }
    </style>
</head>
<body>
    <h1>Edit Small Bakery Products</h1>
    <table>
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>Name</th>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        @foreach (var row in db.Query(selectQueryString)) {
          <tr>
            <td><a href="@Href("~/UpdateProducts", row.Id)">Edit</a></td>
            <td>@row.Name</td>
            <td>@row.Description</td>
            <td>@row.Price</td>
          </tr>
        }
      </tbody>
    </table>
</body>
</html>

    Der einzige Unterschied zwischen dieser Seite und der Seite ListProducts.cshtml von früher besteht darin, dass die HTML-Tabelle auf dieser Seite eine zusätzliche Spalte enthält, in der ein Bearbeitungslink angezeigt wird. Wenn Sie auf diesen Link klicken, gelangen Sie zur Seite UpdateProducts.cshtml (die Sie als Nächstes erstellen werden), auf der Sie den ausgewählten Datensatz bearbeiten können.

    Sehen Sie sich den Code an, der den Link Bearbeiten erstellt:

    <a href="@Href("~/UpdateProducts", row.Id)">Edit</a></td>

    Dadurch wird ein HTML-Element <a> erstellt, dessen href Attribut dynamisch festgelegt wird. Das href -Attribut gibt die Seite an, die angezeigt werden soll, wenn der Benutzer auf den Link klickt. Außerdem wird der Id Wert der aktuellen Zeile an den Link übergeben. Wenn die Seite ausgeführt wird, enthält die Seitenquelle möglicherweise Links wie die folgenden:

    <a href="UpdateProducts/1">Edit</a></td>
<a href="UpdateProducts/2">Edit</a></td>
<a href="UpdateProducts/3">Edit</a></td>

    Beachten Sie, dass das href Attribut auf UpdateProducts/nfestgelegt ist, wobei n eine Produktnummer ist. Wenn ein Benutzer auf einen dieser Links klickt, sieht die resultierende URL in etwa wie folgt aus:

    http://localhost:18816/UpdateProducts/6

    Anders ausgedrückt: Die zu bearbeitende Produktnummer wird in der URL übergeben.

  3. Zeigen Sie die Seite in einem Browser an. Die Seite zeigt die Daten in einem Format wie das folgende an:

    [Screenshot zeigt die Daten, die auf der Seite im Browser angezeigt werden.]

    Als Nächstes erstellen Sie die Seite, auf der Benutzer die Daten tatsächlich aktualisieren können. Die Updateseite enthält eine Überprüfung, um die vom Benutzer eingegebenen Daten zu überprüfen. Code auf der Seite stellt beispielsweise sicher, dass für alle erforderlichen Spalten ein Wert eingegeben wurde.

  4. Erstellen Sie auf der Website eine neue CSHTML-Datei namens UpdateProducts.cshtml.

  5. Ersetzen Sie das vorhandene Markup in der Datei durch Folgendes.

    @{
    Validation.RequireField("Name", "Product name is required.");
    Validation.RequireField("Description", "Product description is required.");
    Validation.RequireField("Price", "Product price is required.");

    var Name = "";
    var Description = "";
    var Price = Decimal.Zero;

    var ProductId  = UrlData[0];
    if (ProductId.IsEmpty()) {
         Response.Redirect("~/EditProducts");
    }

    var db = Database.Open("SmallBakery");

    if (IsPost && Validation.IsValid()) {
        var updateQueryString =
            "UPDATE Product SET Name=@0, Description=@1, Price=@2 WHERE Id=@3" ;
        Name = Request["Name"];
        Description = Request["Description"];
        Price = Request["Price"].AsDecimal();
        db.Execute(updateQueryString, Name, Description, Price, ProductId);
        Response.Redirect(@Href("~/EditProducts"));
    }
    else {
        var selectQueryString = "SELECT * FROM Product WHERE Id=@0";

        var row = db.QuerySingle(selectQueryString, ProductId);
        Name = row.Name;
        Description = row.Description;
        Price = row.Price;
    }

}

<!DOCTYPE html>
<html>
<head>
  <title>Add Products</title>
  <style type="text/css">
     label { float: left; width: 8em; text-align: right;
             margin-right: 0.5em;}
     fieldset { padding: 1em; border: 1px solid; width: 35em;}
     legend { padding: 2px 4px;  border: 1px solid; font-weight: bold;}
     .validation-summary-errors {font-weight:bold; color:red; font-size:11pt;}
  </style>
</head>
<body>
  <h1>Update Product</h1>
   @Html.ValidationSummary("Errors with your submission:")
   <form method="post" action="">
     <fieldset>
       <legend>Update Product</legend>
       <div>
         <label>Name:</label>
         <input name="Name" type="text" size="50" value="@Name" />
       </div>
       <div>
         <label>Description:</label>
         <input name="Description" type="text" size="50"
            value="@Description" />
       </div>
       <div>
          <label>Price:</label>
          <input name="Price" type="text" size="50" value="@Price" />
       </div>
       <div>
          <label>&nbsp;</label>
          <input type="submit" value="Update" class="submit" />
       </div>
    </fieldset>
  </form>
</body>
</html>

    Der Text der Seite enthält ein HTML-Formular, in dem ein Produkt angezeigt wird und in dem Benutzer es bearbeiten können. Verwenden Sie die folgende SQL-Anweisung, um das Anzuzeigende Produkt anzuzeigen:

    SELECT * FROM Product WHERE Id=@0

    Dadurch wird das Produkt ausgewählt, dessen ID mit dem im @0 Parameter übergebenen Wert übereinstimmt. (Da ID der Primärschlüssel ist und daher eindeutig sein muss, kann auf diese Weise nur ein Produktdatensatz ausgewählt werden.) Um den ID-Wert abzurufen, der an diese Select Anweisung übergeben werden soll, können Sie den Wert lesen, der als Teil der URL an die Seite übergeben wird, indem Sie die folgende Syntax verwenden:

    var ProductId  = UrlData[0];

    Um den Produktdatensatz tatsächlich abzurufen, verwenden Sie die QuerySingle -Methode, die nur einen Datensatz zurückgibt:

    var row = db.QuerySingle(selectQueryString, ProductId);

    Die einzelne Zeile wird in die row Variable zurückgegeben. Sie können Daten aus jeder Spalte abrufen und sie lokalen Variablen wie folgt zuweisen:

    var Name = row.Name;
var Description = row.Description;
var Price = row.Price;

    Im Markup für das Formular werden diese Werte automatisch in einzelnen Textfeldern angezeigt, indem eingebetteter Code wie folgt verwendet wird:

    <input name="Name" type="text" size="50" value="@Name" />

    Dieser Teil des Codes zeigt den zu aktualisierenden Produktdatensatz an. Nachdem der Datensatz angezeigt wurde, kann der Benutzer einzelne Spalten bearbeiten.

    Wenn der Benutzer das Formular übermittelt, indem er auf die Schaltfläche Aktualisieren klickt, wird der Code im if(IsPost) Block ausgeführt. Dadurch werden die Werte des Benutzers aus dem Request -Objekt abgerufen, die Werte in Variablen gespeichert und überprüft, ob jede Spalte ausgefüllt wurde. Wenn die Überprüfung erfolgreich ist, erstellt der Code die folgende SQL Update-Anweisung:

    UPDATE Product SET Name=@0, Description=@1, Price=@2, WHERE ID=@3

    In einer SQL-Anweisung Update geben Sie jede zu aktualisierende Spalte und den Wert an, auf den sie festgelegt werden soll. In diesem Code werden die Werte mithilfe der Parameterplatzhalter @0, @1, @2usw. angegeben. (Wie bereits erwähnt, sollten Sie aus Sicherheitsgründen immer Werte mithilfe von Parametern an eine SQL-Anweisung übergeben.)

    Wenn Sie die db.Execute -Methode aufrufen, übergeben Sie die Variablen, die die Werte in der Reihenfolge enthalten, die den Parametern in der SQL-Anweisung entspricht:

    db.Execute(updateQueryString, Name, Description, Price, ProductId);

    Nachdem die Update Anweisung ausgeführt wurde, rufen Sie die folgende Methode auf, um den Benutzer zurück zur Bearbeitungsseite umzuleiten:

    Response.Redirect(@Href("~/EditProducts"));

    Der Effekt ist, dass der Benutzer eine aktualisierte Auflistung der Daten in der Datenbank sieht und ein anderes Produkt bearbeiten kann.

  6. Speichern Sie die Seite.

  7. Führen Sie die Seite EditProducts.cshtml (nicht die Updateseite) aus, und klicken Sie dann auf Bearbeiten , um ein zu bearbeitende Produkt auszuwählen. Die Seite UpdateProducts.cshtml wird mit dem ausgewählten Datensatz angezeigt.

    [Screenshot zeigt die Seite

  8. Nehmen Sie eine Änderung vor, und klicken Sie auf Aktualisieren. Die Produktliste wird erneut mit Ihren aktualisierten Daten angezeigt.

Löschen von Daten in einer Datenbank

In diesem Abschnitt wird gezeigt, wie Benutzer ein Produkt aus der Product-Datenbanktabelle löschen können. Das Beispiel besteht aus zwei Seiten. Auf der ersten Seite wählen Benutzer einen zu löschenden Datensatz aus. Der zu löschende Datensatz wird dann auf einer zweiten Seite angezeigt, auf der sie bestätigen können, dass sie den Datensatz löschen möchten.

Hinweis

Wichtig In einer Produktionswebsite schränken Sie in der Regel ein, wer Änderungen an den Daten vornehmen darf. Informationen zum Einrichten der Mitgliedschaft und zu Möglichkeiten zum Autorisieren von Benutzern zum Ausführen von Aufgaben auf der Website finden Sie unter Hinzufügen von Sicherheit und Mitgliedschaft zu einer ASP.NET Web Pages Website.

  1. Erstellen Sie auf der Website eine neue CSHTML-Datei namens ListProductsForDelete.cshtml.

  2. Ersetzen Sie das vorhandene Markup durch Folgendes:

    @{
  var db = Database.Open("SmallBakery");
  var selectQueryString = "SELECT * FROM Product ORDER BY Name";
}
<!DOCTYPE html>
<html>
<head>
    <title>Delete a Product</title>
    <style>
        table, th, td {
          border: solid 1px #bbbbbb;
          border-collapse: collapse;
          padding: 2px;
        }
     </style>
</head>
<body>
  <h1>Delete a Product</h1>
  <form method="post" action="" name="form">
    <table border="1">
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>Name</th>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        @foreach (var row in db.Query(selectQueryString)) {
          <tr>
            <td><a href="@Href("~/DeleteProduct", row.Id)">Delete</a></td>
            <td>@row.Name</td>
            <td>@row.Description</td>
            <td>@row.Price</td>
          </tr>
        }
      </tbody>
    </table>
  </form>
</body>
</html>

    Diese Seite ähnelt der Seite EditProducts.cshtml von früher. Anstatt jedoch einen Bearbeiten-Link für jedes Produkt anzuzeigen, wird der Link Löschen angezeigt. Der Link Löschen wird mit dem folgenden eingebetteten Code im Markup erstellt:

    <a href="@Href("~/DeleteProduct", row.Id)">Delete</a>

    Dadurch wird eine URL erstellt, die wie folgt aussieht, wenn Benutzer auf den Link klicken:

    http://<server>/DeleteProduct/4

    Die URL ruft eine Seite namens DeleteProduct.cshtml auf (die Sie als Nächstes erstellen werden) und übergibt ihr die ID des zu löschenden Produkts (hier, 4).

  3. Speichern Sie die Datei, lassen Sie sie jedoch geöffnet.

  4. Erstellen Sie eine weitere CHTML-Datei mit dem Namen DeleteProduct.cshtml. Ersetzen Sie den vorhandenen Inhalt durch Folgendes:

    @{
  var db = Database.Open("SmallBakery");
  var ProductId = UrlData[0];
  if (ProductId.IsEmpty()) {
    Response.Redirect("~/ListProductsForDelete");
  }
  var prod = db.QuerySingle("SELECT * FROM PRODUCT WHERE ID = @0", ProductId);
  if( IsPost && !ProductId.IsEmpty()) {
    var deleteQueryString = "DELETE FROM Product WHERE Id=@0";
    db.Execute(deleteQueryString, ProductId);
    Response.Redirect("~/ListProductsForDelete");
  }
}

<!DOCTYPE html>
<html>
<head>
    <title>Delete Product</title>
</head>
<body>
  <h1>Delete Product - Confirmation</h1>
  <form method="post" action="" name="form">
    <p>Are you sure you want to delete the following product?</p>

    <p>Name: @prod.Name <br />
       Description: @prod.Description <br />
       Price: @prod.Price</p>
    <p><input type="submit" value="Delete" /></p>
  </form>
</body>
</html>

    Diese Seite wird von ListProductsForDelete.cshtml aufgerufen und ermöglicht Benutzern zu bestätigen, dass sie ein Produkt löschen möchten. Um das zu löschende Produkt auflisten zu können, erhalten Sie mithilfe des folgenden Codes die ID des zu löschenden Produkts aus der URL:

    var ProductId = UrlData[0];

    Die Seite fordert den Benutzer dann auf, auf eine Schaltfläche zu klicken, um den Datensatz tatsächlich zu löschen. Dies ist eine wichtige Sicherheitsmaßnahme: Wenn Sie vertrauliche Vorgänge auf Ihrer Website wie das Aktualisieren oder Löschen von Daten ausführen, sollten diese Vorgänge immer mit einem POST-Vorgang und nicht mit einem GET-Vorgang durchgeführt werden. Wenn Ihre Website so eingerichtet ist, dass ein Löschvorgang mithilfe eines GET-Vorgangs ausgeführt werden kann, kann jeder eine URL wie http://<server>/DeleteProduct/4 übergeben und alle gewünschten Elemente aus Ihrer Datenbank löschen. Indem Sie die Bestätigung hinzufügen und die Seite so codieren, dass der Löschvorgang nur mithilfe eines POST ausgeführt werden kann, fügen Sie Ihrer Website ein Maß an Sicherheit hinzu.

    Der eigentliche Löschvorgang wird mit dem folgenden Code ausgeführt, der zuerst bestätigt, dass es sich um einen post-Vorgang handelt und dass die ID nicht leer ist:

    if( IsPost && !ProductId.IsEmpty()) {
    var deleteQueryString = "DELETE FROM Product WHERE Id=@0";
    db.Execute(deleteQueryString, ProductId);
    Response.Redirect("~/ListProductsForDelete");
}

    Der Code führt eine SQL-Anweisung aus, die den angegebenen Datensatz löscht und den Benutzer dann zurück zur Eintragsseite umleitet.

  5. Führen Sie ListProductsForDelete.cshtml in einem Browser aus.

    [Screenshot zeigt ausgeführte Listenprodukte für delete dot CSHTML im Browser.]

  6. Klicken Sie für eines der Produkte auf den Link Löschen . Die Seite DeleteProduct.cshtml wird angezeigt, um zu bestätigen, dass Sie diesen Datensatz löschen möchten.

  7. Klicken Sie auf die Schaltfläche Löschen. Der Produktdatensatz wird gelöscht, und die Seite wird mit einem aktualisierten Produkteintrag aktualisiert.

Tipp

Herstellen einer Verbindung mit einer Datenbank

Sie können auf zwei Arten eine Verbindung mit einer Datenbank herstellen. Die erste besteht darin, die Database.Open -Methode und den Namen der Datenbankdatei anzugeben (abzüglich der SDF-Erweiterung ):

var db = Database.Open("SmallBakery");

Bei Open der -Methode wird davon ausgegangen, dass .Die sdf-Datei befindet sich im Ordner App_Data der Website. Dieser Ordner ist speziell für das Speichern von Daten konzipiert. Beispielsweise verfügt es über die entsprechenden Berechtigungen, um der Website das Lesen und Schreiben von Daten zu ermöglichen, und aus Sicherheitsgründen lässt WebMatrix keinen Zugriff auf Dateien aus diesem Ordner zu.

Die zweite Möglichkeit besteht darin, eine Verbindungszeichenfolge zu verwenden. Eine Verbindungszeichenfolge enthält Informationen über die Art der Verbindung zu einer Datenbank. Dies kann einen Dateipfad oder den Namen einer SQL Server Datenbank auf einem lokalen oder Remoteserver sowie einen Benutzernamen und ein Kennwort für die Verbindung mit diesem Server enthalten. (Wenn Sie Daten in einer zentral verwalteten Version von SQL Server speichern, z. B. auf dem Standort eines Hostinganbieters, verwenden Sie immer eine Verbindungszeichenfolge, um die Datenbankverbindungsinformationen anzugeben.)

In WebMatrix werden Verbindungszeichenfolgen normalerweise in einer XML-Datei namens Web.configgespeichert. Wie der Name schon sagt, können Sie eine Web.config-Datei im Stammverzeichnis Ihrer Website verwenden, um die Konfigurationsinformationen der Website zu speichern, einschließlich aller Verbindungszeichenfolgen, die Für Ihre Website möglicherweise erforderlich sind. Ein Beispiel für eine Verbindungszeichenfolge in einer Web.config-Datei könnte wie folgt aussehen. Hinweis $CREDENTIAL_PLACEHOLDER$ ist ein Platzhalter für das Kennwortschlüssel-Wert-Paar:

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <connectionStrings>
   <add
     name="SQLServerConnectionString"
     connectionString= "server=myServer;database=myDatabase;uid=username;$CREDENTIAL_PLACEHOLDER$"
     providerName="System.Data.SqlClient" />
  </connectionStrings>
</configuration>

Im Beispiel verweist die Verbindungszeichenfolge auf eine Datenbank in einer instance von SQL Server, die auf einem Server ausgeführt wird (im Gegensatz zu einer lokalen SDF-Datei). Sie müssen die entsprechenden Namen durch myServer und ersetzen und myDatabaseSQL Server Anmeldewerte für username und passwordangeben. (Die Werte für Benutzername und Kennwort sind nicht unbedingt identisch mit Ihren Windows-Anmeldeinformationen oder den Werten, die Ihr Hostinganbieter Ihnen für die Anmeldung bei seinen Servern angegeben hat. Wenden Sie sich an den Administrator, um die genauen Werte zu ermitteln, die Sie benötigen.)

Die Database.Open Methode ist flexibel, da Sie entweder den Namen einer SDF-Datenbankdatei oder den Namen einer Verbindungszeichenfolge übergeben können, die in der Web.config-Datei gespeichert ist. Das folgende Beispiel zeigt, wie Sie mithilfe der im vorherigen Beispiel veranschaulichten Verbindungszeichenfolge eine Verbindung mit der Datenbank herstellen:

@{
    var db = Database.Open("SQLServerConnectionString");
}

Wie bereits erwähnt, können Sie mit der Database.Open Methode entweder einen Datenbanknamen oder eine Verbindungszeichenfolge übergeben, und es wird herausgefunden, welcher verwendet werden soll. Dies ist sehr nützlich, wenn Sie Ihre Website bereitstellen (veröffentlichen). Sie können eine SDF-Datei im Ordner App_Data verwenden, wenn Sie Ihre Website entwickeln und testen. Wenn Sie Dann Ihre Website auf einen Produktionsserver verschieben, können Sie eine Verbindungszeichenfolge in der Web.config-Datei verwenden, die den gleichen Namen wie Ihre SDF-Datei hat, aber auf die Datenbank des Hostinganbieters verweist – alles, ohne Ihren Code ändern zu müssen.

Wenn Sie schließlich direkt mit einer Verbindungszeichenfolge arbeiten möchten, können Sie die Database.OpenConnectionString -Methode aufrufen und ihr die tatsächliche Verbindungszeichenfolge übergeben, anstatt nur den Namen einer Zeichenfolge in der Web.config-Datei . Dies kann in Situationen nützlich sein, in denen Sie aus irgendeinem Grund keinen Zugriff auf die Verbindungszeichenfolge (oder die darin enthaltenen Werte, z . B. den SDF-Dateinamen ) haben, bis die Seite ausgeführt wird. Für die meisten Szenarien können Sie jedoch wie in diesem Artikel beschrieben verwenden Database.Open .

Zusätzliche Ressourcen