PRÉSENTATION D'ASP.NET WEB PAGES

Notions de base de programmation

Ce tutoriel vous montre la programmation dans ASP.NET Web Pages avec la syntaxe Razor et C#, ainsi que l'utilisation d'assistants pour simplifier certains développements.

3 commentaires Donner une note  l'article (5)

Article lu   fois.

Les deux auteur et traducteur

Traducteur : Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Préface

Ce tutoriel vous montre une autre façon de programmer dans ASP.NET Web Pages avec la syntaxe Razor.

Note de la rédaction Développez.com :
- ce tutoriel est basé sur la technologie ASP.NET Web Pages. Si elle est toujours d’actualité et peut continuer d’être utilisée sans aucun souci pour des projets existants, Microsoft recommande l’usage d’ASP.NET Core Razor Pages 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'est-ce que vous apprendrez ?

  • 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.

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

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

I-C. Introduction

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.

II. Créer une page pour jouer avec Razor

Dans cette section vous allez manipuler Razor. Ainsi vous pourrez avoir une idée de la syntaxe de base.

Lancez WebMatrix si ce n'est pas déjà fait. Vous utiliserez le site web que vous avez créé dans le tutoriel précédent : (Prise en main ToDo lien). Pour le rouvrir, cliquez sur My Sites et choisissez WebPageMovies :

Image non disponible

Sélectionnez l'espace de travail Files.

Dans le ruban, cliquez sur New pour créer une page. Sélectionnez CSHTML et nommez la nouvelle page TestRazor.cshtml.

Cliquez sur OK.Copiez le code suivant dans le fichier en remplaçant complètement ce qui existe.

Note : quand vous copiez du code ou du balisage depuis un exemple dans une page, l'indentation et l'alignement peut ne pas être le même que dans le tutoriel. L'indentation et l'alignement n'affecte pas l'exécution du code.

 
Sélectionnez
1.
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.
47.
48.
@{
   // Working with numbers
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings)
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects
   var rightNow = DateTime.Now;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax</title>
    <meta charset="utf-8" />
    <style>
    body {font-family:Verdana; margin-left:50px; margin-top:50px;}
    div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    span.bright {color:red;}
    </style>
  </head>
<body>
  <h1>Testing Razor Syntax</h1>
  <form method="post">

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

  </form>
</body>
</html>

III. Examinons la page d'exemple

La plus grande partie du code que vous voyez est de l'HTML ordinaire. Cependant, en haut il y a ce bloc de code :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
@{
   // Working with numbers.
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings).
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects.
   var rightNow = DateTime.Now;
}

