PRESENTATION D'ASP.NET WEB PAGES

Ce tutoriel vous montre les bases de la création d'un formulaire de saisie et de la gestion des saisies des utilisateurs lorsque vous utilisez ASP.NET Web Pages (Razor). Maintenant que vous avez une base de données, vous allez utiliser vos compétences sur les formulaires pour permettre aux utilisateurs de trouver des films spécifiques dans la base de données. Cela suppose que vous avez terminé la lecture de Présentation d'ASP.NET Web Page — Affichage des données.

I-A. Qu'allez-vous apprendre ?▲

I-B. Fonctionnalités/technologies abordées :▲

Dans le tutoriel précédant, vous avez créé une base de données, ajouté des données et utilisé le WebGrid helper pour les afficher. Dans ce tutoriel, vous allez ajouter une boîte de dialogue « rechercher » qui vous permettra de trouver des films pour un genre spécifique ou dont le titre contient n'importe quel mot que vous entrez (par exemple, vous serez capable de trouver tous les films dont le genre est « action » ou dont le titre contient « Harry » ou « Adventure »).

Lorsque vous aurez fini ce tutoriel, vous aurez une page comme ceci :

La partie "liste" de la page est identique à celle du tutoriel précédant — une grille. La différence sera que la grille affichera seulement les films que vous aurez recherchés.

Si vous avez une expérience dans la création de formulaire HTML et connaissez la différence entre GET et POST, vous pouvez sauter cette section.

Un formulaire a des éléments de saisie pour les utilisateurs, zones de textes, boutons, boutons radio, cases à cocher, listes déroulantes, et d'autres encore. Les utilisateurs remplissent ces contrôles ou effectuent des sélections et ensuite envoient le formulaire en cliquant sur un bouton.

La syntaxe HTML de base d'un formulaire est illustrée dans cet exemple :

<form method="post">
  <input type="text" name="name" value="" />
  <br/>
  <input type="submit" name="submit" value="Submit" />
</form>

Lorsque ce balisage s'exécute dans une page, il crée un simple formulaire qui ressemble à cette illustration :

L'élément <form> inclut les éléments HTML devant être soumis (une méprise facile à faire est d'ajouter des éléments à la page, mais d'oublier de les positionner à l'intérieur de l'élément <form>. Dans ce cas, rien n'est soumis). L'attribut method indique au navigateur comment soumettre l'entrée utilisateur. La méthode indique seulement comment sont passés les paramètres :

- GET : via l’URL ;

- POST : via le corps de la requête,

III-A. Sécurité des verbes HTTP, GET, POST▲

III-B. HTML5 et les formulaires de saisie.▲

Dans WebMatrix, dans l'espace de travail File, ouvrez la page Movies.chtml.

Après la balise de fermeture </h1> et avant la balise d'ouverture <div> de l'appel grid.GetHtml, ajoutez le balisage suivant :

<form method="get">
  <div>
    <label for="searchGenre">Genre to look for:</label>
    <input type="text" name="searchGenre" value="" />
    <input type="Submit" value="Search Genre" /><br/>
    (Leave blank to list all movies.)<br/>
    </div>
</form>

Ce balisage crée un formulaire qui a une « textbox » nommée SearchGenre et un bouton soumettre. La « textbox » et le bouton soumettre sont inclus dans l'élément <form> dont l'attribut method est get (rappelez-vous que si vous ne placez pas la « textbox » et le bouton soumettre à l'intérieur de l'élément <form>, rien ne sera soumis lorsque vous cliquerez sur le bouton). Ici, vous utilisez le verbe GET parce que vous créez un formulaire qui n'effectuera aucun changement sur le serveur — il en résultera juste une recherche (dans le tutoriel précédant, vous avez utilisé une méthode POST, avec laquelle vous soumettiez des changements sur le serveur. Vous verrez de nouveau cela dans le tutoriel suivant).

Exécutez la page. Même si vous n'avez pas défini de comportement pour le formulaire, vous pouvez voir à quoi il ressemble :

Saisissez une valeur dans la « textbox », comme « Comedy ». Maintenant cliquez sur Search Genre.

Prenez note de l'URL de la page. Parce que vous avez placé l'attribut de method à get dans l'élément <form>, la valeur saisie fait maintenant partie de la chaîne de requête de l'URL, comme ceci :

