I. Préface▲
Ce tutoriel vous montre comment créer un formulaire de saisie, puis enregistrer les données saisies dans une base de données avec ASP.NET Web Pages (Razor). Cela suppose que vous avez terminé la lecture de «Présentation d'ASP.NET Web Page — Notion de base sur les formulaires HTML ».
Note de la rédaction Developpez.com :
Ce tutoriel est basé sur la technologie ASP.NET Web Page. Si elle est toujours d’actualité et peut continuer d’être utilisée sans aucun soucis pour des projets existants, Microsoft recommande l’usage d’ASP.NET Core Razor Page pour de nouveaux projets.
De plus, ce tutoriel est basé sur l’utilisation de WebMatrix comme environnement de développement. Aujourd’hui, cet environnement est considéré comme obsolète et il est préférable d’utiliser un environnement de développement récent comme Visual Studio ou Visual Studio Code. Néanmoins, cela ne devrait pas gêner la lecture de ce tutoriel.
Précision vis-à-vis de la version anglaise : les liens invalides ont été retirés de la traduction.
I-A. Qu'allez-vous apprendre ?▲
- Plus sur comment procéder avec les saisies sur formulaire.
- Comment ajouter (insérer) des données dans une base de données.
- Comment être sûr que l'utilisateur a saisie une valeur obligatoire dans le formulaire (comment valider une saisie utilisateur).
- Comment afficher les erreurs de validation.
- Comment passer à une autre page depuis la page en cours.
I-B. Fonctionnalités/technologies abordées :▲
- la méthode Database.Execute ;
- l'instruction SQL Insert Into ;
- l'helper (assistant) Validation ;
- la méthode Reponse.Redirect.
II. Qu'allez-vous construire ?▲
Dans un précédant tutoriel vous avez vu comment créer une base de données. Vous enregistrerez des données en ouvrant directement la base de données avec WebMatrix, en travaillant avec l'espace de travail Database. Dans beaucoup d'applications, il n'y a pas de façon pratique de mettre des données dans une base de données. Aussi dans ce tutoriel, vous allez créer une interface Web qui vous permet, ou a tous le monde, de saisir des données et de les sauvegarder dans la base de données.
Vous allez créer une page où vous saisirez de nouveaux films. La page contiendra un formulaire de saisie qui a des champs (zones de texte) où vous saisirez le titre, le genre et l'année d'un film. La page ressemblera à celle-ci :
La zone de texte sera un élément HTML <input> qui ressemblera à ceci :
<input type="text" name="genre" value="" />III. Création du formulaire de base▲
Créez une page nommée AddMovies.cshtml.
Remplacer le contenu du fichier avec le balisage suivant. Écrasez tout ; vous ajouterez un bloc de code en haut sous peu.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a Movie</title>
</head>
<body>
<h1>Add a Movie</h1>
<form method="post">
<fieldset>
<legend>Movie Information</legend>
<p><label for="title">Title:</label>
<input type="text" name="title" value="@Request.Form["title"]" />
</p>
<p><label for="genre">Genre:</label>
<input type="text" name="genre" value="@Request.Form["genre"]" />
</p>
<p><label for="year">Year:</label>
<input type="text" name="year" value="@Request.Form["year"]" />
</p>
<p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
</fieldset>
</form>
</body>
</html>
Cet exemple montre un code HTML classique pour créer un formulaire. Il utilise des éléments <input> pour les zones de texte et les boutons de soumission. Les légendes pour les zones de texte sont créées avec l'utilisation de l'élément standard <label>. Les éléments <legend> et <fieldset> placent une jolie boite autour du formulaire.
Notez que dans cette page, l'élément <form> utilise post comme valeur pour l'attribut de method. Dans le tutoriel précédant, vous avez créé un formulaire utilisant la méthode get. C'était correct, parce que même si le formulaire soumettait des valeurs au serveur, la requête n'effectuait aucun changement. Tout ce qu'il a fait était de récupérer des données de différentes façons. Cependant, dans cette page vous allez faire des modifications — vous allez ajouter de nouveaux enregistrements. Donc, ce formulaire doit utiliser la méthode post (pour plus d'informations concernant les différences entre les opérations GET et POST, regardez le chapitre Sécurité des verbes HTTP, GET, POST du tutoriel précédant).
Notez que chaque zone de texte a un élément name (title, genre, year). Comme vous l'avez vu dans le tutoriel précédent, ces noms sont importants parce que vous devez les connaître si plus tard vous voulez récupérer les saisies utilisateur. Vous pouvez utiliser tous les noms. Il est nécessaire d'utiliser des noms significatifs qui vous aideront à vous souvenir à quoi correspond la donnée avec laquelle vous travaillez.
L'attribut value de chaque élément <input> contient une petite quantité de code Razor (par exemple, Request.Form["Title"]). Dans le tutoriel précédant, vous avez appris comment utiliser cette astuce pour préserver la valeur saisie dans la zone de texte (le cas échéant) après que le formulaire ait été soumis.
IV. Obtenir les valeurs du formulaire▲
Ensuite vous ajoutez le code qui traite le formulaire. En résumé, vous allez faire ceci :
- vérifier si la page a été postée (a été soumise). Vous voulez que votre code ne s'exécute que lorsque les utilisateurs cliquent sur le bouton, pas lors du premier affichage ;
- prendre les valeurs que l'utilisateur a saisies dans les zones de textes. Dans ce cas, parce que le formulaire utilise le verbe POST, vous prenez les valeurs du formulaire dans la collection Request.Form ;
- insérer les valeurs dans un nouvel enregistrement dans la table films de la base de données.
Au début du fichier, ajoutez le code suivant :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
@{
var title = "";
var genre = "";
var year = "";
if(IsPost){
title = Request.Form["title"];
genre = Request.Form["genre"];
year = Request.Form["year"];
}
}
Les premières lignes créent les variables (title, genre, et year) pour garder les valeurs des zones de texte. La ligne if (IsPost) s'assure que les variables sont renseignées seulement lorsque l'utilisateur clique sur le bouton Add Movie — c'est-à-dire lorsque le formulaire a été posté.
Comme vous l'avez vu dans un tutoriel précédant, vous obtenez la valeur d'une zone de texte en utilisant une expression comme Request.Form["name"], où name est le nom de l'élément <input>.
Les noms des variables (title, genre, et year) sont arbitraires. Comme les noms que vous donnez à l'élément <input>, vous pouvez les nommer comme vous voulez (les noms des variables ne doivent pas forcément correspondre aux noms des attributs de l'élément <input> du formulaire). Mais comme pour les éléments <input>, c'est une bonne idée d'utiliser des noms de variables représentatifs des données qu'elles contiennent. Lorsque vous écrivez du code, les noms cohérents vous permettent de mémoriser plus facilement le genre de données avec lequel vous travaillez.
V. Ajouter des données à la base de données▲
Dans le bloc de code que vous venez d'ajouter, juste avant l'accolade fermante (}) du bloc if (pas juste avant le bloc de code), ajoutez le code suivant :
var db = Database.Open("WebPagesMovies");
var insertCommand = "INSERT INTO Movies (Title, Genre, Year) VALUES(@0, @1, @2)";
db.Execute(insertCommand, title, genre, year);Cet exemple est similaire au code que vous avez utilisé dans le tutoriel précédant pour prendre et afficher les données. La ligne qui commence par db = ouvre la base de données, comme avant. La ligne suivante définit une instruction SQL, comme vous avez vu avant. Cependant, cette fois elle définit une instruction SQL Insert Into. L'exemple suivant montre la syntaxe générale pour l'instruction SQL Insert Into :
INSERT INTO table (column1, column2, column3, ...) VALUES (value1, value2, value3, ...)En d'autres termes, pour insérer, vous spécifiez le nom de la table, ensuite la liste des colonnes, et la liste des valeurs (comme indiqué précédemment, SQL n'est pas sensible à la casse mais beaucoup de personnes placent les mots clés en majuscule afin de rendre la commande plus facile à lire).
Les colonnes que vous utilisez pour l'insertion sont déjà inscrites dans la commande — (title, genre, et year). La partie intéressante est comment vous obtenez les valeurs des zones de texte pour les placer dans les parties VALUES de la commande. À la place des valeurs réelles, vous voyez @0, @1 et @2, qui sont des zones de paramètres de substitution. Lorsque vous exécutez la commande (à la ligne db.execute), vous passez les valeurs que vous avez obtenues à partir des zones de texte.
Important ! Rappelez-vous que la seule façon d'insérer des données(1) saisies en ligne par un utilisateur dans une instruction SQL est d'utiliser les paramètres de substitution, comme vous avez vu ici (VALUES (@0, @1, @2)). (Ndt : ce sont les requêtes paramétrées.) Si vous concaténez les saisies utilisateur dans une instruction SQL, vous vous exposez à une attaque d'injection SQL, comme expliqué dans « Notions de base sur les formulaires » .
Toujours à l'intérieur du bloc if, ajoutez la ligne suivante après la ligne db.Execute :
Response.Redirect("~/Movies");Après l'insertion du nouveau film dans la base de données, cette ligne vous renvoie (redirige) sur la page Movies aussi vous pouvez voir le nouveau film que vous avez saisi. L'opérateur ~ signifie « racine du site » (L'opérateur ~ fonctionne uniquement dans les pages ASP.NET, pas dans une page HTML classique).
Regardez le bloc de code complet comme dans cet exemple :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
@{
var title = "";
var genre = "";
var year = "";
if(IsPost){
title = Request.Form["title"];
genre = Request.Form["genre"];
year = Request.Form["year"];
var db = Database.Open("WebPagesMovies");
var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
db.Execute(insertCommand, title, genre, year);
Response.Redirect("~/Movies");
}
}
VI. Tester la commande Insert (pour l'instant)▲
Vous n'avez pas encore terminé, mais c'est le bon moment pour tester.
Dans l'arborescente de fichiers de WebMatrix, faites un clic droit sur la page AddMovie.cshtml et cliquez sur Launch in browser.
Si vous avez une autre page dans le navigateur, vérifiez que l'URL est http://localhost:nnnnn/AddMovie, où nnnnn est le numéro de port que vous utilisez.
Avez-vous une erreur sur la page ? Si oui, lisez votre code attentivement et vérifiez qu'il correspond exactement à ce qui a été vu au-dessus.
Saisissez un film dans la page — par exemple, utilisez « Citizen Kane », « Drama », et « 1941 ». (Ou autre chose.) Puis cliquez sur ADD Movie.
Si tout se passe bien, vous êtes redirigé vers la page Movies. Assurez-vous que votre nouveau film est bien répertorié.
VII. Valider les saisies utilisateur▲
Allez à la page AddMovie, ou exécutez-la encore. Saisissez un autre film, mais cette fois, saisissez seulement le titre — par exemple, entrez « Singin' in the rain ». Puis cliquez sur Add Movie.
Vous êtes à nouveau redirigé sur la page Movies. Vous pouvez voir le nouveau film, mais c'est incomplet.
Lorsque vous créez la table Movies, vous avez explicitement indiqué qu'aucun des champs ne doit être nul. Ici vous avez une saisie par formulaire pour de nouveaux films, et vous avez laissé des champs en blanc. C'est une erreur.
Dans ce cas, la base de données n'a pas fait remonter (ou throw) d'erreur. Vous n'avez pas renseigné un genre ou une année, aussi le code dans la page AddMovies traite ces valeurs comme de prétendues chaînes vides (empty string). Quand la commande SQL Insert Into s'exécute, les champs genre et année n'ont pas des données utiles, mais ils ne sont pas nuls.
Évidemment, vous ne voulez pas laisser les utilisateurs entrer des informations à moitié vides dans la base de données pour les films. La solution est de valider les saisies utilisateur. Initialement, la validation consistera simplement à vérifier que les utilisateurs ont saisi une valeur pour tous les champs (c'est-à-dire qu'aucun des champs ne contient de chaîne vide).
VII-A. Valeurs nulles et chaînes vides▲
En programmation, il existe une distinction entre les différentes notions de « pas de valeur » (« no value »). En général, une valeur est nulle si elle n'a jamais été initialisée, en aucun cas. En revanche, une variable qui attend des données de type caractère (string) peut être assignée avec une chaîne vide (empty string). Dans ce cas, la valeur n'est pas nulle ; elle est juste explicitement assignée avec une chaîne de caractères dont la longueur est zéro. Ces deux instructions montrent la différence :
var firstName; // Not set, so its value is null
var firstName = ""; // Explicitly set to an empty string -- not nullC'est un peu plus compliqué que cela, mais le point important est que null représente une sorte d'état indéterminé.
Maintenant il est important de comprendre exactement quand une valeur est nulle et quand c'est juste une chaîne vide. Dans le code de la page AddMovie, vous obtenez la valeur de la zone de texte en utilisant Request.Form["title"] et ainsi de suite. Lorsque la page s'exécute la première fois (avant de cliquer sur le bouton), la valeur de Request.Form["title"] est nulle. Mais lorsque vous soumettez le formulaire, Request.Form["title"] prend la valeur de la zone de texte title. Ce n'est pas évident, mais une zone de texte vide n'est pas nulle ; elle a juste une chaîne vide. Aussi lorsque le code s'exécute en réponse au clic du bouton, Request.Form["title"] reçoit une chaîne vide.
Pourquoi est-ce que cette distinction est importante ? Lorsque vous créez la table Movies, vous avez explicitement indiqué qu'aucun des champs ne doit être nul. Mais ici vous avez une saisie pour un nouveau film, et vous laissez les champs vides. Vous pourriez raisonnablement espérer que la base de données vous renvoie une erreur lorsque vous essayez d'enregistrer de nouveaux films qui ne contiennent pas de valeur pour le genre ou l'année. Mais c'est le point sensible — même si vous laissez ces zones de textes vides, les valeurs ne sont pas nulles ; ce sont des chaînes vides. En conséquence, vous êtes en mesure d'enregistrer de nouveaux films dans la base de données avec des valeurs vides — mais pas nulles ! — pour ces colonnes. Par conséquent, vous devez vous assurer que les utilisateurs ne soumettent pas des chaînes vides, chose que vous pouvez faire en utilisant la validation des saisies utilisateur.
VII-B. La Validation Helper▲
ASP.NET Web Page inclut un assistant — le Validation helper — que vous pouvez utiliser pour vous assurer que les utilisateurs saisissent des données qui correspondent à vos exigences. Le Validation helper est un des assistants qui sont intégrés à ASP.NET Web Page. Aussi vous n'avez pas besoin de l'installer en utilisant NuGet, de la façon dont vous avez installé l'assistant Gravatar dans le tutoriel précédant.
Pour valider les saisies utilisateur, vous devez faire ceci :
- utiliser le code pour spécifier que des valeurs sont requises pour les zones de texte de la page ;
- placer un test dans le code de sorte que les informations du film ne soient ajoutées à la base de données que si tout est correctement validé ;
- ajouter le code dans le balisage pour afficher les messages d'erreur.
Dans le bloc de code de la page AddMovies, tout en haut, avant les déclarations de variables, ajoutez le code suivant :
Validation.RequireField("title", "You must enter a title");
Validation.RequireField("genre", "Genre is required");
Validation.RequireField("year", "You haven't entered a year");Vous appelez Validation.RequireField une fois pour chaque champ (élément <input>) lorsque vous souhaitez qu'une saisie soit présente. Vous pouvez aussi ajouter un message d'erreur personnalisé pour chaque appel, comme vous le voyez ici (nous avons varié les messages juste pour vous montrer que vous pouvez mettre ce que vous voulez).
S'il y a un problème, vous voulez empêcher l'insertion des informations du nouveau film dans la base de données. Dans le bloc If (IsPost), utilisez && (le AND logique) pour ajouter d'autres conditions pour tester Validation.IsValid(). Lorsque vous êtes prêt, tout le bloc de code If (IsPost) ressemble à ceci :
2.
3.
4.
5.
6.
7.
8.
9.
10.
if(IsPost && Validation.IsValid()){
title = Request.Form["title"];
genre = Request.Form["genre"];
year = Request.Form["year"];
var db = Database.Open("WebPagesMovies");
var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
db.Execute(insertCommand, title, genre, year);
Response.Redirect("~/Movies");
}
S'il y a une erreur de validation avec n'importe quel champ que vous avez référencé avec le Validation helper, la méthode Validation.IsValid() renvoie faux. Dans ce cas, le code n'est pas exécuté, aussi aucune donnée invalide concernant un film ne sera insérée dans la base de données. Et bien sûr, vous ne serez pas redirigé vers la page Movies.
Maintenant, le bloc de code complet, incluant la validation, ressemble à cet exemple :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
@{
Validation.RequireField("title", "You must enter a title");
Validation.RequireField("genre", "Genre is required");
Validation.RequireField("year", "You haven't entered a year");
var title = "";
var genre = "";
var year = "";
if(IsPost && Validation.IsValid()){
title = Request.Form["title"];
genre = Request.Form["genre"];
year = Request.Form["year"];
var db = Database.Open("WebPagesMovies");
var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
db.Execute(insertCommand, title, genre, year);
Response.Redirect("~/Movies");
}
}
VIII. Affichage des erreurs de validation▲
La dernière étape est d'afficher les messages d'erreur. Vous pouvez afficher les messages individuellement pour chaque erreur de validation, ou vous pouvez afficher un résumé, ou les deux. Pour ce tutoriel, vous allez afficher les deux, ainsi vous verrez comment cela fonctionne.
A coté de chaque élément <input> que vous voulez valider, appelez la méthode Html.ValidationMessage et donnez-lui en paramètre le nom de l'élément <input> que vous voulez valider. Vous placez la méthode Html.ValidationMessage là où vous voulez que le message d'erreur apparaisse. Lorsque la page s'exécute, la méthode Html.ValidationMessage place un élément <span> là où le message d'erreur de validation sera affiché.
Changez le balisage dans la page pour intégrer une méthode Html.ValidationMessage pour chacun des trois éléments <input> de la page, comme dans cet exemple :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<p><label for="title">Title:</label>
<input type="text" name="title" value="@Request.Form["title"]" />
@Html.ValidationMessage("title")
</p>
<p><label for="genre">Genre:</label>
<input type="text" name="genre" value="@Request.Form["genre"]" />
@Html.ValidationMessage("genre")
</p>
<p><label for="year">Year:</label>
<input type="text" name="year" value="@Request.Form["year"]" />
@Html.ValidationMessage("year")
</p>
Pour voir comment le sommaire fonctionne, ajoutez aussi le balisage et le code suivant après l'élément <h1>Add a Movie</h1> de la page :
@Html.ValidationSummary()Par défaut, la méthode Html.ValidationMessage affiche tous les messages de validation dans une liste (un élément <ul> inclus dans un élément <div>). Comme avec la méthode Html.ValidationMessage le balisage du sommaire est toujours présent ; s'il n'y a pas d'erreur, aucun élément de liste n'est présent.
Le sommaire peut être une alternative pour procéder à l'affichage des messages de validation plutôt que d'utiliser la méthode Html.ValidationMessage pour afficher chaque erreur spécifique de champ. Soit vous pouvez utiliser les deux, le sommaire et les détails, soit vous pouvez utiliser la méthode Html.ValidationMessage pour afficher une erreur générique et utiliser un appel à Html.ValidationMessage pour afficher les détails.
La page complète ressemble maintenant à cet exemple :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
<body>
<h1>Add a Movie</h1>
@Html.ValidationSummary()
<form method="post">
<fieldset>
<legend>Movie Information</legend>
<p><label for="title">Title:</label>
<input type="text" name="title" value="@Request.Form["title"]" />
@Html.ValidationMessage("title")
</p>
<p><label for="genre">Genre:</label>
<input type="text" name="genre" value="@Request.Form["genre"]" />
@Html.ValidationMessage("genre")
</p>
<p><label for="year">Year:</label>
<input type="text" name="year" value="@Request.Form["year"]" />
@Html.ValidationMessage("year")
</p>
<p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
</fieldset>
</form>
</body>
</html>
C'est tout. Maintenant vous pouvez tester la page pour ajouter un film en laissant vide un ou plusieurs champs. Lorsque vous le faites, vous voyez les messages d'erreur suivants s'afficher :
IX. Donner un style aux messages d'erreur de validation▲
Vous pouvez voir qu'il y a des messages d'erreur, mais ils ne se distinguent vraiment pas très bien. Cependant, il y a une façon de faire ressortir facilement les messages d'erreur.
Pour donner un style aux messages d'erreur individuels qui sont affichés par Html.ValidationMessage, créez une classe de style CSS nommée field-validation-error. Pour définir l'aspect du sommaire de validation, créez une classe de style CSS nommée validation-summary-error.
Pour voir comment ces techniques fonctionnent, ajouter un élément <style> à l'intérieur de la section <head> de la page. Maintenant définissez les classes de style nommées field-validation-error et validation-sumary-error qui contiennent les règles suivantes :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
<head>
<meta charset="utf-8" />
<title>Add a Movie</title>
<style type="text/css">
.field-validation-error {
font-weight:bold;
color:red;
background-color:yellow;
}
.validation-summary-errors{
border:2px dashed red;
color:red;
background-color:yellow;
font-weight:bold;
margin:12px;
}
</style>
</head>
Normalement, vous placeriez probablement les informations de style dans un fichier .css séparé. Mais pour simplifier, vous pouvez les placer dans la page pour cette fois (plus tard dans cette série de tutoriels, vous déplacerez les règles CSS dans un fichier .css séparé).
S'il y a une erreur de validation, la méthode Html.ValidationMessage place un élément <span> qui inclut class=field-validation-error. En ajoutant une définition de style pour la classe, vous pouvez configurez l'aspect du message. S'il y a des erreurs, de la même manière la méthode Html.ValidationMessage placera dynamiquement l'attribut class=validation-summary-error.
Exécutez à nouveau la page et laissez vide un couple de champs. Les erreurs sont maintenant plus notables (NdT : dans le sens visible). (En fait, c'est excessif, mais c'est juste pour montrer ce que vous faites.)
X. Ajouter un lien à la page Movies▲
Une dernière étape consiste à rendre pratique l'accès à la page AddMovies depuis la liste des films.
Ouvrez de nouveau la page Movies. Après la balise de fermeture </div> qui suit le WebGrid helper, ajoutez le balisage suivant :
Comme vous avez vu avant, ASP.NET interprète l'opérateur ~ comme la racine du website. Vous n'avez pas à utiliser l'opérateur ~ ; vous pouvez utilisez le balisage <a href="./AddMovie">Add a movie</a> ou une autre façon pour définir le chemin que le HTML comprendra. Mais l'opérateur ~ est une bonne approche générale lorsque vous créez des liens pour les pages Razor, ainsi il rend le site plus flexible — si vous déplacez la page courante dans un sous-dossier, le lien accédera toujours à la page AddMovie. (Rappelez-vous que l'opérateur ~ fonctionne seulement dans les pages .cshtml. ASP.NET comprend cela, mais ce n'est pas le standard HTML.)
Lorsque vous êtes prêt, exécutez la page Movies. Elle ressemblera à cette page.
Cliquez sur le lien Add a movie pour être sûr qu'il renvoie sur la page AddMovie.
XI. Prochainement▲
Dans le prochain tutoriel, vous apprendrez comment permettre aux utilisateurs de modifier les données qui sont dans la base de données.
XII. Listing complet de la page AddMovie▲
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a Movie</title>
<style type="text/css">
.field-validation-error {
font-weight:bold;
color:red;
background-color:yellow;
}
.validation-summary-errors{
border:2px dashed red;
color:red;
background-color:yellow;
font-weight:bold;
margin:12px;
}
</style>
</head>
<body>
<h1>Add a Movie</h1>
@Html.ValidationSummary()
<form method="post">
<fieldset>
<legend>Movie Information</legend>
<p><label for="title">Title:</label>
<input type="text" name="title" value="@Request.Form["title"]" />
@Html.ValidationMessage("title")
</p>
<p><label for="genre">Genre:</label>
<input type="text" name="genre" value="@Request.Form["genre"]" />
@Html.ValidationMessage("genre")
</p>
<p><label for="year">Year:</label>
<input type="text" name="year" value="@Request.Form["year"]" />
@Html.ValidationMessage("year")
</p>
<p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
</fieldset>
</form>
</body>
</html>
XIII. Ressources supplémentaires▲
Introduction to ASP.NET Web Programming Using the Razor Syntax
SQL INSERT INTO Statement sur le site W3Schools
Validating User Input in ASP.NET Web Pages Sites. Plus d'informations sur l'utilisation de Validation helper.
XIV. Information sur les auteurs▲
Tom FitzMacken — Tom FitzMacken est un auteur senior dans la programmation, créateur et membre de l'équipe chargée du contenu sur la plate-forme Web et Outils.
XV. Postface▲
XV-A. Remerciements▲
François DORIN pour la relecture et la validation technique et Naute pour la relecture orthographique.
XV-B. Sources▲
Traduction de l'article de l'équipe de Microsoft ASP.NET — Introducing ASP.NETWeb Pages — Entering Database Data by Using Forms