Présentation de l’utilisation d’une base de données dans les sites pages Web ASP.NET (Razor)

par Tom FitzMacken

Cet article explique comment utiliser les outils Microsoft WebMatrix pour créer une base de données dans un site web pages Web ASP.NET (Razor) et comment créer des pages qui vous permettent d’afficher, d’ajouter, de modifier et de supprimer des données.

Ce que vous allez apprendre :

• Comment créer une base de données.
• Comment se connecter à une base de données.
• Comment afficher des données dans une page web.
• Comment insérer, mettre à jour et supprimer des enregistrements de base de données.

Voici les fonctionnalités présentées dans l’article :

• Utilisation d’une base de données Microsoft SQL Server Compact Edition.
• Utilisation des requêtes SQL.
• La classe Database.

Versions logicielles utilisées dans le tutoriel

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

Ce tutoriel fonctionne également avec WebMatrix 3. Vous pouvez utiliser les pages Web ASP.NET 3 et Visual Studio 2013 (ou Visual Studio Express 2013 pour le web). Toutefois, l’interface utilisateur sera différente.

Présentation des bases de données

Imaginez un carnet d’adresses classique. Pour chaque entrée dans le carnet d’adresses (c’est-à-dire, pour chaque personne), vous disposez de plusieurs informations telles que le prénom, le nom, l’adresse, l’adresse e-mail et le numéro de téléphone.

Une façon classique d’imager des données comme celle-ci est sous la forme d’un tableau avec des lignes et des colonnes. En termes de base de données, chaque ligne est souvent appelée enregistrement. Chaque colonne (parfois appelée champs) contient une valeur pour chaque type de données : prénom, nom, etc.

Pour la plupart des tables de base de données, la table doit avoir une colonne qui contient un identificateur unique, comme un numéro de client, un numéro de compte, etc. Il s’agit de la clé primaire de la table et vous l’utilisez pour identifier chaque ligne de la table. Dans l’exemple, la colonne ID est la clé primaire du carnet d’adresses.

Avec cette compréhension de base des bases de données, vous êtes prêt à apprendre à créer une base de données simple et à effectuer des opérations telles que l’ajout, la modification et la suppression de données.

Création d’une base de données

Cette procédure vous montre comment créer une base de données nommée SmallBakery à l’aide de l’outil de conception de base de données SQL Server Compact inclus dans WebMatrix. Bien que vous puissiez créer une base de données à l’aide de code, il est plus courant de créer la base de données et les tables de base de données à l’aide d’un outil de conception comme WebMatrix.

1. Démarrez WebMatrix et, dans la page Démarrage rapide, cliquez sur Site à partir du modèle.

2. Sélectionnez Site vide, puis dans la zone Nom du site , entrez « SmallBakery », puis cliquez sur OK. Le site est créé et affiché dans WebMatrix.

3. Dans le volet gauche, cliquez sur l’espace de travail Bases de données .

4. Dans le ruban, cliquez sur Nouvelle base de données. Une base de données vide est créée avec le même nom que votre site.

5. Dans le volet gauche, développez le nœud SmallBakery.sdf , puis cliquez sur Tables.

6. Dans le ruban, cliquez sur Nouvelle table. WebMatrix ouvre le concepteur de tables.

   

7. Cliquez dans la colonne Nom et entrez « Id ».

8. Dans la colonne Type de données , sélectionnez int.

9. Définissez les options Is Primary Key ? et Is Identifier ? sur Oui.

   Comme son nom l’indique, Is Primary Key indique à la base de données qu’il s’agit de la clé primaire de la table. Is Identity indique à la base de données de créer automatiquement un numéro d’ID pour chaque nouvel enregistrement et de lui attribuer le numéro séquentiel suivant (à partir de 1).

10. Cliquez dans la ligne suivante. L’éditeur démarre une nouvelle définition de colonne.

11. Pour la valeur Name, entrez « Name ».

12. Pour Type de données, choisissez « nvarchar » et définissez la longueur sur 50. La partie var de indique à la base de nvarchar données que les données de cette colonne seront une chaîne dont la taille peut varier d’un enregistrement à l’autre. (Le préfixe n représente national, indiquant que le champ peut contenir des données de caractères qui représentent n’importe quel alphabet ou système d’écriture, c’est-à-dire que le champ contient des données Unicode.)

