Gestion des données

Ceci est une documentation préliminaire, traduite par Christine Dubois (Agilcom) et sujette à

changement

Ce chapitre décrit comment accéder aux données d'une base de données et comment les afficher dans des pages Web ASP.NET.

A la fin de ce chapitre, vous saurez :

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.

Les fonctionnalités suivantes vous seront présentées dans ce chapitre:

Travailler avec une base de données Microsoft SQL Server Compact Edition. Travailler avec des requêtes SQL. La classe Database. L’assistant WebGrid.

Introduction aux bases de données

Imaginez un carnet d'adresse classique. Pour chaque entrée du carnet d'adresse (c’est-à-dire pour

chaque contact), vous disposez de plusieurs informations (données) telles que son nom, son prénom,

son adresse, son adresse e-mail et son numéro de téléphone.

La manière la plus classique de représenter ce type de données est une table avec des lignes et des

colonnes. En termes de base de données, chaque ligne est appelée un enregistrement. Chaque

colonne (parfois appelée champ) contient une valeur pour chaque type de données : nom, prénom,

et ainsi de suite.

Id Prenom Nom Addresse Email Telephone

1 Jean Abrus 10 rue des Champs Elysées

jean@contoso.com 0120938899

2 Thierry Adams 1 avenue de la République

thierry@cohowinery.com 0129388499

La plupart du temps, une table de bases de données doit avoir une colonne qui contient un

identificateur unique, par exemple le numéro de client, le numéro de compte, etc. Cette colonne est

appelée la clé primaire de la table. Elle est utilisée pour identifier de manière unique chaque ligne de

la table. Dans l'exemple précédent, la colonne Id serait la clé primaire du carnet d'adresses.

Après cette brève introduction aux bases de données, vous êtes maintenant prêt à apprendre à créer

une base de données puis à effectuer des opérations simples telles que l'ajout, la modification et la

suppression de données.

Bases de données relationnelles

Il est possible de stocker des données de nombreuses façons, y compris dans des fichiers texte et des

tableurs. Cependant, dans la plupart des solutions métiers, les données sont stockées dans une base

de données relationnelle.

Ce chapitre ne souhaite pas rentrer trop dans le détail des bases de données. Si vous voulez en savoir

un peu plus sur le sujet, sachez que dans une base de données relationnelle, l'information est divisée

de manière logique en plusieurs tables séparées. Par exemple, une base de données pour une école

contient des tables distinctes pour les élèves et pour les salles de classe. Le gestionnaire de bases de

données (tel que SQL Server) propose de puissantes commandes pour créer dynamiquement des

relations entre les tables. Par exemple, vous pouvez utiliser la base de données relationnelle pour

établir un lien logique entre les étudiants et les classes dans le but de créer un planning. Le fait de

stocker des données dans des tables distinctes réduit la complexité de leur structure et la nécessité

de conserver des données redondantes dans celles-ci.

Créer une base de données

La procédure qui suit illustre la création d’une base de données nommée SmallBakery en utilisant

l’outil de conception de base de données de SQL Server Compact qui est inclus dans WebMatrix. Bien

qu’il soit possible de créer une base de données par programmation, il est plus courant de créer la

base de données et les tables en utilisant un outil de conception comme WebMatrix.

1. Démarrez WebMatrix, et dans la fenêtre Quick Start, cliquez Site From Template.

2. Sélectionnez le modèle Empty Site et dans la zone Site Name entrez SmallBakery, puis

cliquez sur OK. Le site est créé puis affiché dans WebMatrix.

3. Dans le volet de gauche, cliquez sur l'espace de travail Databases.

4. Dans le ruban, cliquez New Database. Une base de données vide, du même nom que votre

site, est créée.

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

6. Dans le ruban, cliquez New Table. WebMatrix ouvre son concepteur de table.

7. Dans le panneau Column Properties, en face de (Name) entrez Id.

8. Pour cette nouvelle colonne Id, configurez Is Identity ? et Is Primary Key ? à la valeur True.

Comme son nom l'indique, Is Primary Key indique à la base de données que cette colonne sera la clé

