Inleiding in het werken met een database in ASP.NET-webpagina's (Razor)-sites

door Tom FitzMacken

In dit artikel wordt beschreven hoe u microsoft WebMatrix-hulpprogramma's gebruikt om een database te maken op een website van ASP.NET Webpagina's (Razor) en hoe u pagina's maakt waarmee u gegevens kunt weergeven, toevoegen, bewerken en verwijderen.

Wat u leert:

• Een database maken.
• Verbinding maken met een database.
• Gegevens weergeven op een webpagina.
• Databaserecords invoegen, bijwerken en verwijderen.

Dit zijn de functies die in het artikel worden geïntroduceerd:

• Werken met een Microsoft SQL Server Compact Edition-database.
• Werken met SQL-query's.
• De Database klas.

Softwareversies die in de zelfstudie worden gebruikt

• ASP.NET Webpagina's (Razor) 2
• WebMatrix 2

Deze zelfstudie werkt ook met WebMatrix 3. U kunt ASP.NET webpagina's 3 en Visual Studio 2013 (of Visual Studio Express 2013 voor web) gebruiken; de gebruikersinterface is echter anders.

Inleiding tot databases

Stel je een typisch adresboek voor. Voor elke vermelding in het adresboek (dat wil gezegd, voor elke persoon) hebt u verschillende gegevens, zoals voornaam, achternaam, adres, e-mailadres en telefoonnummer.

Een typische manier om gegevens als deze weer te geven, is als een tabel met rijen en kolommen. In databasetermen wordt elke rij vaak een record genoemd. Elke kolom (ook wel velden genoemd) bevat een waarde voor elk type gegevens: voornaam, achternaam, enzovoort.

Voor de meeste databasetabellen moet de tabel een kolom hebben die een unieke id bevat, zoals een klantnummer, rekeningnummer, enzovoort. Dit wordt de primaire sleutel van de tabel genoemd en u gebruikt deze om elke rij in de tabel te identificeren. In het voorbeeld is de kolom ID de primaire sleutel voor het adresboek.

Met deze basiskennis van databases kunt u leren hoe u een eenvoudige database maakt en bewerkingen uitvoert, zoals het toevoegen, wijzigen en verwijderen van gegevens.

Een database maken

In deze procedure ziet u hoe u een database met de naam SmallBakery maakt met behulp van het ontwerpprogramma voor SQL Server Compact Database dat is opgenomen in WebMatrix. Hoewel u een database met code kunt maken, is het gebruikelijker om de database- en databasetabellen te maken met behulp van een ontwerphulpprogramma zoals WebMatrix.

1. Start WebMatrix en klik op de Snelle startpagina op Site vanuit sjabloon.

2. Selecteer Lege site en voer in het vak Sitenaam 'SmallBakery' in en klik op OK. De site wordt gemaakt en weergegeven in WebMatrix.

3. Klik in het linkerdeelvenster op de werkruimte Databases .

4. Klik op het lint op Nieuwe database. Er wordt een lege database gemaakt met dezelfde naam als uw site.

5. Vouw in het linkerdeelvenster het knooppunt SmallBakery.sdf uit en klik vervolgens op Tabellen.

6. Klik op het lint op Nieuwe tabel. WebMatrix opent de ontwerpfunctie voor tabellen.

   

7. Klik in de kolom Naam en voer 'Id' in.

8. Selecteer in de kolom Gegevenstypede optie Int.

9. Stel de opties Is Primaire sleutel? en Is Identiteit? in op Ja.

   Zoals de naam al aangeeft, Is Primaire Sleutel geeft aan de database door dat dit de primaire sleutel van de tabel is. Is Identity geeft aan dat de database automatisch een ID-nummer voor elk nieuw record moet maken en dit het volgende opeenvolgende nummer moet toewijzen (startend met 1).

10. Klik in de volgende rij. De editor start een nieuwe kolomdefinitie.

11. Voer voor de waarde Naam 'Naam' in.

12. Voor gegevenstype kiest u 'nvarchar' en stelt u de lengte in op 50. Het var-gedeelte van nvarchar de database geeft aan dat de gegevens voor deze kolom een tekenreeks zijn waarvan de grootte kan variëren van record tot record. (Het n-voorvoegsel staat voor nationaal, waarmee wordt aangegeven dat het veld tekengegevens kan bevatten die elk alfabet of schrijfsysteem vertegenwoordigen, dat wil zeggen dat het veld Unicode-gegevens bevat.)

13. Stel de optie Null-waarden toestaan in op Nee. Hiermee wordt afgedwongen dat de kolom Naam niet leeg blijft.