13. Définissez l’option Autoriser les valeurs Null surNon. Cela garantit que la colonne Nom n’est pas vide.

14. À l’aide de ce même processus, créez une colonne nommée Description. Définissez Type de données sur « nvarchar » et 50 pour la longueur, puis définissez Allow Nulls sur false.

15. Créez une colonne nommée Price. Définissez Type de données sur « money » et définissez Allow Nulls sur false.

16. Dans la zone située en haut, nommez la table « Product ».

    Lorsque vous avez terminé, la définition se présente comme suit :

    

17. Appuyez sur Ctrl+S pour enregistrer la table.

Ajout de données à la base de données

Vous pouvez maintenant ajouter des exemples de données à votre base de données que vous allez utiliser plus loin dans l’article.

1. Dans le volet gauche, développez le nœud SmallBakery.sdf , puis cliquez sur Tables.

2. Cliquez avec le bouton droit sur la table Product, puis cliquez sur Données.

3. Dans le volet d’édition, entrez les enregistrements suivants :

   Nom	Description	Price
   Pain	Cuit frais tous les jours.	2.99
   Shortcake à la fraise	Fait avec des fraises biologiques de notre jardin.	9.99
   Tarte aux	Juste après la tarte de votre mère.	12,99
   Tarte aux pacanes	Si vous aimez les pacanes, c’est pour vous.	10.99
   Tarte au citron	Fabriqué avec les meilleurs citrons du monde.	11.99
   Petits gâteaux	Vos enfants et l’enfant en vous adoreront.	7.99

   N’oubliez pas que vous n’avez rien à entrer pour la colonne Id . Lorsque vous avez créé la colonne Id , vous définissez sa propriété Is Identity sur true, ce qui entraîne sa remplissage automatique.

   Lorsque vous avez terminé d’entrer les données, le concepteur de tables se présente comme suit :

   

4. Fermez l’onglet qui contient les données de la base de données.

Affichage des données d’une base de données

Une fois que vous avez une base de données contenant des données, vous pouvez afficher les données dans une page web ASP.NET. Pour sélectionner les lignes de table à afficher, vous utilisez une instruction SQL, qui est une commande que vous passez à la base de données.

1. Dans le volet gauche, cliquez sur l’espace de travail Fichiers .

2. À la racine du site web, créez une page CSHTML nommée ListProducts.cshtml.

3. Remplacez le balisage existant par ce qui suit :

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

   Dans le premier bloc de code, vous ouvrez le fichier SmallBakery.sdf (base de données) que vous avez créé précédemment. La Database.Open méthode suppose que le fichier .sdf se trouve dans le dossier App_Data de votre site web. (Notez que vous n’avez pas besoin de spécifier l’extension .sdf ; en fait, si c’est le cas, la Open méthode ne fonctionnera pas.)

   Notes

   Le dossier App_Data est un dossier spécial dans ASP.NET utilisé pour stocker des fichiers de données. Pour plus d’informations, consultez Connexion à une base de données plus loin dans cet article.

   Vous effectuez ensuite une requête pour interroger la base de données à l’aide de l’instruction SQL Select suivante :

   SELECT * FROM Product ORDER BY Name
   

   Dans l’instruction , Product identifie la table à interroger. Le * caractère spécifie que la requête doit retourner toutes les colonnes de la table. (Vous pouvez également répertorier les colonnes individuellement, séparées par des virgules, si vous souhaitez voir uniquement certaines des colonnes.) La Order By clause indique comment les données doivent être triées , dans ce cas, par la colonne Nom . Cela signifie que les données sont triées par ordre alphabétique en fonction de la valeur de la colonne Nom pour chaque ligne.

   Dans le corps de la page, le balisage crée une table HTML qui sera utilisée pour afficher les données. À l’intérieur de l’élément <tbody> , vous utilisez une foreach boucle pour obtenir individuellement chaque ligne de données retournée par la requête. Pour chaque ligne de données, vous créez une ligne de table HTML (<tr> élément ). Ensuite, vous créez des cellules de tableau HTML (<td> éléments) pour chaque colonne. Chaque fois que vous parcourez la boucle, la ligne disponible suivante de la base de données se trouve dans la row variable (vous la configurez dans l’instruction foreach ). Pour obtenir une colonne individuelle à partir de la ligne, vous pouvez utiliser row.Name ou row.Description ou le nom de la colonne souhaitée.