primaire de la table. Is Identity signifie que la base de données devra créer automatiquement un

numéro d'identification pour chaque nouvel enregistrement (de manière séquentielle en

commençant à 1).

9. Dans le ruban, cliquez New Column.

10. Dans le panneau Column Properties, pour (Name), entrez Name.

11. Configurez Allow Nulls à la valeur False. Cela garantit que la colonne Name ne pourra pas

être vide.

12. Configurez Data Type à nvarchar. Le mot var dans nvarchar indique à la base de données que

la donnée de cette colonne est une chaîne de caractères dont la taille peut varier d’un

enregistrement à l’autre (Le préfixe n signifie national, ce qui veut dire que le champ peut

contenir des données de caractères en provenance de n’importe quel alphabet ou système

d'écriture (c’est-à-dire que le champ contient des données Unicode).

13. En suivant la même procédure, créez une colonne nommée Description. Configurez Allow

Null à la valeur False et Data Type à nvarchar.

14. Créez une colonne nommée Price. Configurez Allow Null à la valeur False et Data Type à

money.

15. Faites CTRL+S pour enregistrer la table et nommez-la "Products".

Lorsque vous avez terminé, la définition de la table doit ressembler à ceci:

Ajouter des données à la base de données

Maintenant vous allez pouvoir ajouter quelques lignes de données à votre base de données. Vous les

réutiliserez plus tard dans ce chapitre.

1. Dans le volet de gauche, cliquez sur l'espace de travail Databases.

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

3. Faites un clic-droit sur la table Products, puis cliquez sur Data.

4. Dans le panneau d'édition, entrez les enregistrements suivants (vous pouvez saisir des

données en français, si vous préférez):

Name Description Price

Bread Baked fresh every day. 2.99

Strawberry Shortcake Made with organic strawberries from our garden.

9.99

Apple Pie Second only to your mom’s pie. 12.99

Pecan Pie If you like pecans, this is for you 10.99

Lemon Pie Made with the best lemons in the world.

11.99

Cupcakes Your kids and the kid in you will love these.

7.99

N'oubliez pas que vous n'avez pas à saisir quelque chose dans la colonne Id. En effet, lorsque vous

avez créé cette colonne, vous avez défini sa propriété Is Identity à la valeur True, ce qui signifie

qu’elle sera automatiquement alimentée par la base de données.

Lorsque vous avez terminé la saisie des données, le concepteur de table doit ressembler à ceci:

5. Fermez maintenant cet onglet qui contient les données de la base de données.

Afficher des données à partir d'une base de données

Maintenant que vous avez une base de données comportant des données, vous pouvez afficher

celles-ci dans une page Web ASP.NET. Pour récupérer les lignes de la table à afficher, on utilise une

instruction SQL, c’est-à-dire une commande que l’on transmet à la base de données.

1. Dans le volet de gauche, cliquez sur l'espace de travail Files.

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

3. Remplacez son contenu par le suivant:

@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Products 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>

Le premier bloc de code ouvre le fichier SmallBakery.sdf (la base de données) que vous avez créé

précédemment. La méthode Database.Open suppose que le fichier .sdf se trouve dans le dossier

App_Data de votre site Web (Remarquez qu’il n’est pas nécessaire de spécifier l’extension .sdf -- en

fait, si vous le faites, la méthode Open ne fonctionne pas.)

Remarque : Le dossier App_Data est un dossier spécial d’ASP.NET utilisé pour stocker les fichiers de

données. Pour en savoir plus, consultez Se connecter à une base de données plus loin dans ce

chapitre.

Le code fait ensuite une requête pour interroger la base de données en utilisant l’instruction SQL

Select suivante :

SELECT * FROM Products ORDER BY Name

Dans cette instruction, Products fait référence à la table que l’on veut interroger. Le caractère *

indique que la requête doit retourner toutes les colonnes de la table (Vous pouvez aussi lister les

colonnes individuellement, séparées par des virgules, si vous voulez voir une partie seulement de

celles-ci.) La clause Order By indique la façon dont les données doivent être triées (dans l’exemple,

les produits devront être triés par nom, donc selon la colonne Name). Cela signifie que les données