http://localhost:45661/Movies.cshtml?searchGenre=Comedy

La page contient déjà du code qui prend des données dans la base de données et les affiche dans une grille. Maintenant vous devez ajouter du code qui lit la valeur d'une « textbox » et qui pourra aussi exécuter une requête SQL qui inclut le critère de recherche.

Parce que vous avez placé l'attribut method du formulaire à get, vous pouvez lire la valeur saisie dans la « textbox » en utilisant le code de la façon suivante :

var searchTerm = Request.QueryString["searchGenre"];

L'objet Request.QueryString (la propriété QueryString de l'objet Request) inclut les valeurs des éléments qui sont soumis dans une partie de l'opération GET. La propriété Request.QueryString contient une collection (une liste) des valeurs qui sont soumises dans le formulaire. Pour prendre chaque valeur individuellement, vous spécifiez le nom de l'élément que vous souhaitez. C'est pourquoi vous devez avoir un attribut name dans l'élément <input> (searchTerm) qui crée la « textbox » (pour plus d'information sur l'objet Request, regardez le paragraphe Objet Request plus bas).

Il est assez simple de lire la valeur de la « textbox ». Mais si l'utilisateur ne saisit rien dans celle-ci et clique sur Search quand même, vous pouvez ignorer ce clic, puisqu'il n'y a rien à chercher.

Le code suivant est un exemple qui montre comment implémenter ces conditions (vous n'avez pas à ajouter ce code maintenant, vous le ferez plus tard).

if(!Request.QueryString["searchGenre"].IsEmpty() ) {
     // Do something here
}

Le test se décompose ainsi :

• prendre la valeur de Request.QueryString["searchGenre"], à savoir, la valeur qui a été saisie dans l'élément <input> nommé searchGenre ;
• découvrir si elle est vide en utilisant la méthode IsEmpty. Cette méthode est standard pour déterminer si quelque chose (par exemple, un élément form) contient une valeur. Mais réellement, vous ne vous souciez que de savoir si elle n'est pas vide, donc... ;
• ajouter l'opérateur"!" au début du test IsEmpty. (l'opérateur"!" signifie un NON logique — logical NOT).

En bon français, la condition if se traduit ainsi : si l'élément searchGenre du formulaire n'est pas vide alors…

Ceci ouvre la voie à la création d'une requête qui utilise le critère de recherche. Vous allez voir ceci dans la partie suivante.

V-A. L'objet Request▲

var someValue = Request["name"];

Maintenant que vous savez comment obtenir le critère de recherche que l'utilisateur a saisi, vous pouvez créer des requêtes qui l’utilise. Souvenez-vous que pour obtenir tous les films de la base de données, vous avez utilisé une requête SQL qui ressemble à cette déclaration :

SELECT * FROM Movies

Pour obtenir seulement certains films, vous devez utiliser une requête qui contient une clause Where. Cette clause vous permet de définir une condition vérifiée par les lignes renvoyées par la requête. Voici un exemple :

SELECT * FROM Movies WHERE Genre = 'Action'

Le format classique est WHERE column = value. Vous pouvez utiliser différents opérateurs autre que =, comme > (supérieur à), < (inférieur à), <> (différent), <= (inférieur ou égal à), etc., en fonction de ce que vous voulez obtenir.

Dans le cas où vous vous posez la question, les instructions SQL ne sont pas sensibles à la casse — SELECT est identique à Select (ou aussi à select). Cependant, les gens écrivent les mots-clés des instructions SQL en majuscules, comme SELECT et WHERE, pour rendre plus facile la lecture.

VI-A. Passer le critère de recherche en paramètre▲

SELECT * FROM Movies WHERE Genre = @0

selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
 selectedData = db.Query(selectCommand, Request.QueryString["searchGenre"]);

if(!Request.QueryString["searchGenre"].IsEmpty() ) { 
    searchTerm = Request.QueryString["searchGenre"];
     selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
     selectedData = db.Query(selectCommand, searchTerm);
 }

Maintenant vous pouvez mettre à jour votre code dans le fichier Movies.cshtml. Pour commencer, remplacez le bloc de code en haut de la page par celui-ci :

var db = Database.Open("WebPagesMovies");
var selectCommand = "SELECT * FROM Movies";
var searchTerm = "";