4. Exécutez la page dans un navigateur. (Vérifiez que la page est sélectionnée dans l’espace de travail Fichiers avant de l’exécuter.) La page affiche une liste semblable à ce qui suit :

   

Insertion de données dans une base de données

Cette section montre comment créer une page qui permet aux utilisateurs d’ajouter un nouveau produit à la table de base de données Product . Une fois qu’un nouvel enregistrement produit est inséré, la page affiche la table mise à jour à l’aide de la page ListProducts.cshtml que vous avez créée dans la section précédente.

La page inclut une validation pour s’assurer que les données que l’utilisateur entre sont valides pour la base de données. Par exemple, le code dans la page garantit qu’une valeur a été entrée pour toutes les colonnes requises.

1. Dans le site web, créez un fichier CSHTML nommé InsertProducts.cshtml.

2. Remplacez le balisage existant par ce qui suit :

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

   Le corps de la page contient un formulaire HTML avec trois zones de texte qui permettent aux utilisateurs d’entrer un nom, une description et un prix. Lorsque les utilisateurs cliquent sur le bouton Insérer , le code en haut de la page ouvre une connexion à la base de données SmallBakery.sdf . Vous obtenez ensuite les valeurs que l’utilisateur a envoyées à l’aide de l’objet Request et vous affectez ces valeurs aux variables locales.

   Pour vérifier que l’utilisateur a entré une valeur pour chaque colonne requise, vous inscrivez chaque <input> élément que vous souhaitez valider :

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

   L’assistance Validation vérifie qu’il existe une valeur dans chacun des champs que vous avez inscrits. Vous pouvez tester si tous les champs ont réussi la validation en vérifiant Validation.IsValid(), ce que vous faites généralement avant de traiter les informations que vous obtenez de l’utilisateur :

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

   (L’opérateur && signifie ET : ce test est Si il s’agit d’une soumission de formulaire ET que tous les champs ont réussi la validation.)

   Si toutes les colonnes ont été validées (aucune n’était vide), créez une instruction SQL pour insérer les données, puis exécutez-la comme indiqué ci-dessous :

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

   Pour les valeurs à insérer, vous devez inclure des espaces réservés de paramètre (@0, @1, @2).

   Notes

   Par mesure de sécurité, transmettez toujours des valeurs à une instruction SQL à l’aide de paramètres, comme vous le voyez dans l’exemple précédent. Cela vous donne la possibilité de valider les données de l’utilisateur, en plus de vous protéger contre les tentatives d’envoi de commandes malveillantes à votre base de données (parfois appelées attaques par injection SQL).

   Pour exécuter la requête, vous utilisez cette instruction, en lui passant les variables qui contiennent les valeurs à remplacer par les espaces réservés :

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

   Une fois l’instruction Insert Into exécutée, vous envoyez l’utilisateur à la page qui répertorie les produits à l’aide de cette ligne :

   Response.Redirect("~/ListProducts");
   

   Si la validation n’a pas réussi, vous ignorez l’insertion. Au lieu de cela, vous avez un helper dans la page qui peut afficher les messages d’erreur cumulés (le cas échéant) :

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

   Notez que le bloc de style dans le balisage inclut une définition de classe CSS nommée .validation-summary-errors. Il s’agit du nom de la classe CSS utilisée par défaut pour l’élément <div> qui contient des erreurs de validation. Dans ce cas, la classe CSS spécifie que les erreurs de résumé de validation sont affichées en rouge et en gras, mais vous pouvez définir la classe pour afficher toute .validation-summary-errors mise en forme souhaitée.

Test de la page Insérer

1. Afficher la page dans un navigateur. La page affiche un formulaire similaire à celui présenté dans l’illustration suivante.

   

2. Entrez des valeurs pour toutes les colonnes, mais veillez à laisser la colonne Prix vide.

3. Cliquez sur Insérer. La page affiche un message d’erreur, comme illustré dans l’illustration suivante. (Aucun enregistrement n’est créé.)

   

4. Remplissez complètement le formulaire, puis cliquez sur Insérer. Cette fois, la page ListProducts.cshtml s’affiche et affiche le nouvel enregistrement.