sont triées par ordre alphabétique basé sur la valeur de la colonne Name 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.

Dans l'élément tbody, on utilise une boucle foreach pour récupérer individuellement chaque ligne de

données retournée par la requête. Pour chaque ligne de données, une ligne de tableau HTML (tr) est

créée. Ensuite, sont créées des cellules de tableau HTML (td) pour chaque colonne. A chaque

itération dans la boucle, la variable row est chargée avec la ligne suivante de la base de données (cf.

l'instruction foreach). Pour récupérer la valeur d’une colonne de la ligne, utilisez row.Name ou

row.Description, etc… selon le nom de la colonne désirée.

4. Exécutez la page dans un navigateur.

Langage de requête structuré (Structured Query Language - SQL )

SQL est un langage qui est utilisé dans la plupart des bases de données relationnelles pour gérer les

données. Il comprend des commandes pour récupérer des données et les mettre à jour, et pour

créer, modifier et gérer les tables de la base de données. SQL est différent d'un langage de

programmation (comme celui que vous utilisez dans WebMatrix) : en effet le principe est que l’on

soumet à la base de données une demande, à charge de celle-ci de savoir comment récupérer les

données ou effectuer la tâche demandée. Voici quelques exemples de commandes SQL et ce qu'elles

font:

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

Cette commande récupère les colonnes Id, Name et Price des enregistrements de la table Products,

pour lesquels la valeur du prix (Price) est supérieur à 10.00, et renvoie les résultats dans l'ordre

alphabétique sur la base des valeurs de la colonne Name. Elle renvoie un jeu de résultat (result set)

qui contient les enregistrements répondant au critère, ou un jeu vide si aucun enregistrement ne

correspond.

INSERT INTO Products (Name, Description, Price) VALUES ("Croissant", "Un délice feuilleté", 1.99)

Cette commande insère un nouvel enregistrement dans la table Products, dont la colonne Name a la

valeur "Croissant", la colonne Description, la valeur "Un délice feuilleté", et la colonne Price, la valeur

1.99.

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

Cette commande supprime les enregistrements de la table Products dont la date d'expiration

(ExpirationDate) est antérieure au 1er janvier 2008 (Cela suppose bien sûr que la table Products

possède une telle colonne). La date est entrée ici au format JJ/MM/AAAA, mais plus généralement

elle doit être saisie au format correspondant à vos paramètres régionaux.

Les instructions INSERT INTO et DELETE ne retournent pas de jeux de résultat. Au lieu de cela, elles

renvoient un nombre qui indique combien d'enregistrements ont été affectés par la commande.

Pour certaines de ces opérations (comme l'insertion et la suppression d'enregistrement), 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 généralement fournir

un nom d'utilisateur et mot de passe lorsque vous vous connectez à la base de données.

Il existe des centaines de commandes SQL, mais elles suivent toutes un modèle comme celui-ci. Vous

pouvez par exemple utiliser des commandes SQL pour créer des tables de base de données, pour

compter le nombre d'enregistrements dans une table, pour calculer des prix et effectuer de

nombreuses autres opérations.

Insérer des 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 Products. Une fois le nouveau produit inséré, la page affiche le

contenu de la table mise à jour, en utilisant la page ListProducts.cshtml que vous avez créée dans la

section précédente.

La page effectue une validation pour s'assurer que les données que l'utilisateur a saisies sont

conformes à la base de données. Par exemple, le code de la page vérifie qu’une valeur a bien été

inscrite pour toutes les colonnes obligatoires de la table.

Remarque: Pour certaines de ces opérations (comme l'insertion et la suppression d'enregistrement),

le processus qui demande l'opération doit disposer des autorisations appropriées dans la base de

données. Pour les bases de données de production (contrairement à la base de test que nous avons

créée dans cet exemple), vous devez généralement fournir un nom d'utilisateur et un mot de passe

lorsque vous vous connectez à la base de données.

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

2. Remplacez son contenu par le suivant:

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

if (IsPost) {

// Read product name. Name = Request["Name"]; if (Name.IsEmpty()) { Validation.AddFieldError("Name", "Product name is required."); }

// Read product description. Description = Request["Description"]; if (Description.IsEmpty()) { Validation.AddFieldError("Description", "Product description is required."); }

// Read product price Price = Request["Price"]; if (Price.IsEmpty()) { Validation.AddFieldError("Price", "Product price is required."); }

// Define the insert query. The values to assign to the // columns in the Products table are defined as parameters

// with the VALUES keyword. if(Validation.Success) { var insertQuery = "INSERT INTO Products (Name, Description,

Price) " + "VALUES (@0, @1, @2)"; db.Execute(insertQuery, Name, Description, Price); // Display the page that lists products. Response.Redirect(@Href("~/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: 35em;} legend { padding: 2px 4p; 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 Insert, le code en haut de la page ouvre une connexion à la base de données SmallBakery.sdf.

Il récupère ensuite les valeurs que l'utilisateur a soumises via l’objet Request et attribue ces valeurs

aux variables locales.

Pour valider que l'utilisateur a entré une valeur pour chaque colonne obligatoire, on procède comme

ceci :

Name = Request["Name"]; if (Name.IsEmpty()) { Validation.AddFieldError("Name", "Product name is required."); }

Si la valeur de la colonne Name est vide, la méthode AddFieldError de l'assistant Validation est

invoquée, avec en paramètre le message d'erreur souhaité. Il suffit de répéter cette opération pour

chaque colonne à contrôler. Une fois que toutes les colonnes ont été vérifiées, le code réalise le test

suivant:

if(Validation.Success) { // ... }

Si toutes les colonnes ont été validées (aucune n'est vide), on peut donc poursuivre et créer

l’instruction SQL pour insérer les données comme suit :

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

La requête contient des paramètres (@0, @1, @2) pour les valeurs à insérer dans les colonnes.

Remarque : Par mesure de sécurité, il faut toujours passer des valeurs à une instruction SQL en

utilisant des paramètres, exactement comme dans cet exemple. D’une part, cela vous laisse les

moyens de valider les données de l'utilisateur, et d’autre part, cela vous protège contre toutes

tentatives d’envoi de commandes malveillantes dans votre base de données (appelées attaques

d’injection SQL).

Pour exécuter la requête, utilisez la méthode Execute, à laquelle on transmet les variables qui

contiennent les valeurs à substituer aux paramètres de la requête :

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

Une fois l’insertion réalisée, l'utilisateur est renvoyé sur la page qui liste tous les produits, via cette

ligne:

Response.Redirect("~/ListProducts");

Si la validation des informations saisies par l’utilisateur n’est pas satisfaisante, l'insertion n’est pas

faite. Auquel cas, vous disposez d’un assistant dans la page qui permet d'afficher tous les messages

d'erreur accumulés au fur et à mesure dans l’exécution du code :

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

Notez que le bloc de style inclut une définition de classe CSS nommée validation-summary-errors. Il

s'agit du nom de la classe CSS qui est utilisée par défaut dans l'élément div contenant les messages

d’erreur de validation. Dans l’exemple, le résumé des erreurs de validation s’affichera en rouge et en

gras, mais vous pouvez modifiez la classe CSS pour afficher la mise en forme de votre choix.

3. Visualisez la page dans un navigateur.

La page affiche un formulaire semblable à celui qui est représenté dans l'illustration suivante.

4. Entrez des valeurs pour toutes les colonnes, sauf pour la colonne prix.

5. Cliquez Insert.

La page affiche un message d'erreur, comme le montre l'illustration ci-dessous. (aucun nouvel

enregistrement n’est créé.)

6. Remplissez cette fois le formulaire complètement, puis cliquez sur Insert.

La page ListProducts.cshtml est affichée et montre le nouvel enregistrement inséré.

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

Après avoir entré des données dans une table, vous pourriez maintenant avoir besoin de les

réactualiser. La prochaine procédure montre comment créer deux pages semblables à celle créée

pour l'insertion des données : la première, affiche les produits et permet aux utilisateurs d’en

sélectionner un pour faire des modifications ; la seconde, permet aux utilisateurs de réaliser les

modifications et de les enregistrer.

Important : Dans un site de production, on limite généralement les personnes autorisées à réaliser

des modifications sur les données. Pour en savoir plus sur la façon de mettre en place un site avec un

accès sécurisé et sur les moyens d'autoriser l'utilisateur à exécuter des tâches sur le site, voir le

chapitre 13 - Améliorer la sécurité et l'appartenance.

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

2. Remplacez son contenu par ce qui suit:

@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Products 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 créée auparavant, c'est que la

table HTML comporte ici une colonne supplémentaire qui affiche un lien nommé Edit. Lorsque

l’utilisateur clique ce lien, il est redirigé vers la page UpdateProducts.cshtml (que vous allez créer

dans la suite de cet exercice) dans laquelle il peut modifier l'enregistrement sélectionné.

Examinons le code qui crée le lien Edit :

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

Il s’agit d’une balise <a> HTML dont l’attribut Href est défini dynamiquement. L'attribut Href a un

premier paramètre indiquant la page à afficher lorsque l'utilisateur clique sur le lien et un second

correspondant à la valeur Id de la ligne en cours. Lorsque la page s'exécute, la source de la page

contient des liens du type :

<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 une valeur du type UpdateProducts/n, où n est un numéro de produit.

Quand un utilisateur cliquera sur un lien, l'URL ressemblera à quelque chose comme ceci:

http://localhost:18816/UpdateProducts/6

En d'autres termes, le numéro du produit que l’utilisateur souhaite modifier est passé dans l'URL de

la page.

3. Visualisez la page dans un navigateur. La page affiche les données comme suit :

Vous allez maintenant créer la page qui permet à l’utilisateur de mettre à jour les données. Celle-ci

inclut du code de validation pour contrôler les données que l'utilisateur saisit. Par exemple, toutes

les colonnes obligatoires doivent contenir une valeur.

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

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

@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Products WHERE Id=@0";

var ProductId = UrlData[0];

if (ProductId.IsEmpty()) { Response.Redirect(@Href("~/EditProducts")); }

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

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

if (IsPost) { Name = Request["Name"]; if (String.IsNullOrEmpty(Name)) { Validation.AddFieldError("Name", "Product name is required."); }

Description = Request["Description"]; if (String.IsNullOrEmpty(Description)) { Validation.AddFieldError("Description", "Product description is required."); }

Price = Request["Price"]; if (String.IsNullOrEmpty(Price)) {

Validation.AddFieldError("Price", "Product price is required."); }

if(Validation.Success) { var updateQueryString = "UPDATE Products SET Name=@0, Description=@1, Price=@2 WHERE

Id=@3" ; db.Execute(updateQueryString, Name, Description, Price,

ProductId); Response.Redirect(@Href("~/EditProducts")); } } } <!DOCTYPE> <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 4p; 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 dans lequel est affiché un produit que l’utilisateur

peut modifier. Pour récupérer le produit à afficher, le code utilise l’instruction SQL:

SELECT * FROM Products WHERE Id=@0

Cette commande récupère le produit dont l'Id correspond à la valeur du paramètre @0 (Etant donné

que la colonne Id est la clé primaire de la table, qu’elle est donc unique, un seul enregistrement

produit ne peut donc être récupéré de cette manière). Pour obtenir la valeur Id à transmettre à cette

