PRÉSENTATION D'ASP.NET WEB PAGES

• la base de la syntaxe « Razor » que vous utiliserez pour programmer avec ASP.NET Web Pages ;
• quelques bases C#, qui est le langage de programmation que vous utiliserez ;
• quelques concepts fondamentaux de programmation pour les Pages Web ;
• comment installer des packages (composants contenant du code prédéfini) à utiliser avec votre site ;
• comment utiliser des assistants pour effectuer des tâches de programmation courantes.

• NuGet et le gestionnaire de package ;
• l'assistant de Gravatar.

Ce tutoriel est principalement un exercice d'introduction à la syntaxe de programmation que vous utiliserez pour ASP.NET Web Pages. Vous apprendrez la syntaxe Razor et le code qui est écrit avec le langage de programmation C#. Vous avez eu un aperçu de cette syntaxe dans le tutoriel précédent ; dans celui-ci nous allons plus vous expliquer cette syntaxe.

Nous vous assurons que ce tutoriel est le plus axé sur la programmation que vous pourrez voir dans cette série, et que c'est le seul dédié à la programmation. Dans les tutoriels restants de cette série, vous créerez des pages qui contiennent des choses intéressantes.

Vous découvrirez aussi les assistants (helpers). Un assistant est un composant — un morceau de code dans un package — que vous pouvez ajouter à la page. L'assistant effectue pour vous le travail qui s'avérerait fastidieux et complexe à coder manuellement.

Un objet est une chose avec laquelle vous pouvez programmer — une page, une TextBox, un fichier, une image, une requête web, un message email, un enregistrement client, etc. Les objets ont une ou plusieurs propriétés qui décrivent leurs caractéristiques. Un objet TextBox a une propriété Text (parmi d'autres), un objet request a une propriété Url (et d'autres), un message email a une propriété From et une propriété To, et ainsi de suite. Les objets ont aussi des méthodes qui sont les « verbes » qu'ils peuvent effectuer. Vous travaillerez beaucoup avec les objets.

Dans le corps de la page, notez ce qui suit :

<div>
  <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
  <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
  <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>

<div>
  <p>The technology is @technology, and the product is @product.</p>
  <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>

<div>
  <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>

Encore une fois, le caractère @ indique à ASP.NET qu'il s'agit de code, pas d'HTML. Dans le balisage vous pouvez ajouter @ suivi par une expression de code, et ASP.NET renverra la valeur de l'expression à droite de ce caractère. Dans l'exemple, @a renverra la valeur de la variable nommée a, @produc renverra la valeur de la variable nommée produc, et ainsi de suite.

Cependant, vous n'êtes pas limité aux variables. Dans certains cas, le caractère @ précède une expression :