Mise à jour des données dans une base de données

Une fois les données entrées dans une table, vous devrez peut-être les mettre à jour. Cette procédure vous montre comment créer deux pages similaires à celles que vous avez créées pour l’insertion de données précédemment. La première page affiche les produits et permet aux utilisateurs d’en sélectionner un à modifier. La deuxième page permet aux utilisateurs d’effectuer les modifications et de les enregistrer.

1. Dans le site web, créez un fichier CSHTML nommé EditProducts.cshtml.

2. Remplacez le balisage existant dans le fichier par ce qui suit :

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

   La seule différence entre cette page et la page ListProducts.cshtml précédente est que la table HTML de cette page inclut une colonne supplémentaire qui affiche un lien Modifier . Lorsque vous cliquez sur ce lien, vous accédez à la page UpdateProducts.cshtml (que vous allez créer ensuite) où vous pouvez modifier l’enregistrement sélectionné.

   Examinez le code qui crée le lien Modifier :

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

   Cela crée un élément HTML <a> dont href l’attribut est défini dynamiquement. L’attribut href spécifie la page à afficher lorsque l’utilisateur clique sur le lien. Il transmet également la Id valeur de la ligne active au lien. Lorsque la page s’exécute, la source de la page peut contenir des liens tels que ceux-ci :

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

   Notez que l’attribut href a la valeur UpdateProducts/n, où n est un numéro de produit. Lorsqu’un utilisateur clique sur l’un de ces liens, l’URL résultante ressemble à ceci :

   http://localhost:18816/UpdateProducts/6

   En d’autres termes, le numéro de produit à modifier sera transmis dans l’URL.

3. Afficher la page dans un navigateur. La page affiche les données dans un format semblable à celui-ci :

   

   Ensuite, vous allez créer la page qui permet aux utilisateurs de mettre à jour les données. La page de mise à jour inclut la validation pour valider les données que l’utilisateur entre. Par exemple, le code dans la page garantit qu’une valeur a été entrée pour toutes les colonnes requises.

4. Dans le site web, créez un fichier CSHTML nommé UpdateProducts.cshtml.

5. Remplacez le balisage existant dans le fichier par ce qui suit.

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

   Le corps de la page contient un formulaire HTML où un produit est affiché et où les utilisateurs peuvent le modifier. Pour obtenir le produit à afficher, vous utilisez cette instruction SQL :

   SELECT * FROM Product WHERE Id=@0
   

   Cette opération sélectionne le produit dont l’ID correspond à la valeur passée dans le @0 paramètre. (Étant donné que Id est la clé primaire et doit donc être unique, un seul enregistrement de produit peut être sélectionné de cette façon.) Pour obtenir la valeur d’ID à passer à cette Select instruction, vous pouvez lire la valeur transmise à la page dans le cadre de l’URL, à l’aide de la syntaxe suivante :

   var ProductId  = UrlData[0];
   

   Pour récupérer l’enregistrement de produit, vous utilisez la QuerySingle méthode, qui ne retourne qu’un seul enregistrement :

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

   La ligne unique est retournée dans la row variable. Vous pouvez obtenir des données de chaque colonne et les affecter à des variables locales comme suit :

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

   Dans le balisage du formulaire, ces valeurs s’affichent automatiquement dans des zones de texte individuelles à l’aide de code incorporé comme suit :

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

   Cette partie du code affiche l’enregistrement de produit à mettre à jour. Une fois l’enregistrement affiché, l’utilisateur peut modifier des colonnes individuelles.

   Lorsque l’utilisateur envoie le formulaire en cliquant sur le bouton Mettre à jour , le code dans le bloc s’exécute if(IsPost) . Cela obtient les valeurs de l’utilisateur à partir de l’objet Request , stocke les valeurs dans des variables et valide que chaque colonne a été renseignée. Si la validation réussit, le code crée l’instruction SQL Update suivante :

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

   Dans une instruction SQL Update , vous spécifiez chaque colonne à mettre à jour et la valeur sur laquelle la définir. Dans ce code, les valeurs sont spécifiées à l’aide des espaces réservés @0de paramètre , @1, @2, et ainsi de suite. (Comme indiqué précédemment, pour la sécurité, vous devez toujours passer des valeurs à une instruction SQL à l’aide de paramètres.)

   Lorsque vous appelez la db.Execute méthode, vous passez les variables qui contiennent les valeurs dans l’ordre qui correspond aux paramètres de l’instruction SQL :

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

   Une fois l’instruction Update exécutée, vous appelez la méthode suivante afin de rediriger l’utilisateur vers la page de modification :

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

   En effet, l’utilisateur voit une liste mise à jour des données dans la base de données et peut modifier un autre produit.