instruction Select, il suffit de lire la valeur transmise dans l’URL de la page comme suit :

var ProductId = UrlData[0];

Pour récupérer l’enregistrement proprement dit, on utilise la méthode QuerySingle, qui renvoie un

seul enregistrement :

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

La ligne résultante est attribuée à la variable row. Pour récupérer les données de chaque colonne de

la ligne et les attribuer à des variables locales, procédez comme ceci:

var Name = row.FirstName; var Description = row.LastName; var Price = row.Address;

Dans le balisage HTML, les valeurs sont automatiquement affichées dans les zones de texte

correspondantes en utilisant du code encapsulé :

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

Cette partie du code affiche l'enregistrement produit à mettre à jour. Une fois l'enregistrement

affiché, l'utilisateur peut modifier chacune des colonnes.

Lorsque l'utilisateur soumet le formulaire en cliquant sur le bouton Update, le code dans le bloc de

condition if(IsPost) s'exécute. Les valeurs saisies par l’utilisateur sont lues dans l'objet Request, puis

stockées dans des variables. Un contrôle est effectué pour vérifier que les colonnes ne sont pas vides.

Si la validation est un succès, le code créé l’instruction SQL suivante :

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

Dans une instruction SQL Update, vous devez spécifier chaque colonne à mettre à jour et la valeur

