Présentation de pages Web ASP.NET - Saisie de données de base de données à l’aide de formulaires

Article
07/13/2023

Ce tutoriel vous montre comment créer un formulaire d’entrée, puis entrer les données que vous obtenez à partir du formulaire dans une table de base de données lorsque vous utilisez pages Web ASP.NET (Razor). Il part du principe que vous avez terminé la série par le biais des informations de base des formulaires HTML dans pages Web ASP.NET.

Ce que vous allez apprendre :

En savoir plus sur le traitement des formulaires d’entrée.

Comment ajouter (insérer) des données dans une base de données.

Comment s’assurer que les utilisateurs ont entré une valeur requise dans un formulaire (comment valider l’entrée utilisateur).

Comment afficher les erreurs de validation.

Comment accéder à une autre page à partir de la page active.

Fonctionnalités/technologies abordées :

Méthode Database.Execute

Instruction SQL Insert Into

L’assistance Validation .

Méthode Response.Redirect

Contenu

Dans le tutoriel précédent qui vous a montré comment créer une base de données, vous avez entré des données de base de données en modifiant la base de données directement dans WebMatrix, en travaillant dans l’espace de travail Base de données . Toutefois, dans la plupart des applications, ce n’est pas un moyen pratique de placer des données dans la base de données. Ainsi, dans ce tutoriel, vous allez créer une interface web qui vous permet, à vous ou à n’importe qui, d’entrer des données et de les enregistrer dans la base de données.

Vous allez créer une page dans laquelle vous pouvez entrer de nouveaux films. La page contient un formulaire de saisie contenant des champs (zones de texte) dans lesquels vous pouvez entrer un titre de film, un genre et une année. La page ressemblera à cette page :

Page « Ajouter un film » dans le navigateur

Les zones de texte seront des éléments HTML <input> qui ressembleront à ce balisage :

<input type="text" name="genre" value="" />

Création du formulaire d’entrée de base

Créez une page nommée AddMovie.cshtml.

Remplacez ce qui se trouve dans le fichier par le balisage suivant. Tout remplacer; vous allez ajouter un bloc de code en haut sous peu.

<!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 le code HTML classique pour la création d’un formulaire. Il utilise des <input> éléments pour les zones de texte et pour le bouton Envoyer. Les légendes des zones de texte sont créées à l’aide d’éléments standard <label> . Les <fieldset> éléments et <legend> placent une belle boîte autour du formulaire.

Notez que dans cette page, l’élément <form> utilise post comme valeur pour l’attribut method . Dans le tutoriel précédent, vous avez créé un formulaire qui a utilisé la get méthode . C’était correct, car bien que le formulaire ait envoyé des valeurs au serveur, la demande n’a pas apporté de modifications. Tout ce qu’il a fait était d’extraire des données de différentes manières. Toutefois, dans cette page, vous allez apporter des modifications : vous allez ajouter de nouveaux enregistrements de base de données. Par conséquent, ce formulaire doit utiliser la post méthode . (Pour plus d’informations sur la différence entre GET les opérations et POST , consultez la barre latéraleGET, POST et HTTP Verb Safety dans le tutoriel précédent.)

Notez que chaque zone de texte a un name élément (title, genre, year). Comme vous l’avez vu dans le tutoriel précédent, ces noms sont importants, car vous devez avoir ces noms pour pouvoir obtenir l’entrée de l’utilisateur ultérieurement. Vous pouvez utiliser n’importe quel nom. Il est utile d’utiliser des noms explicites qui vous aident à mémoriser les données avec lesquelles vous travaillez.

L’attribut value de chaque <input> élément contient un peu de code Razor (par exemple, Request.Form["title"]). Vous avez appris une version de cette astuce dans le tutoriel précédent pour conserver la valeur entrée dans la zone de texte (le cas échéant) après l’envoi du formulaire.

Obtention des valeurs de formulaire

Ensuite, vous ajoutez du code qui traite le formulaire. Dans le plan, vous allez effectuer les opérations suivantes :