14. Maak met hetzelfde proces een kolom met de naam Description. Stel het gegevenstype in op 'nvarchar' en 50 voor de lengte en stel Nulls in op False.

15. Maak een kolom met de naam Price. Stel het gegevenstype in op "money" en stel Nullwaarden toestaan in op false.

16. Geef in het vak bovenaan de tabel de naam Product.

    Wanneer u klaar bent, ziet de definitie er als volgt uit:

    

17. Druk op Ctrl+S om de tabel op te slaan.

Gegevens toevoegen aan de database

U kunt nu enkele voorbeeldgegevens toevoegen aan uw database waarmee u verderop in het artikel gaat werken.

1. Vouw in het linkerdeelvenster het knooppunt SmallBakery.sdf uit en klik vervolgens op Tabellen.

2. Klik met de rechtermuisknop op de tabel Product en klik vervolgens op Gegevens.

3. Voer in het bewerkingsvenster de volgende records in:

   Naam	Beschrijving	Prijs
   Brood	Elke dag vers gebakken.	2.99
   Aardbeien Shortcake	Gemaakt met biologische aardbeien uit onze tuin.	9.99
   Appeltaart	Net niet zo goed als de taart van je moeder.	12,99
   Pecantaart	Als je van pecans houdt, is dit voor jou.	10.99
   Citroentaart	Gemaakt met de beste citroenen ter wereld.	11.99
   Cupcakes	Je kinderen en het kind in je zullen van deze houden.	7.99

   Houd er rekening mee dat u niets hoeft in te voeren voor de kolom Id . Wanneer u de kolom Id hebt gemaakt, stelt u de eigenschap Is Identity in op True, waardoor deze automatisch wordt ingevuld.

   Wanneer u klaar bent met het invoeren van de gegevens, ziet de ontwerpfunctie voor tabellen er als volgt uit:

   

4. Sluit het tabblad met de databasegegevens.

Gegevens uit een database weergeven

Zodra u een database met gegevens hebt, kunt u de gegevens weergeven op een ASP.NET webpagina. Als u de tabelrijen wilt selecteren die moeten worden weergegeven, gebruikt u een SQL-instructie. Dit is een opdracht die u doorgeeft aan de database.

1. Klik in het linkerdeelvenster op de werkruimte Bestanden .

2. Maak in de hoofdmap van de website een nieuwe CSHTML-pagina met de naam ListProducts.cshtml.