• @(a*b) renverra le produit des variables a et b (l'opérateur * signifie multiplication) ;
• @(technology + «   » + product) renverra la valeur des variables technology et product après leur concaténation et en ayant ajouté une espace entre les deux. L'opérateur + pour la concaténation des chaînes de caractères est le même que l'opérateur pour ajouter des nombres. ASP.NET peut déterminer si vous travaillez avec des nombres ou des chaînes de caractères et utiliser correctement l'opérateur + ;
• @Request.Url renverra la propriété Url de l'objet Request. L'objet Request contient les informations de la demande en cours du navigateur, et bien sûr la propriété Url contient l'URL de cette demande.

L'exemple est également présenté pour montrer que vous pouvez travailler de différentes façons. Vous pouvez faire des calculs dans le bloc de code en haut, mettre le résultat dans une variable, et restituer le contenu de la variable dans le balisage. Ou vous pouvez faire les calculs dans une expression directement dans le balisage. L'approche que vous utiliserez dépendra de ce que vous voulez faire et, dans une certaine mesure, selon vos préférences.

Faite un clic-droit sur le nom du fichier et choisissez Launch in browser. Vous voyez la page dans le navigateur avec toutes les valeurs et expressions résolues dans la page.

Regarder la source dans le navigateur.

Comme vous vous souvenez de votre expérience dans le précédant tutoriel, aucun code Razor n'est présent dans la page. Tout ce que vous voyez, ce sont les valeurs d'affichage réelles. Lorsque vous exécutez une page, vous effectuez en fait une demande au serveur web intégré à WebMatrix. Lorsque la demande est reçue, ASP.NET résout toutes les valeurs et expressions puis renvoie leurs valeurs dans la page. Il envoie ensuite la page au navigateur.

Jusqu'à présent il est vrai que nous avons dit que vous travaillerez avec la syntaxe Razor, mais ce n'est pas tout à fait exact. Le véritable langage de programmation que vous utilisez est appelé C#(2). C# a été créé par Microsoft il y a plus de dix ans(3). Il est devenu l’un des principaux langages de programmation pour créer des applications Windows. Toutes les règles que vous avez vues jusqu'à présent pour nommer une variable ou comment créer des déclarations, etc. sont en fait toutes des règles du langage C#.

Razor se réfère plus spécialement à un petit ensemble de convention sur la façon d'intégrer ce code dans la page. Par exemple, la convention d'utiliser @ pour marquer le code dans la page et d'utiliser @{} pour intégrer un bloc de code est un des aspects d'une page utilisant Razor. La syntaxe Rasor est aussi utilisée ailleurs et pas seulement dans ASP.NET Web Pages (par exemple, elle est aussi utilisé dans les vues d'ASP.NET MVC(4)).

Nous mentionnons cela parce que si vous recherchez des informations sur la programmation ASP.NET Web Pages, vous trouverez beaucoup de référence à Razor. Cependant, beaucoup de ces références ne s 'appliquent pas à ce que vous faites et cela peut porter à confusion. En effet, bon nombre de vos questions de programmation concerneront le travail avec C# et ASP.NET. Donc si vous recherchez des informations spécifiques à Razor, vous risquez de ne pas trouver de réponses appropriées.

Ce que vous venez juste d'ajouter est une condition. Dans le code, une condition a une structure comme suit :

if(some condition){
    One or more statements here that run if the condition is true;
}

La condition à tester est entre parenthèses. Ce doit être une valeur ou une expression qui retourne true (vrai) ou false (faux). Si la condition est vraie, ASP.NET exécute la ou les instructions qui sont à l'intérieur des accolades. (Ceci est la partie then de la logique if-then.) Si la condition est fausse, alors le bloc de code est ignoré.

Voici quelques exemples de conditions que vous pouvez tester dans une instruction if.

if(currentValue > 12) { ... }

if(dueDate <= DateTime.Today) { ... }

if(IsDone == true) { ... }

if(IsPost) { ... }

if(!IsPost) { ... }

if(a != 0) { ... }

if(fileProcessingIsDone != true && displayMessage == false) { ... }

Vous pouvez tester des variables par rapport à des valeurs ou des expressions en utilisant les opérateurs logiques ou les opérateurs de comparaison : égal à (==), supérieur à (>), inférieur à (<), supérieur ou égal à (>=), et inférieur ou égal à (<=). L'opérateur != signifie non égal à, par exemple, if(a!=0) signifie si a n'est pas égal à 0.

Note : soyez sûr que vous avez noté que l'opérateur de comparaison pour l'égalité == n'est pas le même que =. L'opérateur = est utilisé seulement pour assigner des valeurs (var a=2). Si vous mixez ces opérateurs, vous obtiendrez soit une erreur, soit un comportement étrange.

Pour tester si quelque chose est vrai, la syntaxe complète est if(IsDone==true). Mais vous pouvez aussi utiliser le raccourci if(IsDone). S'il n'y a pas d'opérateur de comparaison, ASP.NET présume que vous testez la valeur « vrai ».

L'opérateur ! par lui-même signifie un non logique. Par exemple, la condition if(!IsPost) signifie si IsPost n'est pas vrai.

Vous pouvez combiner des conditions en utilisant le And logique (l'opérateur &&) ou le OR logique (l'opérateur ||). Par exemple, la dernière condition if dans l'exemple précédant signifie sifileProcessingIsDone est vrai et displayMessage est faux.

Une dernière chose à savoir sur le bloc if : un bloc if peut être suivi par un bloc else. Un bloc else est utilisé si vous avez à exécuter un code différent si la condition est fausse. Voici un exemple simple :

var message = "";
if(errorOccurred == true)
{
    message = "Sorry, an error occurred."; 
}
else
{
    message = "The process finished without errors!";
}

Vous verrez quelques exemples dans les tutoriels suivants de cette série d’utilisation du bloc else.

Il y a plus, mais revenons à notre exemple, lequel a une condition if(!IsPost){…} . IsPost est en fait une propriété de la page courante. La première fois que la page est demandée, IsPost renvoie faux. Cependant, si vous cliquez sur un bouton ou si vous envoyez la page — autrement dit, vous la publiez — IsPost renvoi vrai. Aussi IsPost vous permet de déterminer si vous avez affaire à l'envoi du formulaire. (En terme de verbe HTTP, si la demande est une opération GET, IsPost renvoie false, si c'est une opération POST, IsPost renvoie true.) Dans un prochain tutoriel, vous travaillerez avec des formulaires de saisies où ce test deviendra particulièrement intéressant.

Exécutez la page. Puisque c'est la première fois que vous demandez la page, vous voyez « This is the first time you've requested the page ». Cette chaîne de caractères est la valeur que vous avez initialisée dans la variable message. Il y a un test if(IsPost), mais qui renvoie faux à cet instant, aussi le code à l'intérieur du bloc if ne s'exécute pas.

Cliquez sur le bouton Submit. La page est redemandée. Comme avant, la variable message est définie avec « This is the first time … ». Mais cette fois, le test (if(IsPost)) renvoie vrai, aussi le code dans le bloc if s'exécute. Le code change la valeur de la variable message avec une nouvelle valeur, laquelle est restituée dans le balisage.

Maintenant, ajoutez une condition dans le balisage. Sous l'élément <p> qui contient le bouton Submit, ajoutez le balisage suivant :

@if(IsPost){
  <p>You submitted the page at @DateTime.Now</p>
}

Vous avez ajouté le code à l'intérieur du balisage, aussi vous avez commencé avec @. C'est un test if similaire à celui que vous aviez ajouté précédemment dans le bloc de code en haut. Cependant, à l'intérieur des accolades, vous ajoutez du HTML ordinaire — c'est du classique jusqu'à ce que vous arriviez à @DateTime.Now. C'est un autre petit bout de code Razor, aussi vous avez ajouté @ devant.

Le point à noter est que vous pouvez ajouter la condition if à la fois dans le bloc de code en haut et dans le balisage. Si vous utilisez une condition if dans le corps de la page, les lignes à l'intérieur du bloc peuvent être du balisage ou du code. Dans ce cas, comme chaque fois que vous mélangez du balisage et du code, vous devez utiliser @ pour signaler clairement à ASP.NET qu'il s'agit de code.

Exécutez la page et cliquez sur Submit. À ce moment, non seulement vous voyez un message différent lorsque vous soumettez la page (« You submitted … »), mais vous voyez un nouveau message qui indique la date et l'heure.

Un autre test. Cette fois, vous allez ajouter un bloc if qui teste une valeur nommée show qui sera passée dans l'adresse Internet. Comme ceci : http://localhost:43097/TestRazorPart2.cshtml?show=true. Vous allez changer la page pour que le message que vous affichez (« This is the first time … », etc.) le soit seulement si la valeur de show est vraie.

Au début (mais à l'intérieur) du bloc de code en haut de la page, ajoutez le texte suivant :

var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
    showMessage = true;
}

Le bloc de code complet ressemble maintenant à l'exemple suivant (rappelez-vous que lorsque vous copiez le code dans la page, l'indentation peut être différente, mais que cela n'affecte pas la façon dont le code s'exécute).