Ici la différence est que vous placez la requête dans la variable SelectCommand, que vous passez plus tard à db.Query. Mettre l'instruction dans une variable vous permet de la changer plus tard, chose que vous allez faire pour réaliser la recherche.

Vous avez aussi enlevé ces deux lignes, que vous replacerez plus tard :

var selectedData = db.Query("SELECT * FROM Movies");
 var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

Vous ne voulez pas déjà exécuter la requête (c'est à dire, appeler db.Query) et vous ne voulez pas non plus initialiser WebbGrid helper. Vous ferez cela après avoir compris quelle instruction SQL s'exécutera.

Après avoir réécrit ce bloc, vous pouvez ajouter la nouvelle logique de gestion de recherche. Le code complet ressemble à ce qui suit. Mettez à jour le code dans votre page pour qu'il corresponde à cette page.

@{
    var db = Database.Open("WebPagesMovies") ;
    var selectCommand = "SELECT * FROM Movies";
    var searchTerm = "";

    if(!Request.QueryString["searchGenre"].IsEmpty() ) {
        selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
        searchTerm = Request.QueryString["searchGenre"];
    }

    var selectedData = db.Query(selectCommand, searchTerm);
    var grid = new WebGrid(source: selectedData, defaultSort: "Genre", rowsPerPage:3);
}

La page fonctionne maintenant ainsi. Chaque fois que la page s'exécute, le code ouvre la base de données et la variable SelectCommand est placé dans l'instruction SQL qui obtient tous les enregistrements de la table Movies. Le code initialise aussi la variable SearchTerm.

Cependant, si la requête courante inclut une valeur pour l'élément SearchGenre, le code définit une requête différente pour SelectCommand — à savoir, une version qui inclut une clause Where pour rechercher un genre. Il définit aussi SearchTerm pour tout ce qui est passé à la « textbox » de recherche (qui pourrait être vide).

Indépendamment de l'instruction SQL dans selectCommand, le code appelle ensuite db.Query pour exécuter la requête, en lui passant tout ce qui est dans SearchTerm. S'il n'y a rien dans SearchTerm , peu importe, car dans ce cas il n'y a aucun paramètre à remplacer dans selectCommand.

Finalement, le code initialise le WebGrid helper en utilisant le résultat de la requête, comme il faisait avant.

Vous pouvez constater qu'en plaçant l'instruction SQL et le critère de recherche dans des variables, vous avez ajouté de la flexibilité à votre code. Comme vous le verrez plus tard dans ce tutoriel, vous pourrez utiliser ce code de base et conserver cette logique d'ajout pour différents types de recherche.

Dans WebMatrix, exécutez la page Movies.cshtml. Vous verrez la page avec la « textbox » pour le genre.

Entrez un genre que vous avez saisi dans un de vos enregistrements de test, et cliquez sur Search. Cette fois, vous verrez juste une liste de films qui correspondent au genre :

Entrez différents genres et cherchez à nouveau. Essayez de saisir le genre en utilisant les lettres minuscules ou majuscules afin de voir que la recherche n'est pas sensible à la casse.(3)

VIII-A. « Se souvenir » de ce que l'utilisateur a saisi▲

Vous avez peut-être remarqué qu'après avoir saisi un genre et cliqué sur Search genre, vous voyez une liste concernant ce genre. Cependant, la « textBox » de recherche est vide — en d'autres termes, la fonctionn'a pas mémorisé ce que vous avez entré.

Il est important de comprendre ce fonctionnement obscur. Lorsque vous soumettez une page, le navigateur envoie une requête au serveur web. Lorsque ASP.NET reçoit celle-ci, il crée une Une nouvelle instance de cette page, exécute le code qu'elle contient, et renvoie la page au navigateur. Cependant la page envoyée ne sait pas que vous venez juste de travailler avec une version précédente d'elle même. Tout ce qu'elle sait c'est qu'elle a reçu une requête qui a ajouté certaines données.

Chaque fois que vous demandez une page — que ce soit la première fois ou en la soumettant — vous obtenez une nouvelle page. Le serveur web ne mémorise pas pour vous la dernière requête. Pas plus qu’ASP.NET ou le navigateur. La seule connexion entre les différentes instances de la page sont les données que vous transmettez entre elles. Si vous soumettez une page, par exemple, la nouvelle instance de la page peut obtenir des données qui ont été envoyées par l'instance précédente (une autre façon de passer des données entre les pages et d'utiliser les cookies).