6. Enregistrez la page.

7. Exécutez la page EditProducts.cshtml (et non la page de mise à jour), puis cliquez sur Modifier pour sélectionner un produit à modifier. La page UpdateProducts.cshtml s’affiche, montrant l’enregistrement que vous avez sélectionné.

   

8. Apportez une modification, puis cliquez sur Mettre à jour. La liste des produits s’affiche à nouveau avec vos données mises à jour.

Suppression de données dans une base de données

Cette section montre comment permettre aux utilisateurs de supprimer un produit de la table de base de données product . L’exemple se compose de deux pages. Dans la première page, les utilisateurs sélectionnent un enregistrement à supprimer. L’enregistrement à supprimer s’affiche ensuite dans une deuxième page qui lui permet de confirmer qu’il souhaite supprimer l’enregistrement.

1. Dans le site web, créez un fichier CSHTML nommé ListProductsForDelete.cshtml.

2. Remplacez le balisage existant par ce qui suit :

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

   Cette page est similaire à la page EditProducts.cshtml précédente. Toutefois, au lieu d’afficher un lien Modifier pour chaque produit, il affiche un lien Supprimer . Le lien Supprimer est créé à l’aide du code incorporé suivant dans le balisage :

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

   Cela crée une URL qui ressemble à ceci lorsque les utilisateurs cliquent sur le lien :

   http://<server>/DeleteProduct/4

   L’URL appelle une page nommée DeleteProduct.cshtml (que vous allez créer ensuite) et lui transmet l’ID du produit à supprimer (ici, 4).

3. Enregistrez le fichier, mais laissez-le ouvert.

4. Créez un autre fichier CHTML nommé DeleteProduct.cshtml. Remplacez le contenu existant par les éléments suivants :

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

   Cette page est appelée par ListProductsForDelete.cshtml et permet aux utilisateurs de confirmer qu’ils souhaitent supprimer un produit. Pour répertorier le produit à supprimer, vous obtenez l’ID du produit à supprimer de l’URL à l’aide du code suivant :

   var ProductId = UrlData[0];
   

   La page demande ensuite à l’utilisateur de cliquer sur un bouton pour supprimer l’enregistrement. Il s’agit d’une mesure de sécurité importante : lorsque vous effectuez des opérations sensibles sur votre site web, telles que la mise à jour ou la suppression de données, ces opérations doivent toujours être effectuées à l’aide d’une opération POST, et non d’une opération GET. Si votre site est configuré pour qu’une opération de suppression puisse être effectuée à l’aide d’une opération GET, n’importe qui peut passer une URL comme http://<server>/DeleteProduct/4 et supprimer tout ce qu’il veut de votre base de données. En ajoutant la confirmation et en codant la page afin que la suppression puisse être effectuée uniquement à l’aide d’une fonction POST, vous ajoutez une mesure de sécurité à votre site.

   L’opération de suppression réelle est effectuée à l’aide du code suivant, qui confirme d’abord qu’il s’agit d’une opération post et que l’ID n’est pas vide :

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

   Le code exécute une instruction SQL qui supprime l’enregistrement spécifié, puis redirige l’utilisateur vers la page de référencement.

5. Exécutez ListProductsForDelete.cshtml dans un navigateur.

   

6. Cliquez sur le lien Supprimer pour l’un des produits. La page DeleteProduct.cshtml s’affiche pour confirmer que vous souhaitez supprimer cet enregistrement.

7. Cliquez sur le bouton Supprimer . L’enregistrement de produit est supprimé et la page est actualisée avec une description de produit mise à jour.

<?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");
}

Ressources supplémentaires

• SQL Server Compact
• Connexion à une base de données SQL Server ou MySQL dans WebMatrix
• Validation des entrées utilisateur dans les sites ASP.NET Web Pages