@{
   var message = "This is the first time you've requested the page.";

   if(IsPost) {
      message = "Now you've submitted the page.";
   }

   var showMessage = false;
   if(Request.QueryString["show"].AsBool() == true) {
     showMessage = true;
   }
}

Le nouveau code dans le bloc initialise une variable nommée show dans l'adresse Internet. Il contient maintenant un test if pour voir une valeur dans l'adresse Internet. Lorsque vous demandez la page la première fois, il y a une URL qui ressemble à ceci :

http://localhost:43097/TestRazorPart2.cshtml

Le code détermine si l'URL contient une variable nommée show dans l'adresse Internet, comme dans cette version de l'URL :

http://localhost:43097/TestRazorPart2.cshtml?show=true

Le test regarde la propriété QueryString de l'objet Request. Si l'adresse Internet contient un élément nommé show et si cet élément est défini à vrai, le bloc if est exécuté et définit la variable showMessage à vrai.

Il y a un truc ici, comme vous pouvez le voir. Comme le nom l'indique, l'adresse Internet est une chaîne (NdT : QueryString). Cependant, vous pouvez tester uniquement vrai ou faux si la valeur que vous testez est une valeur booléenne (true/false). Avant de pouvoir tester la valeur de la variable show dans l'adresse Internet, vous devez la convertir en une valeur booléenne. C'est ce que fait la méthode AsBool — elle prend une chaîne en entrée et la convertit en une valeur booléenne. De toute évidence, si la chaîne est « true », la méthode AsBool convertie la valeur à vrai. Si la valeur de la chaîne est autre chose, AsBool renvoie faux.