Une façon formelle pour décrire cette situation est de dire que les pages sont stateless (sans état). Les serveurs web, les pages elles-mêmes et les éléments de la page ne conservent aucune information de l'état de la page précédente. Le web a été conçu ainsi parce que maintenir l'état des requêtes individuelles épuiserait rapidement les ressources des serveurs web, qui traitent souvent des milliers, voire même des centaines de milliers de requêtes par seconde.

Cela explique pourquoi la « textBox » est vide. Après que vous ayez soumit la page, ASP.NET crée une nouvelle instance de la page et exécute le code et le balisage. Dans ce code rien ne dit à ASP.NET de mettre une valeur dans la « texBox ». Aussi ASP.NET ne fait rien, et la « textBox » à été ré-affichée sans valeur.

Il existe effectivement un moyen facile de contourner ce problème. Le genre que vous avez saisi dans la « textBox » est disponible dans le code — c'est dans Request.QueryString["searchGenre"].

Mettez à jour le balisage pour la « textBox » afin que l'attribut value obtienne sa valeur de searchTerm, comme dans cet exemple :

 

Sélectionnez

<input type="text" name="searchGenre" value="@Request.QueryString["searchGenre"]" />

Dans cette page, vous pouvez aussi avoir assigné l'attribut value à la variable searchTerm, puisque cette variable contient aussi le genre que vous avez saisi. Mais la méthode standard est d'utiliser l'objet Request pour assigner l'attribut value, comme illustré ici (en supposant que vous procédez ainsi normalement — dans certains cas, vous pouvez afficher la page sans valeur dans les champs. Cela dépend de ce que vous voulez faire avec votre application).

Note : vous ne devez pas conserver la valeur d'une « textBox » qui est utilisée pour le mot de passe. Ce serait une faille de sécurité qui permettrait à des personnes de remplir le champ du mot de passe en utilisant du code.

Exécutez à nouveau la page, saisissez un genre, et cliquez sur Search Genre. Cette fois non seulement vous voyez le résultat de la recherche, mais la « textBox » se souvient de votre saisie :

Vous pouvez maintenant rechercher n'importe quel genre, mais vous pouvez aussi rechercher un titre. Il est difficile de saisir exactement un titre entier lorsque vous faites une recherche, aussi vous pouvez rechercher un mot qui apparaît n'importe où dans le titre. Pour faire cela en SQL, vous utilisez l'opérateur LIKE avec la syntaxe suivante :

SELECT * FROM Movies WHERE Title LIKE '%adventure%'

Cette commande obtient tous les films dont le titre contient « adventure ». Lorsque vous utilisez l'opérateur LIKE, vous incluez un caractère générique « % » comme partie intégrante du critère de recherche. La recherche LIKE 'adventure%' signifie « commençant par adventure » (techniquement, cela signifie « la chaîne adventure suivie de n'importe quoi ».), de façon similaire, la recherche LIKE '%adventure' signifie « quoi que ce soit suivi par la chaîne adventure », qui est une autre façon de dire « se terminant par adventure ».

L'expression de recherche LIKE '%adventure%' signifie donc « avec 'adventure' n'importe où dans le titre ». (Techniquement « n'importe quoi dans le titre, suivi par 'adventure', suivi par n'importe quoi ».)