associée. Dans l’exemple, les valeurs sont spécifiées en utilisant des paramètres @0, @1, @2, etc...

(Comme nous l’avons déjà mentionné, pour une sécurité optimale, il est conseillé de toujours passer

des valeurs à une instruction SQL en utilisant des paramètres.)

C’est lorsqu’est invoquée la méthode db.Execute que l’on passe les variables qui contiennent les

valeurs des colonnes à mettre en jour, en respectant l’ordre des paramètres définis dans l’instruction

SQL.

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

Une fois la mise à jour effectuée, l'utilisateur est redirigé vers la page d'édition:

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

L'utilisateur voit alors une liste réactualisée des données de la base de données et peut, s’il le

souhaite, 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 Edit

dans la ligne du produit que vous souhaitez modifier. La page UpdateProducts.cshtml

s'affiche avec les données du produit que vous avez sélectionné.

8. Faites quelques modifications puis cliquez sur Update. La liste des produits s'affiche à

nouveau avec les données à jour.

Supprimer des données dans une base de données

Cette section montre comment permettre aux utilisateurs de supprimer un produit de la table

Products. L'exemple consiste en deux pages : dans la première, l’utilisateur sélectionne

l’enregistrement qu’il veut supprimer ; l’enregistrement à supprimer est alors affiché dans une