Vérifiez si la page est en cours de publication (a été envoyée). Vous souhaitez que votre code s’exécute uniquement lorsque les utilisateurs ont cliqué sur le bouton, pas lors de la première exécution de la page.
Obtenez les valeurs que l’utilisateur a entrées dans les zones de texte. Dans ce cas, étant donné que le formulaire utilise le POST verbe, vous obtenez les valeurs de formulaire de la Request.Form collection.
Insérez les valeurs en tant que nouvel enregistrement dans la table de base de données Movies .

En haut du fichier, ajoutez le code suivant :

@{
    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 des variables (title, genre, et year) pour contenir les valeurs des zones de texte. La ligne if(IsPost) garantit que les variables sont définies uniquement lorsque les utilisateurs cliquent sur le bouton Ajouter un film , c’est-à-dire lorsque le formulaire a été publié.

Comme vous l’avez vu dans un tutoriel précédent, vous obtenez la valeur d’une zone de texte à l’aide d’une expression comme Request.Form["name"], où name est le nom de l’élément <input> .

Les noms des variables (title, , genreet year) sont arbitraires. Comme les noms que vous attribuez aux <input> éléments, vous pouvez les appeler comme vous le souhaitez. (Les noms des variables n’ont pas besoin de correspondre aux attributs de nom des <input> éléments du formulaire.) Mais comme pour les <input> éléments, il est judicieux d’utiliser des noms de variables qui reflètent les données qu’ils contiennent. Lorsque vous écrivez du code, des noms cohérents facilitent la mémorisation des données avec lesquelles vous travaillez.

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

Dans le bloc de code que vous venez d’ajouter, juste à l’intérieur de l’accolade fermante ( } ) du if bloc (pas seulement à l’intérieur du 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 un tutoriel précédent pour extraire et afficher des données. La ligne qui commence par db = ouvre la base de données, comme avant, et la ligne suivante définit une instruction SQL, comme vous l’avez vu précédemment. Toutefois, cette fois, il définit une instruction SQL Insert Into . L’exemple suivant montre la syntaxe générale de l’instruction Insert Into :

INSERT INTO table (column1, column2, column3, ...) VALUES (value1, value2, value3, ...)

En d’autres termes, vous spécifiez la table dans laquelle insérer, puis répertoriez les colonnes dans lesquelles insérer, puis les valeurs à insérer. (Comme indiqué précédemment, SQL ne respecte pas la casse, mais certaines personnes capitalisent les mots clés pour faciliter la lecture de la commande.)

Les colonnes dans lesquelles vous insérez sont déjà répertoriées dans la commande . (Title, Genre, Year) La partie intéressante est la façon dont vous obtenez les valeurs des zones de texte dans la VALUES partie de la commande. Au lieu des valeurs réelles, vous voyez @0, @1et @2, qui sont bien sûr des espaces réservés. Lorsque vous exécutez la commande (sur la db.Execute ligne), vous passez les valeurs que vous avez obtenues à partir des zones de texte.

Important ! N’oubliez pas que la seule façon d’inclure des données entrées en ligne par un utilisateur dans une instruction SQL consiste à utiliser des espaces réservés, comme vous le voyez ici (VALUES(@0, @1, @2)). Si vous concatènez une entrée utilisateur dans une instruction SQL, vous vous ouvrez à une attaque par injection SQL, comme expliqué dans Form Basics dans pages Web ASP.NET (tutoriel précédent).

Toujours à l’intérieur du if bloc, ajoutez la ligne suivante après la db.Execute ligne :

Response.Redirect("~/Movies");

Une fois le nouveau film inséré dans la base de données, cette ligne vous redirige vers la page Films afin que vous puissiez voir le film que vous venez d’entrer. L’opérateur ~ signifie « racine du site web ». (L’opérateur ~ fonctionne uniquement dans ASP.NET pages, et non en HTML en général.)

Le bloc de code complet ressemble à cet exemple :

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

Test de la commande Insert (Jusqu’à présent)

Vous n’avez pas encore terminé, mais c’est le bon moment de tester.

Dans l’arborescence des fichiers dans WebMatrix, cliquez avec le bouton droit sur la page AddMovie.cshtml , puis cliquez sur Lancer dans le navigateur.

Capture d’écran montrant la page « Ajouter un film » dans le navigateur.

(Si vous vous retrouvez avec une autre page dans le navigateur, assurez-vous que l’URL est http://localhost:nnnnn/AddMovie), où nnnnn est le numéro de port que vous utilisez.)

Avez-vous obtenu une page d’erreur ? Si c’est le cas, lisez-le attentivement et assurez-vous que le code ressemble exactement à ce qui a été répertorié précédemment.

Entrez un film au format : par exemple, utilisez « Citizen Kane », « Drama » et « 1941 ». (Ou quoi que ce soit.) Cliquez ensuite sur Ajouter un film.

Si tout se passe bien, vous êtes redirigé vers la page Films . Assurez-vous que votre nouveau film est répertorié.

Page Films montrant le film nouvellement ajouté

Validation de l'entrée utilisateur

Retour à la page AddMovie ou réexécutez-la. Entrez un autre film, mais cette fois, entrez uniquement le titre , par exemple, entrez « Singin' in the Rain ». Cliquez ensuite sur Ajouter un film.

Vous êtes redirigé vers la page Films à nouveau. Vous pouvez trouver le nouveau film, mais il est incomplet.

Page Films montrant un nouveau film dont certaines valeurs sont manquantes

Lorsque vous avez créé la table Movies , vous avez explicitement indiqué qu’aucun des champs ne pouvait être null. Ici, vous avez un formulaire d’entrée pour les nouveaux films, et vous laissez les champs vides. C’est une erreur.

Dans ce cas, la base de données n’a pas réellement soulevé (ou lève) d’erreur. Comme vous n’avez pas fourni de genre ou d’année, le code de la page AddMovie a traité ces valeurs comme des chaînes dites vides. Lorsque la commande SQL Insert Into s’est exécutée, les champs genre et année ne contiennent pas de données utiles, mais ils n’étaient pas null.

Évidemment, vous ne voulez pas laisser les utilisateurs entrer des informations vidéo à moitié vides dans la base de données. La solution consiste à valider l’entrée de l’utilisateur. Initialement, la validation permet simplement de s’assurer que l’utilisateur a entré une valeur pour tous les champs (autrement dit, qu’aucun d’entre eux ne contient de chaîne vide).

Conseil

Chaînes null et vides

Dans la programmation, il existe une distinction entre différentes notions de « aucune valeur ». En général, une valeur est null si elle n’a jamais été définie ou initialisée de quelque manière que ce soit. En revanche, une variable qui attend des données de caractères (chaînes) peut être définie sur une chaîne vide. Dans ce cas, la valeur n’est pas null ; il vient d’être explicitement défini sur une chaîne de caractères dont la longueur est égale à 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 null

C’est un peu plus compliqué que cela, mais le point important est que null représente une sorte d’état non déterminé.

De temps en temps, il est important de comprendre exactement quand une valeur est null et quand il s’agit simplement d’une chaîne vide. Dans le code de la page AddMovie , vous obtenez les valeurs des zones de texte en utilisant Request.Form["title"] et ainsi de suite. Lorsque la page s’exécute pour la première fois (avant de cliquer sur le bouton), la valeur de Request.Form["title"] est null. Toutefois, lorsque vous envoyez le formulaire, Request.Form["title"] obtient la valeur de la title zone de texte. Ce n’est pas évident, mais une zone de texte vide n’est pas null; il contient simplement une chaîne vide. Par conséquent, lorsque le code s’exécute en réponse au clic sur le bouton, Request.Form["title"] contient une chaîne vide.

Pourquoi cette distinction est-elle importante ? Lorsque vous avez créé la table Movies , vous avez explicitement indiqué qu’aucun des champs ne pouvait être null. Mais ici, vous avez un formulaire d’entrée pour les nouveaux films, et vous laissez les champs vides. Vous pouvez raisonnablement vous attendre à ce que la base de données se plaigne lorsque vous essayez d’enregistrer de nouveaux films qui n’ont pas de valeurs pour le genre ou l’année. Mais c’est le point : même si vous laissez ces zones de texte vides, les valeurs ne sont pas null ; ce sont des chaînes vides. Par conséquent, vous pouvez enregistrer de nouveaux films dans la base de données avec ces colonnes vides, mais pas null ! — valeurs. Par conséquent, vous devez vous assurer que les utilisateurs n’envoient pas de chaîne vide, ce que vous pouvez faire en validant l’entrée de l’utilisateur.

L’assistance de validation

pages Web ASP.NET inclut une assistance ( l’assistanceValidation) que vous pouvez utiliser pour vous assurer que les utilisateurs entrent des données qui répondent à vos besoins. L’assistance Validation est l’une des assistances intégrées à pages Web ASP.NET, vous n’avez donc pas besoin de l’installer en tant que package à l’aide de NuGet, comme vous avez installé l’assistance Gravatar dans un tutoriel précédent.

Pour valider l’entrée de l’utilisateur, procédez comme suit :

Utilisez le code pour spécifier que vous souhaitez exiger des valeurs dans les zones de texte de la page.
Placez un test dans le code afin que les informations de film soient ajoutées à la base de données uniquement si tout est validé correctement.
Ajoutez du code dans le balisage pour afficher les messages d’erreur.

Dans le bloc de code de la page AddMovie , 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 (<input> élément) où vous souhaitez exiger une entrée. Vous pouvez également ajouter un message d’erreur personnalisé pour chaque appel, comme vous le voyez ici. (Nous avons varié les messages pour montrer que vous pouvez y placer tout ce que vous aimez.)

En cas de problème, vous souhaitez empêcher l’insertion des nouvelles informations de film dans la base de données. Dans le if(IsPost) bloc, utilisez && (AND logique) pour ajouter une autre condition qui teste Validation.IsValid(). Lorsque vous avez terminé, l’ensemble if(IsPost) du bloc ressemble à ce code :

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

En cas d’erreur de validation avec l’un des champs que vous avez inscrits à l’aide de l’assistance Validation , la Validation.IsValid méthode retourne false. Dans ce cas, aucun code de ce bloc ne s’exécute, donc aucune entrée vidéo non valide n’est insérée dans la base de données. Et bien sûr, vous n’êtes pas redirigé vers la page Films .

Le bloc de code complet, y compris le code de validation, ressemble maintenant à cet exemple :

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

Affichage des erreurs de validation

La dernière étape consiste à afficher les messages d’erreur. Vous pouvez afficher des messages individuels pour chaque erreur de validation, ou afficher un résumé, ou les deux. Pour ce tutoriel, vous allez effectuer les deux afin de voir comment cela fonctionne.

En regard de chaque <input> élément que vous validez, appelez la Html.ValidationMessage méthode et transmettez-lui le nom de l’élément <input> que vous validez. Vous placez la méthode à l’emplacement Html.ValidationMessage où vous souhaitez que le message d’erreur s’affiche. Lorsque la page s’exécute, la Html.ValidationMessage méthode affiche un <span> élément dans lequel l’erreur de validation se produit. (S’il n’y a pas d’erreur, l’élément <span> est affiché, mais il n’y a pas de texte.)

Modifiez le balisage dans la page afin qu’il inclue une Html.ValidationMessage méthode pour chacun des trois <input> éléments de la page, comme cet exemple :

<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 fonctionne le résumé, ajoutez également le balisage et le code suivants juste après l’élément <h1>Add a Movie</h1> sur la page :

@Html.ValidationSummary()

Par défaut, la Html.ValidationSummary méthode affiche tous les messages de validation dans une liste (élément <ul> qui se trouve à l’intérieur d’un <div> élément). Comme pour la Html.ValidationMessage méthode, le balisage du résumé de validation est toujours affiché ; s’il n’y a pas d’erreur, aucun élément de liste n’est rendu.

Le résumé peut être une autre façon d’afficher les messages de validation au lieu d’utiliser la Html.ValidationMessage méthode pour afficher chaque erreur spécifique à un champ. Vous pouvez également utiliser un résumé et les détails. Vous pouvez également utiliser la Html.ValidationSummary méthode pour afficher une erreur générique, puis utiliser des appels individuels Html.ValidationMessage pour afficher les détails.

La page complète ressemble maintenant à cet exemple :

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Add a Movie</title>
</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>

Vous avez terminé. Vous pouvez maintenant tester la page en ajoutant un film, mais en laissant de côté un ou plusieurs champs. Dans ce cas, vous voyez l’affichage d’erreur suivant :

Page Ajouter un film affichant les messages d’erreur de validation

Style des messages d’erreur de validation

Vous pouvez voir qu’il existe des messages d’erreur, mais ils ne se distinguent pas vraiment très bien. Il existe cependant un moyen simple de mettre en forme les messages d’erreur.

Pour appliquer un style aux messages d’erreur individuels affichés par Html.ValidationMessage, créez une classe de style CSS nommée field-validation-error. Pour définir la recherche du résumé de validation, créez une classe de style CSS nommée validation-summary-errors.

Pour voir le fonctionnement de cette technique, ajoutez un <style> élément à l’intérieur de la <head> section de la page. Définissez ensuite des classes de style nommées field-validation-error et validation-summary-errors qui contiennent les règles suivantes :

<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 devez probablement placer des informations de style dans un fichier .css distinct, mais par souci de simplicité, vous pouvez les placer dans la page pour l’instant. (Plus loin dans cet ensemble de tutoriels, vous allez déplacer les règles CSS vers un fichier .css distinct.)

En cas d’erreur de validation, la Html.ValidationMessage méthode affiche un <span> élément qui inclut class="field-validation-error". En ajoutant une définition de style pour cette classe, vous pouvez configurer à quoi ressemble le message. En cas d’erreurs, la ValidationSummary méthode affiche également dynamiquement l’attribut class="validation-summary-errors".

Réexécutez la page et excluez délibérément quelques champs. Les erreurs sont désormais plus visibles. (En fait, ils sont trop, mais c’est juste pour montrer ce que vous pouvez faire.)

Page Ajouter un film montrant les erreurs de validation qui ont été stylées

Ajout d’un lien à la page Films

Une dernière étape consiste à faciliter l’accès à la page AddMovie à partir de la liste de films d’origine.

Ouvrez à nouveau la page Films . Après la balise fermante </div> qui suit l’assistance WebGrid , ajoutez le balisage suivant :

<p>
  <a href="~/AddMovie">Add a movie</a>
</p>

Comme vous l’avez vu précédemment, ASP.NET interprète l’opérateur ~ comme la racine du site web. Vous n’avez pas besoin d’utiliser l’opérateur ~ ; vous pouvez utiliser le balisage <a href="./AddMovie">Add a movie</a> ou une autre façon de définir le chemin d’accès que HTML comprend. Toutefois, l’opérateur ~ est une bonne approche générale lorsque vous créez des liens pour des pages Razor, car il rend le site plus flexible. Si vous déplacez la page active vers un sous-dossier, le lien ira toujours à la page AddMovie . (N’oubliez pas que l’opérateur ~ fonctionne uniquement dans les pages .cshtml . ASP.NET le comprend, mais il ne s’agit pas d’un code HTML standard.)

Lorsque vous avez terminé, exécutez la page Films . Elle ressemblera à cette page :

Page Films avec lien vers la page « Ajouter des films »

Cliquez sur le lien Ajouter un film pour vous assurer qu’il accède à la page AddMovie .

À venir

Dans le tutoriel suivant, vous allez apprendre à autoriser les utilisateurs à modifier des données qui se trouvent déjà dans la base de données.

Liste complète pour la page AddMovie

@{

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

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

Ressources supplémentaires

Présentation de la programmation Web ASP.NET à l'aide de la syntaxe Razor
INSTRUCTION SQL INSERT INTO sur le site W3Schools
Validation des entrées utilisateur dans pages Web ASP.NET sites. Plus d’informations sur l’utilisation de l’assistance Validation .

Précédent Suivant

Partager via

Présentation de pages Web ASP.NET - Saisie de données de base de données à l’aide de formulaires

Contenu

Création du formulaire d’entrée de base

Obtention des valeurs de formulaire

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

Test de la commande Insert (Jusqu’à présent)

Validation de l'entrée utilisateur

L’assistance de validation

Affichage des erreurs de validation

Style des messages d’erreur de validation

Ajout d’un lien à la page Films

À venir

Liste complète pour la page AddMovie

Ressources supplémentaires

Commentaires

Ressources supplémentaires