Partager via

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

  • Article

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.

Identifiant FirstName LastName Adresse E-mail Téléphone
1 Jim 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

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.

Conseil

Bases de données relationnelles

Vous pouvez stocker des données de nombreuses façons, notamment des fichiers texte et des feuilles de calcul. Toutefois, pour la plupart des utilisations professionnelles, les données sont stockées dans une base de données relationnelle.

Cet article n’aborde pas très profondément les bases de données. Toutefois, vous trouverez peut-être utile de comprendre un peu à leur sujet. Dans une base de données relationnelle, les informations sont logiquement divisées en tables distinctes. Par exemple, une base de données pour une école peut contenir des tables distinctes pour les étudiants et pour les offres de classe. Le logiciel de base de données (comme SQL Server) prend en charge des commandes puissantes qui vous permettent d’établir dynamiquement des relations entre les tables. Par exemple, vous pouvez utiliser la base de données relationnelle pour établir une relation logique entre les étudiants et les classes afin de créer une planification. Le stockage de données dans des tables distinctes réduit la complexité de la structure de table et réduit la nécessité de conserver des données redondantes dans des tables.

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.

    [Capture d’écran montrant Web Matrix ouvrant 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 :

    [Capture d’écran montrant à quoi ressemblera la définition une fois terminée.]

  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 :

    [Capture d’écran montrant à quoi ressemblera le concepteur de tables lorsque les données seront entrées.]

  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 :

    [Capture d’écran montrant la liste que la page affichera dans le navigateur.]

Conseil

Langage SQL (Structured Query Language)

SQL est un langage utilisé dans la plupart des bases de données relationnelles pour la gestion des données d’une base de données. Il inclut des commandes qui vous permettent de récupérer des données et de les mettre à jour, et qui vous permettent de créer, de modifier et de gérer des tables de base de données. SQL est différent d’un langage de programmation (comme celui que vous utilisez dans WebMatrix), car avec SQL, l’idée est que vous indiquez à la base de données ce que vous voulez, et c’est à la base de données de déterminer comment obtenir les données ou effectuer la tâche. Voici des exemples de commandes SQL et de ce qu’elles font :

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

Cette opération extrait les colonnes Id, Name et Price des enregistrements de la table Product si la valeur de Price est supérieure à 10, et retourne les résultats par ordre alphabétique en fonction des valeurs de la colonne Nom . Cette commande retourne un jeu de résultats qui contient les enregistrements qui répondent aux critères, ou un jeu vide si aucun enregistrement ne correspond.

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

Cela insère un nouvel enregistrement dans la table Product , affectant à la colonne Nom la valeur « Croissant », à la colonne Description la valeur « A flaky delight » et au prix à 1,99.

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

Cette commande supprime les enregistrements de la table Product dont la colonne date d’expiration est antérieure au 1er janvier 2008. (Cela suppose que la table Product comporte une telle colonne, bien sûr.) La date est entrée ici au format MM/JJ/AAAA, mais elle doit être entrée dans le format utilisé pour vos paramètres régionaux.

Les Insert Into commandes et Delete ne retournent pas de jeux de résultats. Au lieu de cela, ils retournent un nombre qui vous indique le nombre d’enregistrements qui ont été affectés par la commande .

Pour certaines de ces opérations (telles que l’insertion et la suppression d’enregistrements), le processus qui demande l’opération doit disposer des autorisations appropriées dans la base de données. C’est pourquoi, pour les bases de données de production, vous devez souvent fournir un nom d’utilisateur et un mot de passe lorsque vous vous connectez à la base de données.

Il existe des dizaines de commandes SQL, mais elles suivent toutes un modèle semblable à celui-ci. Vous pouvez utiliser des commandes SQL pour créer des tables de base de données, compter le nombre d’enregistrements dans une table, calculer les prix et effectuer de nombreuses autres opérations.

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.

    [Capture d’écran montrant un formulaire qui s’affiche sur la page dans un navigateur.]

  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éé.)

    [Capture d’écran montrant un message d’erreur.]

  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.

Notes