Jusqu'à présent, nous avons seulement dit que lorsque vous créez une variable, vous utilisez le mot clé var. Cependant, ce n'est pas la seule façon de faire. En général pour manipuler des valeurs — pour ajouter des nombres, ou concaténer des chaînes de caractères, ou comparer des dates, ou tester vrai/faux — C# doit travailler avec une représentation interne appropriée de la valeur. C# peut généralement comprendre comment doit être cette représentation (autrement dit, de quel type est la donnée) basée sur ce que vous faite avec les valeurs. Cependant, de temps en temps, il ne pourra pas le faire. S'il ne peut pas, vous devez l'aider en indiquant explicitement comment C# doit représenter les données. La méthode AsBool fait cela — elle indique à C# que la valeur de chaîne « true » ou « false » doit être traitée comme une valeur booléenne. Des méthodes similaires existent pour représenter les chaînes de caractères d'autres types, comme AsInt (traite comme un entier), AsDateTime (traite comme une date et heure), AsFloat (traite comme un nombre à virgule flottante), et d'autres aussi. Lorsque vous utilisez ces méthodes As(), si C# ne peut pas représenter les valeurs de chaîne de caractères demandées, vous verrez une erreur.

Dans le balisage de la page, enlevez ou mettez en commentaire cet élément (ici il est placé en commentaire) :

<!-- <p>@message</p> -->

Là où vous avez enlevé ou mis le texte en commentaire, ajoutez ce qui suit :

@if(showMessage) {
  <p>@message</p>
}

Le test du if indique que si la variable showMessage est vraie, on rajoute un élément <p> avec la valeur de la variable message.

Dans le cas où vous n'êtes pas sûr de ce que vous venez de faire, voici un résumé :

• la variable message est initialisée avec une chaîne par défaut (« This is the first time … ») ;
• si la demande de la page est le résultat d'un submit (POST), la valeur de message est changée en « Now you've submittes … » ;
• la variable showMessage est initialisée à faux ;
• si l'adresse Internet contient ?show=true, la variable showMessage est définie à vrai ;
• dans le balisage, si showMessage est vrai, un élément <p> est rajouté qui montrera la valeur de message, si showMessage est faux, rien n'est rajouté à cet endroit dans le balisage ;
• dans le balisage, si la demande est un post, un élément <p> est rajouté qui affichera la date et l'heure.

Exécutez la page. Il n'y a pas de message, parce que showMessage est faux, aussi dans le balisage le test if(showMessage) renvoie faux.

Cliquez sur Submit. Vous voyez la date et l'heure, mais toujours pas de message.

Dans votre navigateur, allez dans la boîte de l'URL, et ajoutez le texte suivant à la fin de celle-ci : ?show=true et appuyez sur Entrée.

La page est de nouveau affichée. (Parce que vous changez l'URL, c'est une nouvelle requête, pas un submit.) Cliquez à nouveau sur submit. Le message est de nouveau affiché, ainsi que la date et l'heure.

Dans l'URL, changez ?show=true en ?show=false et appuyez sur Entrée. Submit (Envoyer) de nouveau la page. La page est de retour comme au départ — pas de message.

Telle que présentée précédemment, la logique de cet exemple est un peu artificielle. Cependant, si cela revient dans plusieurs de vos pages, cela prendra une ou plusieurs des formes présentées ici.

Nous remercions rv26t, François DORIN pour la relecture et la validation technique et jacques_jean pour la relecture orthographique.

Traduction de l'article de l'équipe de Microsoft ASP.NET — Introducing ASP.NET Web Pages - Programming Basics.