3. Vervang de bestaande opmaak door het volgende:

   @{
       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>
   

   In het eerste codeblok opent u het SmallBakery.sdf-bestand (database) dat u eerder hebt gemaakt. Bij de Database.Open methode wordt ervan uitgegaan dat het SDF-bestand zich in de map App_Data van uw website bevindt. (U hoeft de extensie .sdf niet op te geven. Als u dat wel doet, werkt de Open methode niet.)

   Opmerking

   De map App_Data is een speciale map in ASP.NET die wordt gebruikt voor het opslaan van gegevensbestanden. Zie Verbinding maken met een database verderop in dit artikel voor meer informatie.

   Vervolgens doet u een aanvraag om een query uit te voeren op de database met behulp van de volgende SQL-instructie Select :

   SELECT * FROM Product ORDER BY Name
   

   Identificeert in de instructie Product de tabel waarop de query moet worden uitgevoerd. Het * teken geeft aan dat de query alle kolommen uit de tabel moet retourneren. (U kunt kolommen ook afzonderlijk weergeven, gescheiden door komma's, als u slechts enkele kolommen wilt zien.) De Order By component geeft aan hoe de gegevens moeten worden gesorteerd, in dit geval op de kolom Naam . Dit betekent dat de gegevens alfabetisch worden gesorteerd op basis van de waarde van de kolom Naam voor elke rij.

   In de hoofdtekst van de pagina maakt de markering een HTML-tabel die wordt gebruikt om de gegevens weer te geven. In het <tbody> element gebruikt u een foreach lus om elke gegevensrij die wordt geretourneerd door de query afzonderlijk op te halen. Voor elke gegevensrij maakt u een HTML-tabelrij (<tr> element). Vervolgens maakt u HTML-tabelcellen (<td> elementen) voor elke kolom. Telkens wanneer u de lus doorloopt, bevindt de volgende beschikbare rij van de database zich in de row variabele (u stelt deze in de foreach instructie in). Om een afzonderlijke kolom uit de rij op te halen, kunt u row.Name of row.Description gebruiken, of welke naam de gewenste kolom ook heeft.

4. Voer de pagina uit in een browser. (Zorg ervoor dat de pagina is geselecteerd in de werkruimte Bestanden voordat u deze uitvoert.) Op de pagina wordt een lijst weergegeven die er ongeveer als volgt uitziet:

   

Gegevens invoegen in een database

In deze sectie ziet u hoe u een pagina maakt waarmee gebruikers een nieuw product kunnen toevoegen aan de tabel Productdatabase . Nadat een nieuwe productrecord is ingevoegd, wordt de bijgewerkte tabel weergegeven op de pagina ListProducts.cshtml die u in de vorige sectie hebt gemaakt.

De pagina bevat validatie om ervoor te zorgen dat de gegevens die de gebruiker invoert geldig zijn voor de database. Code op de pagina zorgt er bijvoorbeeld voor dat er een waarde is ingevoerd voor alle vereiste kolommen.

1. Maak op de website een nieuw CSHTML-bestand met de naam InsertProducts.cshtml.

2. Vervang de bestaande opmaak door het volgende:

   @{
       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>
   

   De hoofdtekst van de pagina bevat een HTML-formulier met drie tekstvakken waarmee gebruikers een naam, beschrijving en prijs kunnen invoeren. Wanneer gebruikers op de knop Invoegen klikken, wordt met de code boven aan de pagina een verbinding met de SmallBakery.sdf-database geopend. Vervolgens haalt u de waarden op die de gebruiker heeft verzonden met behulp van het Request object en wijst u deze waarden toe aan lokale variabelen.

   Als u wilt valideren dat de gebruiker voor elke vereiste kolom een waarde heeft ingevoerd, registreert u elk <input> element dat u wilt valideren:

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

   De Validation helper controleert of er een waarde is in elk van de velden die u hebt geregistreerd. U kunt testen of alle velden de validatie hebben doorstaan door Validation.IsValid() te controleren, wat u meestal doet voordat u de van de gebruiker verkregen gegevens verwerkt.

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

   (De && operator betekent AND— deze test is Als dit een formulierinzending is en alle velden validatie hebben doorstaan.)

   Als alle kolommen zijn gevalideerd (geen lege kolommen), gaat u verder met het maken van een SQL-instructie om de gegevens in te voegen en deze vervolgens uit te voeren zoals hierna wordt weergegeven:

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

   Als u de waarden wilt invoegen, neemt u tijdelijke aanduidingen voor parameters (@0, @1, @2) op.

   Opmerking

   Als voorzorgsmaatregel geeft u altijd waarden door aan een SQL-instructie met behulp van parameters, zoals u in het vorige voorbeeld ziet. Dit geeft u de kans om de gegevens van de gebruiker te valideren, plus het helpt u te beschermen tegen pogingen om schadelijke opdrachten naar uw database te verzenden (ook wel SQL-injectieaanvallen genoemd).

   Om de query uit te voeren, gebruikt u deze instructie waarbij u de variabelen doorgeeft die de waarden bevatten om de tijdelijke aanduidingen te vervangen.

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

   Nadat de Insert Into instructie is uitgevoerd, stuurt u de gebruiker naar de pagina met de producten met behulp van deze regel:

   Response.Redirect("~/ListProducts");
   

   Als de validatie niet is geslaagd, slaat u de insertie over. In plaats daarvan hebt u een helper op de pagina waarmee de samengevoegde foutberichten (indien van toepassing) kunnen worden weergegeven:

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

   U ziet dat het stijlblok in de opmaak een CSS-klassedefinitie bevat met de naam .validation-summary-errors. Dit is de naam van de CSS-klasse die standaard wordt gebruikt voor het <div> element dat validatiefouten bevat. In dit geval geeft de CSS-klasse aan dat fouten in het validatieoverzicht rood en vet worden weergegeven, maar u kunt de .validation-summary-errors klasse definiëren om elke gewenste opmaak weer te geven.

De Invoegen-pagina testen

1. Bekijk de pagina in een browser. Op de pagina wordt een formulier weergegeven dat vergelijkbaar is met het formulier dat in de volgende afbeelding wordt weergegeven.

   

2. Voer waarden in voor alle kolommen, maar zorg ervoor dat u de kolom Prijs leeg laat.

3. Klik op Invoegen. Op de pagina wordt een foutbericht weergegeven, zoals wordt weergegeven in de volgende afbeelding. (Er wordt geen nieuwe record gemaakt.)

   

4. Vul het formulier volledig in en klik vervolgens op Invoegen. Deze keer wordt de pagina ListProducts.cshtml weergegeven en wordt de nieuwe record weergegeven.

Gegevens in een database bijwerken

Nadat gegevens zijn ingevoerd in een tabel, moet u deze mogelijk bijwerken. In deze procedure ziet u hoe u twee pagina's maakt die vergelijkbaar zijn met de pagina's die u eerder hebt gemaakt voor het invoegen van gegevens. Op de eerste pagina worden producten weergegeven en kunnen gebruikers er een selecteren om te wijzigen. Op de tweede pagina kunnen de gebruikers de wijzigingen daadwerkelijk aanbrengen en opslaan.

1. Maak op de website een nieuw CSHTML-bestand met de naam EditProducts.cshtml.

2. Vervang de bestaande opmaak in het bestand door het volgende:

   @{
       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>
   

   Het enige verschil tussen deze pagina en de page ListProducts.cshtml van eerder is dat de HTML-tabel op deze pagina een extra kolom bevat waarin een koppeling Bewerken wordt weergegeven. Wanneer u op deze koppeling klikt, gaat u naar de pagina UpdateProducts.cshtml (die u vervolgens maakt), waar u de geselecteerde record kunt bewerken.

   Bekijk de code waarmee de koppeling Bewerken wordt gemaakt:

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

   Hiermee maakt u een HTML-element <a> waarvan href het kenmerk dynamisch wordt ingesteld. Het href kenmerk geeft de pagina weer die moet worden weergegeven wanneer de gebruiker op de koppeling klikt. De waarde Id van de huidige rij wordt ook doorgegeven aan de koppeling. Wanneer de pagina wordt uitgevoerd, bevat de paginabron mogelijk koppelingen zoals deze:

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

   U ziet dat het href kenmerk is ingesteld op UpdateProducts/n, waarbij n een productnummer is. Wanneer een gebruiker op een van deze koppelingen klikt, ziet de resulterende URL er ongeveer als volgt uit:

   http://localhost:18816/UpdateProducts/6

   Met andere woorden, het productnummer dat moet worden bewerkt, wordt doorgegeven in de URL.

3. Bekijk de pagina in een browser. Op de pagina worden de gegevens in een indeling als volgt weergegeven:

   

   Vervolgens maakt u de pagina waarmee gebruikers de gegevens daadwerkelijk kunnen bijwerken. De updatepagina bevat validatie om de gegevens te valideren die de gebruiker invoert. Code op de pagina zorgt er bijvoorbeeld voor dat er een waarde is ingevoerd voor alle vereiste kolommen.

4. Maak op de website een nieuw CSHTML-bestand met de naam UpdateProducts.cshtml.

5. Vervang de bestaande opmaak in het bestand door het volgende.

   @{
       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>
   

   De hoofdtekst van de pagina bevat een HTML-formulier waarin een product wordt weergegeven en waar gebruikers het kunnen bewerken. Als u wilt dat het product wordt weergegeven, gebruikt u deze SQL-instructie:

   SELECT * FROM Product WHERE Id=@0
   

   Hiermee selecteert u het product waarvan de id overeenkomt met de waarde die wordt doorgegeven in de @0 parameter. (Omdat id de primaire sleutel is en daarom uniek moet zijn, kan er op deze manier slechts één productrecord worden geselecteerd.) Als u de id-waarde wilt ophalen die aan deze Select instructie moet worden doorgegeven, kunt u de waarde lezen die als onderdeel van de URL wordt doorgegeven aan de pagina met behulp van de volgende syntaxis:

   var ProductId  = UrlData[0];
   

   Als u de productrecord daadwerkelijk wilt ophalen, gebruikt u de QuerySingle methode, die slechts één record retourneert:

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

   De enkele rij wordt geretourneerd in de row variabele. U kunt gegevens uit elke kolom halen en deze als volgt toewijzen aan lokale variabelen:

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

   In de markeringen voor het formulier worden deze waarden automatisch weergegeven in afzonderlijke tekstvakken met behulp van ingesloten code zoals hieronder:

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

   In dat deel van de code wordt het productrecord weergegeven dat moet worden bijgewerkt. Zodra de record is weergegeven, kan de gebruiker afzonderlijke kolommen bewerken.

   Wanneer de gebruiker het formulier verzendt door op de knop Bijwerken te klikken, wordt de code in het if(IsPost) blok uitgevoerd. Hiermee worden de waarden van de gebruiker opgehaald uit het Request object, worden de waarden opgeslagen in variabelen en wordt gecontroleerd of elke kolom is ingevuld. Als de validatie is geslaagd, maakt de code de volgende SQL Update-instructie:

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

   In een SQL-instructie Update geeft u elke kolom op die moet worden bijgewerkt en de waarde waarop u deze wilt instellen. In deze code worden de waarden opgegeven met de parameterplaatsaanduidingen @0, @1, @2 en zo verder. (Zoals eerder vermeld, moet u voor beveiliging altijd waarden doorgeven aan een SQL-instructie met behulp van parameters.)

   Wanneer u de db.Execute methode aanroept, geeft u de variabelen door die de waarden bevatten in de volgorde die overeenkomt met de parameters in de SQL-instructie:

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

   Nadat de Update instructie is uitgevoerd, roept u de volgende methode aan om de gebruiker terug te leiden naar de bewerkingspagina:

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

   Het effect is dat de gebruiker een bijgewerkte lijst met de gegevens in de database ziet en een ander product kan bewerken.

6. Sla de pagina op.

7. Voer de pagina EditProducts.cshtml (niet de updatepagina) uit en klik vervolgens op Bewerken om een product te selecteren dat u wilt bewerken. De pagina UpdateProducts.cshtml wordt weergegeven, met de record die u hebt geselecteerd.

   

8. Breng een wijziging aan en klik op Bijwerken. De lijst met producten wordt opnieuw weergegeven met uw bijgewerkte gegevens.

Gegevens verwijderen in een database

In deze sectie ziet u hoe gebruikers een product kunnen verwijderen uit de tabel Productdatabase . Het voorbeeld bestaat uit twee pagina's. Op de eerste pagina selecteren gebruikers een record die u wilt verwijderen. De record die moet worden verwijderd, wordt vervolgens weergegeven op een tweede pagina, zodat ze kunnen bevestigen dat ze de record willen verwijderen.

1. Maak op de website een nieuw CSHTML-bestand met de naam ListProductsForDelete.cshtml.

2. Vervang de bestaande opmaak door het volgende:

   @{
     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>
   

   Deze pagina is vergelijkbaar met de pagina EditProducts.cshtml van eerder. In plaats van een koppeling Bewerken voor elk product weer te geven, wordt er echter een koppeling Verwijderen weergegeven. De koppeling Verwijderen wordt gemaakt met behulp van de volgende ingesloten code in de markering:

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

   Hiermee maakt u een URL die er als volgt uitziet wanneer gebruikers op de koppeling klikken:

   http://<server>/DeleteProduct/4

   De URL roept een pagina aan met de naam DeleteProduct.cshtml (die u hierna gaat maken) en geeft deze door aan de id van het product dat moet worden verwijderd (hier, 4).

3. Sla het bestand op, maar laat het open.

4. Maak een ander CHTML-bestand met de naam DeleteProduct.cshtml. Vervang de bestaande inhoud door het volgende:

   @{
     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>
   

   Deze pagina wordt aangeroepen door ListProductsForDelete.cshtml en stelt gebruikers in staat om te bevestigen dat ze een product willen verwijderen. Als u het product wilt weergeven dat moet worden verwijderd, krijgt u de id van het product dat u uit de URL wilt verwijderen met behulp van de volgende code:

   var ProductId = UrlData[0];
   

   De pagina vraagt de gebruiker vervolgens op een knop te klikken om de record daadwerkelijk te verwijderen. Dit is een belangrijke beveiligingsmaatregel: wanneer u gevoelige bewerkingen uitvoert op uw website, zoals het bijwerken of verwijderen van gegevens, moeten deze bewerkingen altijd worden uitgevoerd met een POST-bewerking, niet met een GET-bewerking. Als uw site zo is ingesteld dat een verwijderbewerking kan worden uitgevoerd met behulp van een GET-bewerking, kan iedereen een URL doorgeven zoals http://<server>/DeleteProduct/4 en alles verwijderen wat ze willen uit uw database. Door de bevestiging en codering van de pagina toe te voegen, zodat de verwijdering alleen kan worden uitgevoerd met behulp van een POST, voegt u een beveiligingsmaatregel toe aan uw site.

   De werkelijke verwijderbewerking wordt uitgevoerd met behulp van de volgende code, die eerst bevestigt dat dit een postbewerking is en dat de id niet leeg is:

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

   De code voert een SQL-instructie uit waarmee de opgegeven record wordt verwijderd en de gebruiker vervolgens wordt omgeleid naar de vermeldingspagina.

5. Voer ListProductsForDelete.cshtml uit in een browser.

   

6. Klik op de koppeling Verwijderen voor een van de producten. De pagina DeleteProduct.cshtml wordt weergegeven om te bevestigen dat u die record wilt verwijderen.

7. Klik op de knop Verwijderen. De productrecord wordt verwijderd en de pagina wordt vernieuwd met een bijgewerkte productvermelding.

<?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>

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

Aanvullende bronnen

• SQL Server Compact
• Verbinding maken met een SQL Server- of MySQL-database in WebMatrix
• Gebruikersinvoer valideren op ASP.NET-webpaginasites