deuxième page qui permet à l’utilisateur de confirmer sa demande de suppression.

Important : Dans un site de production, on limite généralement les personnes autorisées à réaliser

des modifications sur les données. Pour en savoir plus sur la façon de mettre en place un site avec un

accès sécurisé et sur les moyens d'autoriser l'utilisateur à exécuter des tâches sur le site, voir le

chapitre 13 - Améliorer la sécurité et l'appartenance.

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

2. Remplacez son contenu par le suivant:

@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Products 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 semblable à la page EditProducts.cshtml créée plus tôt. En revanche, au lieu d'afficher

un lien Edit pour éditer chaque produit, elle affiche un lien Delete (supprimer). Le lien est créé de la

manière suivante :

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

Lorsque les utilisateurs cliquent sur le lien, on obtient donc une URL du type :

http://<server>/DeleteProduct/4

L'URL appelle une page nommée DeleteProduct.cshtml (que vous allez créer dans la suite de

l’exercice) 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 et remplacez son contenu par le

suivant:

@{ var db = Database.Open("SmallBakery"); var ProductId = UrlData[0]; if (ProductId.IsEmpty()) { Response.Redirect(@Href("~/ListProductsForDelete")); } var prod = db.QuerySingle("SELECT * FROM PRODUCTS WHERE ID = @0",

ProductId); if( IsPost && !ProductId.IsEmpty()) {

var deleteQueryString = "DELETE FROM Products 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 veulent supprimer le produit concerné. L'Id du produit à supprimer est récupéré directement à

partir de l'URL en utilisant le code suivant:

var ProductId = UrlData[0];

La page invite alors l'utilisateur à cliquer sur un bouton pour supprimer réellement l’enregistrement.

Il s'agit d'une mesure de sécurité importante : lorsque vous effectuez des opérations sensibles dans

votre site Web telles que mettre à jour ou supprimer des données, ces opérations doivent toujours

être réalisées au moyen d’une opération POST, et non d’une opération GET. Si votre site est

configuré de telle sorte qu'une opération de suppression peut être effectuée en utilisant une

opération GET, n'importe qui peut passer une URL du type http://<serveur>/DeleteProduct/4 et

supprimer tout ce qu’il veut dans votre base de données. C’est donc une mesure de sécurité

essentielle d’ajouter une étape de confirmation et de coder la page afin que la suppression ne puisse

être effectuée qu’au moyen d’un POST.

L’opération de suppression réelle est effectuée en utilisant le code suivant, qui vérifie d'abord qu’il

s’agit bien d’une opération POST et que l'Id n'est pas vide:

if( IsPost && !ProductId.IsEmpty()) { var deleteQueryString = "DELETE FROM Products 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 qui liste les produits.

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

6. Cliquez le lien Delete sur la ligne de produit de votre choix. La page DeleteProduct.cshtml

s'affiche pour vous demander confirmation de la suppression.

7. Cliquez sur le bouton Delete. L’enregistrement est supprimé et la page est réactualisée avec

la liste des produits mise à jour.

Afficher des données en utilisant l'assistant WebGrid

Jusqu'à présent, lorsque vous avez affiché des données dans une page, vous avez dû faire tout le

travail par vous-même. Mais il existe un moyen plus simple qui consiste à utiliser l’assistant WebGrid.

Il sait en effet construire un tableau HTML qui affiche des données et prend en charge des options de

mise en forme, de pagination des données, et de tri (par un simple clic de l’utilisateur sur l’en-tête de

la colonne de tri).

1. Dans le site, créez un nouveau fichier CSHTML nommé ListProducts_WebGrid.cshtml.

2. Remplacez son contenu par le suivant:

@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Products ORDER BY Id"; var data = db.Query(selectQueryString); var grid = new WebGrid(data, defaultSort: "Name", rowsPerPage: 5); } <!DOCTYPE html> <html> <head> <title>Displaying Data Using WebGrid </title> <style type="text/css"> .grid { margin: 4px; border-collapse: collapse; width: 600px; } .head { background-color: #E8E8E8; font-weight: bold; color:

#FFF; } .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; } .alt { background-color: #E8E8E8; color: #000; } .product { width: 200px; } </style> </head> <body>

<h1>Small Bakery Products</h1>

@grid.GetHtml( tableStyle: "grid", headerStyle: "head", alternatingRowStyle: "alt", columns: grid.Columns( grid.Column("Name", "Product", style: "product"), grid.Column("Description", format:@<i>@item.Description</i>),

grid.Column("Price", format:@<text>$@item.Price</text>) ) ) </html>

Le code commence par ouvrir le fichier de base de données SmallBakery.sdf, comme d'habitude, et

par créer une instruction SQL SELECT:

SELECT * FROM Products ORDER BY Id

L’assistant WebGrid s’utilise comme suit :

var data = db.Query(selectQueryString); var grid = new WebGrid(data, defaultSort: "Name", rowsPerPage: 5);

Un nouvel objet WebGrid est créé puis est affecté à la variable grid. Dans le cadre de la création de

l'objet WebGrid, vous devez d'abord exécuter l'instruction SQL (via db.Query), puis transmettre les

résultats à l'objet WebGrid. Lorsque vous créez l'objet WebGrid, vous pouvez également spécifier des

options, par exemple la colonne de tri des données par défaut (ici, la colonne Name) et le nombre

d’enregistrements à afficher sur chaque "page" de la grille.

Le rendu des données en utilisant l’assistant WebGrid, se fait par l’instruction de code suivante dans

le corps de la page:

@grid.GetHtml()

(Remplacez grid par la variable que vous avez utilisée lorsque vous avez créé l'objet WebGrid.)

Ce code affiche les résultats de la requête dans une grille. Si vous le souhaitez, vous pouvez spécifier

spécifiquement les colonnes à afficher:

@grid.GetHtml( columns: grid.Columns( grid.Column("Name"), grid.Column("Description"), grid.Column("Price" ) ) )

De nombreuses options peuvent être spécifiées sur l’assistant WebGrid. Dans l'exemple ci-dessus,

sont configurés le format (les styles CSS) de la grille dans son ensemble, ainsi que la mise en forme ou

le style de chacune des colonnes, ainsi que le texte d’en-tête de celles-ci:

@grid.GetHtml( tableStyle: "grid", headerStyle: "head", alternatingRowStyle: "alt", columns: grid.Columns( grid.Column("Name", "Product", style: "product"), grid.Column("Description", format:@<i>@item.Description</i>),

grid.Column("Price", format:@<text>$@item.Price</text>) )

3. Visualisez la page dans un navigateur. Cliquez sur un titre de colonne pour trier les données

sur la base de cette colonne. Cliquez sur un numéro au bas de la grille pour naviguer dans les

pages de données.

Se connecter à une base de données

Vous pouvez vous connecter à une base de données de deux manières. La première consiste à utiliser

la méthode Database.Open en précisant le nom du fichier de base de données (sans l'extension .sdf):

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

La méthode Open suppose que le fichier .sdf est dans le dossier App_Data du site Web. Ce dossier a

un certain nombre de caractéristiques conçues 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 ne permet pas l'accès aux fichiers de ce dossier.

La deuxième méthode consiste à utiliser une chaîne de connexion. Celle-ci contient des informations

indiquant comment se connecter à une base de données. Il peut s'agir d'un chemin de fichier, ou elle

peut inclure le nom d'une base de données SQL Server située sur un serveur local ou distant, avec un

nom d'utilisateur et un mot de passe pour se connecter à ce serveur. (Si vous conserver les données

dans une version centralisée de SQL Server, tels que chez un fournisseur d'hébergement, utiliser

toujours une chaîne de connexion pour spécifier les informations de connexion à la base de

données.)

Dans WebMatrix, les chaînes de connexion sont généralement stockées dans un fichier XML nommé

Web.config, situé à la racine de votre site web. Comme son nom l'indique, un fichier Web.config est

utile pour stocker des informations de configuration pour votre site web, y compris les chaînes de

connexion dont votre site pourrait avoir besoin. Un exemple de chaîne de connexion dans un fichier

Web.config pourrait ressembler à ce qui suit:

<?xml version="1.0" encoding="utf-8" ?>

<configuration>

<connectionStrings>

<add

name="SQLServerConnectionString"

connectionString=

"server=myServer;database=myDatabase;uid=username;pwd=password"

providerName="System.Data.SqlClient" />

</connectionStrings>

</configuration>

Dans l'exemple, la chaîne de connexion pointe sur une base de données dans une instance de SQL

Server qui s'exécute sur un serveur quelque part (par opposition à un fichier .sdf local). Il vous suffit

de remplacer myServer et myDatabase par les noms appropriés, et de spécifier les valeurs de

connexion à SQL Server à la place de username et password. (Les valeurs username et password ne

sont pas nécessairement les mêmes que vos informations d'identification Windows ou que les

valeurs que votre hébergeur vous a données pour se connecter à ses serveurs. Vérifiez avec

l'administrateur les valeurs correctes à utiliser.)

La méthode Database.Open est flexible, car elle vous permet de transmettre le nom d'un fichier de

base de données .sdf 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 en utilisant la chaîne de

connexion illustrée dans l'exemple précédent:

@{

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

}

La méthode Database.Open repère d’elle-même le procédé de connexion que vous avez choisi

d’adopter. C’est très utile tout particulièrement au moment du déploiement (publication) de votre

site web. Ainsi, 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 a le même nom que votre

fichier sdf mais qui pointe vers la base de données chez l’hébergeur (le tout sans avoir à changer

votre code).

Enfin, si vous souhaitez travailler directement avec une chaîne de connexion, vous pouvez appeler la

méthode Database.OpenConnectionString et lui passer la chaîne de connexion réelle au lieu du nom

de celle-ci dans le fichier Web.config. Cela peut s’avérer très utile chaque fois que, pour une raison

quelconque, vous n'avez pas accès à la chaîne de connexion (ou aux valeurs qu'elle contient, tel que

le nom du fichier .sdf) jusqu’à ce que la page s’exécute. Toutefois, pour la plupart des scénarios, vous

pouvez utiliser Database.Open tel que décrit dans ce chapitre.

Ressources supplémentaires

SQL Server Compact