Notez les éléments suivants dans ce bloc de code :

  • le caractère @ indique à ASP.NET que ce qui suit est du code Razor, pas de l'HTML. ASP.NET traitera tout ce qui est après le caractère @ comme du code jusqu'à ce qu'il rencontre de nouveau du HTML (dans ce cas, c'est l'élément <!DCOTYPE>) ;
  • les accolades { et } encapsulent le bloc de code Razor si celui-ci a plus d'une ligne. Les accolades indiquent à ASP.NET où le code de ce bloc commence et où il finit ;
  • les caractères // indiquent un commentaire — c'est une partie du code qui ne sera pas exécuté ;
  • chaque instruction doit se terminer avec un point-virgule (;) (sauf les commentaires) ;
  • vous pouvez stocker les valeurs dans des variables, que vous créez (déclarez) avec le mot clé var(1). Lorsque vous créez une variable, vous lui donnez un nom, lequel peut inclure des lettres, des nombres et le trait de soulignement (_). Les noms de variables ne peuvent pas commencer avec un chiffre et ne peuvent pas utiliser le nom d'un mot clé du langage (comme var) ;
  • vous incluez les chaînes de caractères (comme « ASP.NET » et « Web Pages ») entre guillemets droits ("). Les nombres ne sont pas entre guillemets ;
  • les espaces à l'extérieur des guillemets ne sont pas gênant. La plupart des sauts de ligne n'ont pas d'importance ; l'exception est que vous ne pouvez pas répartir une chaîne de caractères entre guillemets sur plusieurs lignes. L'indentation et l'alignement ne sont pas pris en compte ;

Une chose qui n'est pas évidente à partir de cet exemple est que le code est sensible à la casse. Cela signifie que la variable TheSum est une variable différente d'une autre nommée theSum ou thesum. De même, var est un mot clé du langage, mais Var non.

III-A. Les objets, les propriétés et les méthodes

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.

III-B. Utilisation du code pour restituer le balisage dans la page

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

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<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.

III-C. Voir le code en action

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.

Image non disponible

Regarder la source dans le navigateur.

Image non disponible

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.

III-D. Razor et C#

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.

IV. Ajouter une logique conditionnelle

Une fonctionnalité remarquable de l'utilisation du code dans une page est que vous pouvez modifier le déroulement suivant différentes conditions. Dans cette partie du tutoriel, vous allez jouer avec quelques façons de changer l'affichage dans la page.

L'exemple sera simple et un peu arrangé pour que nous puissions nous concentrer sur la logique conditionnelle. La page que vous créerez fera ceci :

  • montrer différents textes sur la page suivant que c'est la première fois que la page est affichée ou si vous avez cliqué sur le bouton pour envoyer la page. Ce sera le premier test conditionnel ;
  • afficher un message seulement si une certaine valeur est passée dans l'adresse Internet de l'URL (http://,,,?show=true). Ce sera le second test conditionnel.

Dans WebMatrix, créez une page et nommez la TestRazorPart2,cshtml (dans le ruban, cliquez sur New, choisissez CSHTML, nommé le fichier, et cliquez sur OK).

Remplacez le contenu de la page avec le texte suivant :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
@{
   var message = "This is the first time you've requested the page.";
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax - Part 2</title>
    <meta charset="utf-8" />
    <style>
      body {font-family:Verdana; margin-left:50px; margin-top:50px;}
      div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    </style>
  </head>
  <body>
  <h1>Testing Razor Syntax - Part 2</h1>
  <form method="post">
    <div>
      <p>@message</p>
      <p><input type="submit" value="Submit" /></p>
  </div>
  </form>
</body>
</html>

Le bloc de code au début initialise une variable nommée message avec du texte. Dans le corps de la page, le contenu de la variable message est affiché à l'intérieur de l'élément <p>. Le balisage contient aussi un élément <input> pour créer un bouton Submit.

Exécutez la page pour voir comment cela fonctionne maintenant. Pour le moment, c'est une page statique, même si vous cliquez sur le bouton Submit.

Revenez à WebMatrix. À l'intérieur du bloc de code, ajoutez le code (en surbrillance) if suivant après la ligne qui initialise le message :

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

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

IV-A. Le bloc if {}

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

 
Sélectionnez
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.

 
Sélectionnez
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.

IV-B. Le bloc else

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 :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
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.

IV-C. Tester si la demande est un submit (POST)

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 :

 
Sélectionnez
@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.

Image non disponible

IV-D. Tester la valeur d'une adresse Internet

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 :

 
Sélectionnez
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).

 
Sélectionnez
@{
   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.

IV-E. Type de données et méthode As()

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) :

 
Sélectionnez
<!-- <p>@message</p> -->

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

 
Sélectionnez
@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.

IV-F. Résumé de la logique conditionnelle

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.

Image non disponible

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.

Image non disponible

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.

V. Installation d'un programme d'assistance (affichage d'une image Gravatar)

Certaines tâches que les gens veulent souvent faire sur les pages web nécessitent beaucoup de code ou des connaissances supplémentaires. Exemples : afficher un graphique depuis des données ; placer un bouton FaceBook « Like » sur la page ; envoyer un email depuis votre site web; recadrer ou redimensionner des images ; utiliser PayPal pour votre site. Pour faciliter la réalisation de toutes ces choses, ASP.NET vous permet d'utiliser des assistants. Les assistants sont des composants que vous installez pour un site et qui vous permettent d'exécuter des tâches par défaut juste avec quelques lignes de code Razor.

ASP.NET Web Pages a plusieurs assistants incorporés. Cependant, de nombreux assistants sont disponibles dans des packages (add-in) qui sont fournis en utilisant le gestionnaire de package NuGet. NuGet vous permet de sélectionner un package d'installation et ensuite il s'occupe de tous les détails de l'installation.

Dans cette partie du tutoriel, vous installez un assistant qui vous permet d'afficher une image Gravatar (« globally recognized avatar »). Vous allez apprendre deux choses : premièrement comment trouver et installer un assistant, ensuite, vous allez aussi apprendre comment un assistant facilite la réalisation de quelque chose. Dans le cas contraire vous devrez le réaliser vous-même en utilisant beaucoup de code, code que vous devrez écrire vous-même.

Vous pouvez enregistrer votre propre Gravatar sur le site Gravatar à http://www.gravatar.com/, mais il n'est pas indispensable de créer un compte Gravatar pour effectuer cette partie du tutoriel.

Dans WebMatrix, cliquez sur le bouton NuGet.

Image non disponible

Ceci lance le gestionnaire de package NuGet et affiche les packages disponibles (les packages ne sont pas tous des assistants ; certains ajoutent des fonctionnalités à WebMatrix, certains ajoutent des modèles, ainsi de suite).

Image non disponible

Dans la boîte de recherche, entrez « asp.net helpers ». NuGet montre les packages qui correspondent aux termes de la recherche.

Image non disponible

Les « ASP.NET Web Helpers Library » contiennent du code pour simplifier de nombreuses tâches courantes, incluant l'utilisation des images Gravatar. Sélectionnez le package ASP.NET Web Helpers Library et cliquez sur Install pour charger l'installateur. Sélectionnez Yes lorsque l'on vous le demande, si vous voulez installer le package, et acceptez les termes pour finir l'installation.

C'est tout. NuGet télécharge et installe tout, incluant les composants additionnels qui pourraient être nécessaires (dépendances).

Si pour une raison quelconque vous désinstallez un assistant, le processus est similaire. Cliquez sur le bouton NuGet, cliquez sur l'onglet Installed, et choisissez le package que vous souhaitez désinstaller.

VI. Utiliser un assistant dans une page

Maintenant vous allez utiliser l'assistant que vous venez juste d'installer. Le processus pour ajouter un assistant dans une page est semblable pour la plupart d'entre-eux.

Dans WebMatrix, créez une page et nommez-la GravatarTest.cshtml (vous créez une page spéciale pour tester l'assistant, mais vous pouvez l'utiliser dans n'importe quelles pages de votre site).

À l'intérieur de l'élément <body>, ajoutez l'élément <div>. À l'intérieur de cet élément, saisissez ceci :

 
Sélectionnez
@Gravatar

Le caractère @ est le même que celui que vous avez utilisé dans le marquage du code Razor. Gravatar est un objet assistant avec lequel vous allez travailler.

Dès que vous tapez le point (.), WebMatrix affiche une liste de méthodes (fonctions) que l'assistant Gravatar met à disposition :

Image non disponible

Cette fonctionnalité est appelée l'Intellisense. Elle aide pour la saisie du code en fournissant des choix appropriés au contexte. L'Intellisense travaille avec HTML, CSS, le code ASP.NET, JavaScript, et d'autres langages supportés par WebMatrix. C'est une autre fonctionnalité qui rend plus simple la création de pages web dans WebMatrix.

Appuyez sur sur la touche G et vous voyez que l'Intellisense trouve la méthode GetHtml. Appuyez sur Tabulation. L'Intellisense insère la méthode sélectionnée (GetHtml) pour vous. Tapez une parenthèse ouvrante et notez que la parenthèse fermante est ajoutée automatiquement. Tapez votre adresse email entre guillemets dans les parenthèses. Si vous avez un compte Gravatar, votre photo de profil sera renvoyée, sinon votre image par défaut sera renvoyée. Lorsque vous avez terminé, la ligne ressemble à ceci :

 
Sélectionnez
@Gravatar.GetHtml("john@contoso.com")

Maintenant regardez la page dans un navigateur. Votre photo ou une image par défaut s'affiche, suivant que vous ayez ou non un compte Gravatar.

Image non disponible Image non disponible

Pour avoir une idée de ce que l'assistant a fait pour vous, regardez la source de la page dans le navigateur. En plus du code HTML que vous aviez dans votre page, vous voyez un élément image qui inclus un identificateur. Il s'agit du code que l'assistant restitue dans la page à l'endroit où vous aviez @Gravatar.GetHtml. L'assistant a pris les informations que vous avez fournies et généré le code qui communique directement avec Gravatar afin de récupérer l'image correcte pour le compte fourni.

La méthode GetHtml permet également de personnaliser l'image en fournissant d'autres paramètres. Le code suivant montre comment demander une image ayant une largeur et une hauteur de 40 pixels, et d'utiliser une image par défaut nommé wavatar si le compte spécifié n'existe pas.

 
Sélectionnez
@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")

Ce code produit quelque chose qui ressemble à ceci (l'image par défaut varie aléatoirement).

Image non disponible

VII. Prochainement

Pour garder ce tutoriel succinct, nous devions nous concentrer sur quelques principes de base. Naturellement, il y a beaucoup plus à voir sur Razor et C#. Vous pouvez apprendre plus à travers ces tutoriels. Si vous êtes intéressé pour en apprendre davantage sur les aspects de programmation de Razor et C# dès maintenant, vous pouvez lire une introduction plus complète ici : Introduction to ASP.NET Web Programming Using the Razor Syntax (C#).

Le prochain tutoriel vous présentera le travail avec une base de données. Dans celui-ci, vous allez commencer à créer l'application exemple qui vous permet de répertorier vos films favoris.

VIII. Listing complet de la page TestRazor

 
Sélectionnez
1.
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.
47.
48.
@{
   // Working with numbers
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings)
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects
   var rightNow = DateTime.Now;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax</title>
    <meta charset="utf-8" />
    <style>
    body {font-family:Verdana; margin-left:50px; margin-top:50px;}
    div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    span.bright {color:red;}
    </style>
  </head>
<body>
  <h1>Testing Razor Syntax</h1>
  <form method="post">

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

  </form>
</body>
</html>

IX. Listing complet de la page TestRazorPart2

 
Sélectionnez
1.
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.
@{
   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;
   }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax - Part 2</title>
    <meta charset="utf-8" />
    <style>
      body {font-family:Verdana; margin-left:50px; margin-top:50px;}
      div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    </style>
  </head>
  <body>
  <h1>Testing Razor Syntax - Part 2</h1>
  <form method="post">
    <div>
      <!--<p>@message</p>-->
      @if(showMessage){
        <p>@message</p>
      }
      <p><input type="submit" value="Submit" /></p>
      @if (IsPost) {
        <p>You submitted the page at @DateTime.Now</p>
      }
    </div>
  </form>
</body>
</html>

X. Listing complet de la page GravatarTest

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
@{
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div>
          @Gravatar.GetHtml("john@contoso.com")
          @Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
        </div>
    </body>
</html>

XI. Ressources supplémentaires

XII. Information sur les auteurs

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.

XIII. Postface

XIII-A. Remerciements

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

XIII-B. Sources

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

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   


NdT : il est également possible de remplacer le mot clé « var » par le type de la variable comme int, long, double, string, etc.
NdT : prononcez « Si Charpe »
NdT : la première version du langage remonte à 2002.
NdT : et également en ASP.NET Core, technologie apparue après la rédaction de ce tutoriel.

  

Copyright © 2014 Mike Pope, Tom fitzMacken. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.