Important Dans un site web de production, vous limitez généralement qui est autorisé à apporter des modifications aux données. Pour plus d’informations sur la configuration de l’appartenance et sur les façons d’autoriser les utilisateurs à effectuer des tâches sur le site, consultez Ajout de la sécurité et de l’appartenance à un site pages Web ASP.NET.

  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 :

    [Capture d’écran montrant les données affichées sur la page dans le navigateur.]

    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é.

    [Capture d’écran montrant la page Mettre à jour les produits, ainsi que l’enregistrement 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.

Notes

Important Dans un site web de production, vous limitez généralement qui est autorisé à apporter des modifications aux données. Pour plus d’informations sur la configuration de l’appartenance et sur les façons d’autoriser l’utilisateur à effectuer des tâches sur le site, consultez Ajout de la sécurité et de l’appartenance à un site pages Web ASP.NET.

  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.

    [Capture d’écran montrant l’exécution de produits de liste pour supprimer un point CSHTML dans le 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.

Conseil

Connexion à une base de données

Vous pouvez vous connecter à une base de données de deux manières. La première consiste à utiliser la Database.Open méthode et à spécifier le nom du fichier de base de données (moins l’extension .sdf ) :

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

La Open méthode part du principe que .le fichier sdf se trouve dans le dossier App_Data du site web. Ce dossier est conçu spécifiquement pour contenir des données. Par exemple, il dispose des autorisations appropriées pour permettre au site web de lire et d’écrire des données, et par mesure de sécurité, WebMatrix n’autorise pas l’accès aux fichiers à partir de ce dossier.

La deuxième méthode consiste à utiliser une chaîne de connexion. Une chaîne de connexion contient des informations sur le mode de connexion à une base de données. Cela peut inclure un chemin d’accès au fichier ou le nom d’une base de données SQL Server sur un serveur local ou distant, ainsi qu’un nom d’utilisateur et un mot de passe pour se connecter à ce serveur. (Si vous conservez des données dans une version gérée de manière centralisée de SQL Server, par exemple sur le site d’un fournisseur d’hébergement, vous utilisez toujours une chaîne de connexion pour spécifier les informations de connexion de base de données.)

Dans WebMatrix, les chaînes de connexion sont généralement stockées dans un fichier XML nommé Web.config. Comme son nom l’indique, vous pouvez utiliser un fichier Web.config à la racine de votre site web pour stocker les informations de configuration du site, y compris les chaînes de connexion dont votre site peut avoir besoin. Un exemple de chaîne de connexion dans un fichier Web.config peut ressembler à ce qui suit. Remarque $CREDENTIAL_PLACEHOLDER$ est un espace réservé pour la paire clé/valeur de mot de passe :

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

Dans l’exemple, la chaîne de connexion pointe vers une base de données dans un instance de SQL Server qui s’exécute sur un serveur quelque part (par opposition à un fichier .sdf local). Vous devez remplacer les noms appropriés pour myServer et myDatabase, et spécifier SQL Server valeurs de connexion pour username et password. (Les valeurs de nom d’utilisateur et de mot de passe ne sont pas nécessairement identiques à vos informations d’identification Windows ou aux valeurs que votre fournisseur d’hébergement vous a données pour vous connecter à ses serveurs. Vérifiez auprès de l’administrateur les valeurs exactes dont vous avez besoin.)

La Database.Open méthode est flexible, car elle vous permet de transmettre le nom d’un fichier .sdf de base de données ou le nom d’une chaîne de connexion stockée dans le fichier Web.config . L’exemple suivant montre comment se connecter à la base de données à l’aide de la chaîne de connexion illustrée dans l’exemple précédent :

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

Comme indiqué précédemment, la Database.Open méthode vous permet de transmettre un nom de base de données ou une chaîne de connexion, et elle déterminera laquelle utiliser. Cela est très utile lorsque vous déployez (publiez) votre site web. Vous pouvez utiliser un fichier .sdf dans le dossier App_Data lorsque vous développez et testez votre site. Ensuite, lorsque vous déplacez votre site vers un serveur de production, vous pouvez utiliser une chaîne de connexion dans le fichier Web.config qui porte le même nom que votre fichier .sdf , mais qui pointe vers la base de données du fournisseur d’hébergement, sans avoir à modifier votre code.

Enfin, si vous souhaitez travailler directement avec une chaîne de connexion, vous pouvez appeler la Database.OpenConnectionString méthode et lui passer la chaîne de connexion réelle au lieu de simplement le nom d’une dans le fichier Web.config . Cela peut être utile dans les situations où, pour une raison quelconque, vous n’avez pas accès à la chaîne de connexion (ou aux valeurs qu’elle contient, telles que le nom du fichier .sdf ) tant que la page n’est pas en cours d’exécution. Toutefois, pour la plupart des scénarios, vous pouvez utiliser Database.Open comme décrit dans cet article.

Ressources supplémentaires