À l'intérieur de l'élément <form>, ajoutez le balisage suivant au dessus du tag de fermeture </div> pour la recherche du genre (juste avant l'élément de fermeture </form>) :

<div>
  <label for="SearchTitle">Movie title contains the following:</label>
  <input type="text" name="searchTitle" value="@Request.QueryString["searchTitle"]" />
  <input type="Submit" value="Search Title" /><br/>
</div>

Le code permettant de gérer cette recherche est similaire au code de recherche par genre, sauf que vous devez construire la recherche avec LIKE. Dans le bloc de code en haut de la page ajoutez ce bloc if juste après le bloc if pour la recherche par genre :

if(!Request.QueryString["searchTitle"].IsEmpty() ) {
    selectCommand = "SELECT * FROM Movies WHERE Title LIKE @0";
    searchTerm = "%" + Request["searchTitle"] + "%";
}

Ce code utilise la même logique que vous avez vu auparavant, sauf que la recherche utilise l'opérateur LIKE et le code place « % » avant et après le critère de recherche.

Remarquez comme il est facile d'ajouter un autre type de recherche dans la page. Tout ce que vous aviez à faire est :

• créer un bloc if qui teste si la « textBox » a un critère de recherche ;
• assigner une nouvelle instruction à la variable selectCommand ;

• assigner à la variable searchTerm la valeur à passer à la requête.

  Voici le bloc de code complet, qui contient la nouvelle logique de recherche pour un titre :

   

  Sélectionnez

  1.
  2.
  3.
  4.
  5.
  6.
  7.
  8.
  9.
  10.
  11.
  12.
  13.
  14.
  15.
  16.
  17.
  18.
  

  @{
      var db = Database.Open("WebPagesMovies") ;
      var selectCommand = "SELECT * FROM Movies";
      var searchTerm = "";
  
      if(!Request.QueryString["searchGenre"].IsEmpty() ) {
          selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
          searchTerm = Request.QueryString["searchGenre"];
      }
  
     if(!Request.QueryString["searchTitle"].IsEmpty() ) {
          selectCommand = "SELECT * FROM Movies WHERE Title LIKE @0";
          searchTerm = "%" + Request["searchTitle"] + "%";
      }
  
      var selectedData = db.Query(selectCommand, searchTerm);
      var grid = new WebGrid(source: selectedData, defaultSort: "Genre", rowsPerPage:8);
  }
  

  Voici un résumé de ce que fait le code :

• les variables searchTerm et selectCommand sont initialisées en haut. Vous définissez ces variables pour le critère de recherche (le cas échéant) et pour la commande SQL en fonction des saisies de l'utilisateur dans la page. La recherche par défaut est le cas simple pour obtenir tous les films de la base de donées ;

• dans les tests pour searchGenre et searchTitle, le code affecte searchTerm à la valeur que vous voulez rechercher. Ces blocs de code affectent aussi selectCommand à une commande SQL appropriée pour cette recherche ;

• la méthode db.Query est appelée une seule fois, peu importe la commande SQL utilisée dans selectCommand et la valeur dans searchTerm. S'il n'y aucun critère de recherche (pas de genre et pas de mot du titre), la valeur de searchTerm est une chaîne vide. Cependant, ça ne fait rien, parce que dans ce cas, la requête ne requiert pas de paramètres.

Maintenant vous pouvez tester votre page de recherche complétée. Exécutez Movies.cshtml.

Entrez un genre et cliquez sur Search Genre. La grille affiche les films de ce genre, comme avant.

Entrez un titre et cliquez sur Search Title. La grille affiche les films qui ont ce mot dans le titre.

Laissez les deux zones de textes vides et cliquez sur chaque bouton. La grille affiche tous les films.

Vous avez peut-être remarqué que les recherches que vous pouvez effectuer sont exclusives. Vous ne pouvez pas rechercher le titre et le genre en même temps. Par exemple, vous ne pouvez pas chercher tous les films d'action qui contiennent dans le titre le mot « Adventure » (telle que la page est codée actuellement, si vous saisissez des valeurs pour le titre et le genre, la priorité est donnée à la recherche sur le titre). Pour créer une recherche qui combine les conditions, vous devez créer une requête SQL dont la syntaxe ressemblent à ce qui suit :

SELECT * FROM Movies WHERE Genre = @0 AND Title LIKE @1

Et vous auriez exécuté la requête en utilisant une instruction comme la suivante (grosso modo) :

var selectedData = db.Query(selectCommand, searchGenre, searchTitle);

Créer une logique afin de permettre de nombreuses permutations de critères de recherche peut devenir compliqué, comme vous pouvez le voir. Donc, nous allons nous arrêter ici.

Dans le prochain tutoriel, vous créerez une page utilisant un formulaire qui permettra aux utilisateurs d'ajouter des films à la base de données.

• Introduction to ASP.NET Web Programming Using the Razor Syntax ;
• SQL WHERE Clause sur le site W3Schools ;
• l'article Method Definition sur le site W3C.

Mike Pope — Mike Pope est un programmeur, créateur de l'équipe chargée du suivi du contenu sur la plate-forme Web et Outils Microsoft.

Tom FitzMacken — Tom FitzMacken est un auteur senior dans la programmation, créateur et membre de l'équipe chargée du du contenu sur la plate-forme Web et Outils.

XVI-A. Remerciements▲

XVI-B. Sources▲