Présentation de pages Web ASP.NET - Notions de base de la programmation
par Tom FitzMacken
Ce tutoriel vous donne une vue d’ensemble de la programmation dans pages Web ASP.NET avec la syntaxe Razor.
Ce que vous allez apprendre :
- Syntaxe « Razor » de base que vous utilisez pour la programmation dans pages Web ASP.NET.
- Quelques C# de base, qui est le langage de programmation que vous allez utiliser.
- Quelques concepts de programmation fondamentaux pour les pages web.
- Comment installer des packages (composants qui contiennent du code prédéfini) à utiliser avec votre site.
- Comment utiliser des helpers pour effectuer des tâches de programmation courantes.
Fonctionnalités/technologies abordées :
- NuGet et le gestionnaire de package.
- L’assistance
Gravatar.
Ce tutoriel est principalement un exercice qui vous présente la syntaxe de programmation que vous allez utiliser pour pages Web ASP.NET. Vous découvrirez la syntaxe Razor et le code écrits en langage de programmation C#. Vous avez eu un aperçu de cette syntaxe dans le tutoriel précédent ; Dans ce tutoriel, nous allons expliquer plus en détail la syntaxe.
Nous vous promettons que ce tutoriel implique le plus de programmation que vous verrez dans un seul tutoriel, et qu’il s’agit du seul tutoriel qui concerne uniquement la programmation. Dans les autres tutoriels de cet ensemble, vous allez créer des pages qui effectuent des choses intéressantes.
Vous découvrirez également les helpers. Une assistance est un composant ( un élément de code empaqueté ) que vous pouvez ajouter à une page. L’assistance effectue pour vous un travail qui, sinon, pourrait être fastidieux ou complexe à faire à la main.
Création d’une page à lire avec Razor
Dans cette section, vous allez jouer un peu avec Razor pour vous faire une idée de la syntaxe de base.
Démarrez WebMatrix s’il n’est pas déjà en cours d’exécution. Vous allez utiliser le site web que vous avez créé dans le tutoriel précédent (Prise en main With Web Pages). Pour le rouvrir, cliquez sur Mes sites et choisissez WebPageMovies :
Sélectionnez l’espace de travail Fichiers .
Dans le ruban, cliquez sur Nouveau pour créer une page. Sélectionnez CSHTML et nommez la nouvelle page TestRazor.cshtml.
Cliquez sur OK.
Copiez ce qui suit dans le fichier, en remplaçant complètement ce qui existe déjà.
Notes
Lorsque vous copiez du code ou du balisage à partir des exemples dans une page, la mise en retrait et l’alignement peuvent ne pas être les mêmes que dans le didacticiel. Toutefois, la mise en retrait et l’alignement n’affectent pas la façon dont le code s’exécute.
@{
// 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>
Examen de l’exemple de page
La plupart de ce que vous voyez est du code HTML ordinaire. Toutefois, en haut se trouve ce bloc de code :
@{
// 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 concernant ce bloc de code :
- Le caractère @ indique ASP.NET que ce qui suit est du code Razor, et non du code HTML. ASP.NET traitera tout ce qui suit le caractère @ en tant que code jusqu’à ce qu’il s’exécute à nouveau dans du code HTML. (Dans ce cas, c’est le <! Élément DOCTYPE> .
- Les accolades ( { et } ) entourent un bloc de code Razor si le code comporte plusieurs lignes. Les accolades indiquent ASP.NET où commence et se termine le code de ce bloc.
- Les caractères // marquent un commentaire, c’est-à-dire une partie du code qui ne s’exécute pas.
- Chaque instruction doit se terminer par un point-virgule (;). (Pas de commentaires, cependant.)
- Vous pouvez stocker des valeurs dans des variables que vous créez (déclarez) avec le mot clé var. Lorsque vous créez une variable, vous lui attribuez un nom, qui peut inclure des lettres, des chiffres et des traits de soulignement (_). Les noms de variables ne peuvent pas commencer par un nombre et ne peuvent pas utiliser le nom d’un mot clé de programmation (comme var).
- Vous placez les chaînes de caractères (comme « ASP.NET » et « Pages Web ») entre guillemets. (Il doit s’agir de guillemets doubles.) Les nombres ne sont pas entre guillemets.
- Les espaces blancs en dehors des guillemets n’ont pas d’importance. Les sauts de ligne n’ont pas d’importance ; L’exception est que vous ne pouvez pas fractionner une chaîne entre guillemets sur plusieurs lignes. La mise en retrait et l’alignement n’ont pas d’importance.
Ce qui n’est pas évident dans cet exemple, c’est que tout le code respecte la casse. Cela signifie que la variable TheSum est une variable différente des variables qui peuvent être nommées theSum ou thesum. De même, var est un mot clé, mais pas Var.
Objets, propriétés et méthodes
Ensuite, il y a l’expression DateTime.Now. En termes simples, DateTime est un objet. Un objet est une chose que vous pouvez programmer avec : une page, une zone de texte, un fichier, une image, une demande web, un e-mail, un enregistrement client, etc. Les objets ont une ou plusieurs propriétés qui décrivent leurs caractéristiques. Un objet zone de texte a une propriété Text (entre autres), un objet de requête a une propriété Url (et d’autres), un message électronique a une propriété From et une propriété To, etc. Les objets ont également des méthodes qui sont les « verbes » qu’ils peuvent exécuter. Vous travaillerez beaucoup avec des objets.
Comme vous pouvez le voir dans l’exemple, DateTime est un objet qui vous permet de programmer des dates et des heures. Il a une propriété nommée Now qui retourne la date et l’heure actuelles.
Utilisation du code pour afficher le balisage dans la page
Dans le corps de la page, notez les éléments suivants :
<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>
Là encore, le caractère @ indique ASP.NET que ce qui suit est du code, et non du code HTML. Dans le balisage, vous pouvez ajouter @ suivi d’une expression de code, et ASP.NET restituera la valeur de cette expression directement à ce stade. Dans l’exemple, @a affiche la valeur de la variable nommée a, @product affiche tout ce qui se trouve dans la variable nommée product, etc.
Toutefois, vous n’êtes pas limité aux variables. Dans quelques cas, le caractère @ précède une expression :
- @(a*b) restitue le produit de tout ce qui se trouve dans les variables a et b. (L’opérateur * signifie multiplication.)
- @(technology + " " + product) restitue les valeurs dans la technologie et le produit des variables après les concaténation et l’ajout d’un espace entre les deux. L’opérateur (+) pour concaténer des chaînes est identique à l’opérateur pour l’ajout de nombres. ASP.NET pouvez généralement savoir si vous travaillez avec des nombres ou des chaînes et fait la bonne chose avec l’opérateur + .
- @Request.Url restitue la propriété Url de l’objet Request. L’objet Request contient des informations sur la requête actuelle à partir du navigateur et, bien sûr, la propriété URL contient l’URL de cette requête actuelle.
L’exemple est également conçu pour vous montrer que vous pouvez travailler de différentes manières. Vous pouvez effectuer des calculs dans le bloc de code en haut, placer les résultats dans une variable, puis afficher la variable dans le balisage. Vous pouvez également effectuer des calculs dans un droit d’expression dans le balisage. L’approche que vous utilisez dépend de ce que vous faites et, dans une certaine mesure, de votre propre préférence.
Affichage du code en action
Cliquez avec le bouton droit sur le nom du fichier, puis choisissez Lancer dans le navigateur. Vous voyez la page dans le navigateur avec toutes les valeurs et expressions résolues dans la page.
Examinez la source dans le navigateur.
Comme vous l’attendez de votre expérience dans le tutoriel précédent, aucun code Razor ne figure dans la page. Tout ce que vous voyez sont les valeurs d’affichage réelles. Lorsque vous exécutez une page, vous effectuez une demande au serveur web intégré à WebMatrix. Lorsque la demande est reçue, ASP.NET résout toutes les valeurs et expressions et restitue leurs valeurs dans la page. Il envoie ensuite la page au navigateur.
Conseil
Razor et C#
Jusqu’à présent, nous avons dit que vous travaillez avec la syntaxe Razor. C’est vrai, mais ce n’est pas l’histoire complète. Le langage de programmation réel que vous utilisez s’appelle C#. C# a été créé par Microsoft il y a plus de dix ans et est devenu l’un des principaux langages de programmation pour la création d’applications Windows. Toutes les règles que vous avez vues sur la façon de nommer une variable et de créer des instructions, etc. sont en fait toutes les règles du langage C#.
Razor fait référence plus spécifiquement au petit ensemble de conventions pour la façon dont vous incorporez ce code dans une page. Par exemple, la convention de l’utilisation de @ pour marquer le code dans la page et de l’utilisation de @{ } pour incorporer un bloc de code est l’aspect Razor d’une page. Les aides sont également considérées comme faisant partie de Razor. La syntaxe Razor est utilisée dans plus d’endroits que dans pages Web ASP.NET. (Par exemple, il est également utilisé dans ASP.NET vues MVC.)
Nous mention cela, car si vous recherchez des informations sur la programmation pages Web ASP.NET, vous trouverez de nombreuses références à Razor. Toutefois, un grand nombre de ces références ne s’appliquent pas à ce que vous faites et peuvent donc prêter à confusion. Et en fait, beaucoup de vos questions de programmation vont vraiment concerner l’utilisation de C# ou l’utilisation de ASP.NET. Par conséquent, si vous recherchez spécifiquement des informations sur Razor, vous ne trouverez peut-être pas les réponses dont vous avez besoin.
Ajout d’une logique conditionnelle
L’une des fonctionnalités intéressantes de l’utilisation du code dans une page est que vous pouvez modifier ce qui se passe en fonction de différentes conditions. Dans cette partie du tutoriel, vous allez découvrir quelques façons de modifier ce qui est affiché dans la page.
L’exemple sera simple et quelque peu artificiel afin que nous puissions nous concentrer sur la logique conditionnelle. La page que vous allez créer effectuera les tâches suivantes :
- Affichez un texte différent sur la page selon qu’il s’agit de la première fois que la page s’affiche ou si vous avez cliqué sur un bouton pour envoyer la page. Ce sera le premier test conditionnel.
- Afficher le message uniquement si une certaine valeur est passée dans la chaîne de requête de l’URL (http://... ? show=true). Ce sera le deuxième test conditionnel.
Dans WebMatrix, créez une page et nommez-la TestRazorPart2.cshtml. (Dans le ruban, cliquez sur Nouveau, choisissez CSHTML, nommez le fichier, puis cliquez sur OK.)
Remplacez le contenu de cette page par les éléments suivants :
@{
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 en haut initialise une variable nommée message avec du texte. Dans le corps de la page, le contenu de la variable de message s’affiche à l’intérieur d’un <élément p> . Le balisage contient également un élément d’entrée <> pour créer un bouton Envoyer.
Exécutez la page pour voir comment elle fonctionne maintenant. Pour l’instant, il s’agit essentiellement d’une page statique, même si vous cliquez sur le bouton Envoyer .
Retour à WebMatrix. À l’intérieur du bloc de code, ajoutez le code en surbrillance suivant après la ligne qui initialise le message :
@{
var message = "This is the first time you've requested the page.";
if(IsPost) {
message = "Now you've submitted the page.";
}
}
Le bloc if { }
Ce que vous venez d’ajouter était une condition if. Dans le code, la condition if a une structure semblable à celle-ci :
if(some condition){
One or more statements here that run if the condition is true;
}
La condition à tester est entre parenthèses. Il doit s’agir d’une valeur ou d’une expression qui retourne true ou false. Si la condition est true, ASP.NET exécute l’instruction ou les instructions qui se trouvent à l’intérieur des accolades. (Il s’agit de la partie puis de la logique if-then .) Si la condition est false, 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 à l’aide d’un opérateur logique ou d’un opérateur de comparaison : égal à (=), supérieur à (>), inférieur à (<), supérieur ou égal à (>=) et inférieur ou égal à (<=). L’opérateur != signifie non égal à — par exemple, si(a != 0) signifie si a n’est pas égal à 0.
Notes
Veillez à remarquer que l’opérateur de comparaison pour est égal à (==) n’est pas identique à =. L’opérateur = est utilisé uniquement pour attribuer des valeurs (var a=2). Si vous mélangez ces opérateurs, vous obtiendrez une erreur ou vous obtiendrez des résultats étranges.
Pour tester si quelque chose est vrai, la syntaxe complète est if(IsDone == true). Mais vous pouvez également utiliser le raccourci if(IsDone). S’il n’existe aucun opérateur de comparaison, ASP.NET suppose que vous testez la valeur true.
L'opérateur « ! » l’opérateur désigne en lui-même un NOT logique. Par exemple, la condition if( ! IsPost) signifie si IsPost n’est pas vrai.
Vous pouvez combiner des conditions à l’aide d’un opérateur LOGIQUE AND (&& ) ou logique OR (|| ). Par exemple, la dernière des conditions if dans les exemples précédents signifie si FileProcessingIsDone n’est pas défini sur true ET displayMessage a la valeur false.
Bloc else
Une dernière chose à propos des blocs si : un bloc if peut être suivi d’un bloc else. Un autre bloc est utile si vous devez exécuter un code différent lorsque la condition est false. 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 ultérieurs de cette série où l’utilisation d’un autre bloc est utile.
Test si la demande est un envoi (post)
Il y a plus, mais revenons à l’exemple, qui a la condition if(IsPost){ ... }. IsPost est en fait une propriété de la page active. La première fois que la page est demandée, IsPost retourne false. Toutefois, si vous cliquez sur un bouton ou envoyez la page (autrement dit, vous la publiez), IsPost retourne true. IsPost vous permet donc de déterminer si vous avez affaire à une soumission de formulaire. (En termes de verbes HTTP, si la requête est une opération GET, IsPost retourne false. Si la requête est une opération POST, IsPost retourne true.) Dans un tutoriel ultérieur, vous allez utiliser des formulaires d’entrée, où ce test devient particulièrement utile.
Exécutez la page. Comme c’est la première fois que vous êtes invité à consulter la page, vous voyez « C’est la première fois que vous avez demandé la page ». Cette chaîne est la valeur à laquelle vous avez initialisé la variable de message. Il existe un test if(IsPost), mais qui retourne false pour le moment, de sorte que le code à l’intérieur du bloc if ne s’exécute pas.
Cliquez sur le bouton Envoyer . La page est à nouveau demandée. Comme précédemment, la variable de message est définie sur « Il s’agit de la première fois... ». Mais cette fois, le test if(IsPost) retourne true, de sorte que le code à l’intérieur du bloc si s’exécute. Le code modifie la valeur de la variable de message en une autre valeur, c’est-à-dire ce qui est rendu dans le balisage.
Ajoutez maintenant une condition if dans le balisage. Sous l’élément <p> qui contient le bouton Envoyer , ajoutez le balisage suivant :
@if(IsPost){
<p>You submitted the page at @DateTime.Now</p>
}
Comme vous ajoutez du code à l’intérieur du balisage, vous devez commencer par @. Ensuite, il existe un test if similaire à celui que vous avez ajouté précédemment dans le bloc de code. À l’intérieur des accolades, cependant, vous ajoutez du code HTML ordinaire. Au moins, il est ordinaire jusqu’à ce qu’il arrive à @DateTime.Now. Il s’agit d’un autre petit peu de code Razor. Vous devez donc ajouter @ devant lui.
Le point ici est que vous pouvez ajouter des conditions if 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, et comme c’est le cas chaque fois que vous mélangez le balisage et le code, vous devez utiliser @ pour qu’il soit clair pour ASP.NET où se trouve le code.
Exécutez la page, puis cliquez sur Envoyer. Cette fois, non seulement vous voyez un autre message lorsque vous envoyez (« Maintenant que vous avez envoyé ... »), mais vous voyez un nouveau message qui répertorie la date et l’heure.
Test de la valeur d’une chaîne de requête
Un autre test. Cette fois, vous allez ajouter un bloc if qui teste une valeur nommée show qui peut être passée dans la chaîne de requête. (Comme ceci : http://localhost:43097/TestRazorPart2.cshtml?show=true) Vous allez modifier la page afin que le message que vous affichez (« C’est la première fois... », etc.) ne s’affiche que si la valeur de show est true.
En bas (mais à l’intérieur) du bloc de code en haut de la page, ajoutez les éléments suivants :
var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
showMessage = true;
}
Le bloc de code complet ressemble maintenant à l’exemple suivant. (N’oubliez pas que lorsque vous copiez le code dans votre page, la mise en retrait peut être différente. Mais 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 du bloc initialise une variable nommée showMessage sur false. Il effectue ensuite un test if pour rechercher une valeur dans la chaîne de requête. Lorsque vous demandez la page pour la première fois, elle a une URL comme celle-ci :
http://localhost:43097/TestRazorPart2.cshtml
Le code détermine si l’URL contient une variable nommée show dans la chaîne de requête, comme cette version de l’URL :
http://localhost:43097/TestRazorPart2.cshtml?show=true
Le test lui-même examine la propriété QueryString de l’objet Request. Si la chaîne de requête contient un élément nommé show et si cet élément a la valeur true, le bloc if s’exécute et définit la variable showMessage sur true.
Il y a une astuce ici, comme vous pouvez le voir. Comme le dit le nom, la chaîne de requête est une chaîne. Toutefois, vous pouvez uniquement tester true et false si la valeur que vous testez est une valeur booléenne (true/false). Avant de pouvoir tester la valeur de la variable show dans la chaîne de requête, vous devez la convertir en valeur booléenne. C’est ce que fait la méthode AsBool : elle prend une chaîne comme entrée et la convertit en valeur booléenne. Clairement, si la chaîne est « true », la méthode AsBool convertit cette valeur en true. Si la valeur de la chaîne est autre chose, AsBool retourne false.
Conseil
Types de données et méthodes As()
Nous avons seulement dit jusqu’à présent que lorsque vous créez une variable, vous utilisez le mot clé var. Mais ce n’est pas toute l’histoire. Pour manipuler des valeurs (pour ajouter des nombres ou concaténer des chaînes, comparer des dates ou tester true/false), C# doit utiliser une représentation interne appropriée de la valeur. C# peut généralement déterminer ce que cette représentation doit être (c’est-à-dire le type de données) en fonction de ce que vous faites avec les valeurs. De temps en temps, cependant, il ne peut pas faire ça. Si ce n’est pas le cas, vous devez vous aider en indiquant explicitement comment C# doit représenter les données. La méthode AsBool fait cela : elle indique à C# qu’une 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 en tant que autres types, comme AsInt (traiter comme un entier), AsDateTime (traiter comme une date/heure), AsFloat (traiter comme un nombre à virgule flottante), et ainsi de suite. Lorsque vous utilisez ces méthodes As( ), si C# ne peut pas représenter la valeur de chaîne comme demandé, une erreur s’affiche.
Dans le balisage de la page, supprimez ou commentez cet élément (ici, il est affiché en commentaire) :
<!-- <p>@message</p> -->
À l’emplacement où vous avez supprimé ou commenté ce texte, ajoutez les éléments suivants :
@if(showMessage) {
<p>@message</p>
}
Si le test indique que si la variable showMessage a la valeur true, affichez un <élément p> avec la valeur de la variable de message.
Résumé de votre logique conditionnelle
Si vous n’êtes pas tout à fait sûr de ce que vous venez de faire, voici un résumé.
- La variable de message est initialisée dans une chaîne par défaut (« C’est la première fois... »).
- Si la demande de page est le résultat d’un envoi (post), la valeur du message est remplacée par « Maintenant que vous avez envoyé... »
- La variable showMessage est initialisée sur false.
- Si la chaîne de requête contient ?show=true, la variable showMessage a la valeur true.
- Dans le balisage, si showMessage a la valeur true, un <élément p> est rendu qui affiche la valeur du message. (Si showMessage a la valeur false, rien n’est rendu à ce point dans le balisage.)
- Dans le balisage, si la requête est une publication, un <élément p> est rendu qui affiche la date et l’heure.
Exécutez la page. Il n’y a pas de message, car showMessage a la valeur false. Dans le balisage, le test if(showMessage) retourne false.
Cliquez sur Envoyer. Vous voyez la date et l’heure, mais toujours pas de message.
Dans votre navigateur, accédez à la zone URL et ajoutez les éléments suivants à la fin de l’URL : ?show=true, puis appuyez sur Entrée.
La page s’affiche à nouveau. (Étant donné que vous avez modifié l’URL, il s’agit d’une nouvelle demande, pas d’un envoi.) Cliquez à nouveau sur Envoyer. Le message s’affiche à nouveau, tout comme la date et l’heure.
Dans l’URL, remplacez ?show=true par ?show=false et appuyez sur Entrée. Renvoyez la page. La page est de retour à la façon dont vous avez démarré : aucun message.
Comme indiqué précédemment, la logique de cet exemple est un peu artificielle. Cependant, si va apparaître dans plusieurs de vos pages, et il faudra un ou plusieurs des formulaires que vous avez vus ici.
Installation d’un helper (affichage d’une image Gravatar)
Certaines tâches que les utilisateurs veulent souvent effectuer sur les pages web nécessitent beaucoup de code ou nécessitent des connaissances supplémentaires. Exemples : affichage d’un graphique pour les données ; mettre un Facebook bouton « J’aime » sur une page , envoyer des e-mails à partir de votre site web , rogner ou redimensionner des images ; utiliser PayPal pour votre site. Pour faciliter ce genre de choses, pages Web ASP.NET vous permet d’utiliser des helpers. Les helpers sont des composants que vous installez pour un site et qui vous permettent d’effectuer des tâches classiques en utilisant seulement quelques lignes de code Razor.
pages Web ASP.NET a quelques aides intégrées. Toutefois, de nombreuses assistances sont disponibles dans les packages (compléments) fournis à l’aide du gestionnaire de package NuGet. NuGet vous permet de sélectionner un package à installer, puis il prend en charge tous les détails de l’installation.
Dans cette partie du tutoriel, vous allez installer une assistance qui vous permet d’afficher une image Gravatar (« avatar globalement reconnu »). Vous allez apprendre deux choses. L’une d’elles consiste à trouver et à installer un helper. Vous découvrirez également comment une assistance facilite l’exécution de quelque chose que vous auriez autrement dû faire en utilisant beaucoup de code que vous devrez écrire vous-même.
Vous pouvez inscrire votre propre Gravatar sur le site web Gravatar à l’adresse http://www.gravatar.com/, mais il n’est pas essentiel de créer un compte Gravatar pour effectuer cette partie du tutoriel.
Dans WebMatrix, cliquez sur le bouton NuGet .
Cela lance le gestionnaire de package NuGet et affiche les packages disponibles. (Tous les packages ne sont pas des helpers ; certains ajoutent des fonctionnalités à WebMatrix lui-même, d’autres sont des modèles supplémentaires, etc.) Vous pouvez recevoir un message d’erreur concernant l’incompatibilité de version. Vous pouvez ignorer ce message d’erreur en cliquant sur OK et en suivant ce tutoriel.
Dans la zone de recherche, entrez « asp.net helpers ». NuGet affiche les packages qui correspondent aux termes de recherche.
La bibliothèque Web Helpers ASP.NET contient du code pour simplifier de nombreuses tâches courantes, notamment l’utilisation d’images Gravatar. Sélectionnez le package ASP.NET bibliothèque Web Helpers , puis cliquez sur Installer pour lancer le programme d’installation. Sélectionnez Oui lorsque vous êtes invité à installer le package, puis acceptez les conditions pour terminer l’installation.
Vous avez terminé. NuGet télécharge et installe tout, y compris tous les composants supplémentaires qui peuvent être requis (dépendances).
Si, pour une raison quelconque, vous devez désinstaller une assistance, le processus est très similaire. Cliquez sur le bouton NuGet , cliquez sur l’onglet Installé , puis sélectionnez le package que vous souhaitez désinstaller.
Utilisation d’un helper dans une page
Vous allez maintenant utiliser l’assistance que vous venez d’installer. Le processus d’ajout d’un helper à une page est similaire pour la plupart des helpers.
Dans WebMatrix, créez une page et nommez-la GravatarTest.cshml. (Vous créez une page spéciale pour tester l’assistance, mais vous pouvez utiliser des helpers dans n’importe quelle page de votre site.)
À l’intérieur de l’élément <body> , ajoutez un <élément div> . À l’intérieur de l’élément <div> , tapez ceci :
@Gravatar.
Le caractère @ est le même que celui que vous avez utilisé pour marquer le code Razor. Gravatar est l’objet d’assistance avec lequel vous travaillez.
Dès que vous tapez le point (.), WebMatrix affiche une liste de méthodes (fonctions) que l’assistance Gravatar met à disposition :
Cette fonctionnalité est appelée IntelliSense. Il vous aide à coder en fournissant des choix adaptés au contexte. IntelliSense fonctionne avec du code HTML, CSS, ASP.NET, JavaScript et d’autres langages pris en charge dans WebMatrix. Il s’agit d’une autre fonctionnalité qui facilite le développement de pages web dans WebMatrix.
Appuyez sur G sur le clavier et vous voyez qu’IntelliSense trouve la méthode GetHtml. Appuyez sur Tab. IntelliSense insère la méthode sélectionnée (GetHtml) pour vous. Tapez une parenthèse ouverte et notez que la parenthèse fermante est automatiquement ajoutée. Tapez votre adresse e-mail entre guillemets entre les deux parenthèses. Si vous avez un compte Gravatar, votre photo de profil sera retournée. Si vous n’avez pas de compte Gravatar, une image par défaut est retournée. Lorsque vous avez terminé, la ligne ressemble à ceci :
@Gravatar.GetHtml("john@contoso.com")
Affichez maintenant la page dans un navigateur. Votre image ou l’image par défaut s’affiche, selon que vous disposez d’un compte Gravatar.
Pour avoir une idée de ce que l’assistance fait pour vous, affichez 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 inclut un identificateur. Il s’agit du code que l’assistance a rendu dans la page à l’emplacement où vous aviez @Gravatar.GetHtml. L’assistance a pris les informations que vous avez fournies et a généré le code qui parle directement à Gravatar afin de récupérer l’image correcte pour le compte fourni.
La méthode GetHtml vous permet également de personnaliser l’image en fournissant d’autres paramètres. Le code suivant montre comment demander une image avec une largeur et une hauteur de 40 pixels, et utilise une image par défaut spécifiée nommée wavatar si le compte spécifié n’existe pas.
@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
Ce code produit quelque chose comme le résultat suivant (l’image par défaut varie de façon aléatoire).
À venir
Pour que ce tutoriel reste court, nous avons dû nous concentrer sur quelques notions de base seulement. Naturellement, il y a beaucoup plus à Razor et C#. Vous en apprendrez davantage au fil de ces tutoriels. Si vous souhaitez en savoir plus sur les aspects de programmation de Razor et de C# dès maintenant, vous pouvez lire une introduction plus complète ici : Introduction à la programmation web ASP.NET à l’aide de la syntaxe Razor.
Le tutoriel suivant vous présente l’utilisation d’une base de données. Dans ce tutoriel, vous allez commencer à créer l’exemple d’application qui vous permet de répertorier vos films préférés.
Description complète de la page TestRazor
@{
// 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>
Description complète de la page TestRazorPart2
@{
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>
Liste complète pour la page GravatarTest
@{
}
<!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>
Ressources supplémentaires
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour