Création des pages web ASP.NET en utilisant le moteur de vue Razor

| Hinault Romaric DONFACK | Philippe Vialatte |

Cet article a pour but de vous présenter le nouveau moteur de vue ASP.NET Razor, et de vous expliquer comment l'utiliser pour effectuer des manipulations au sein des pages web ASP.NET.
Commentez ♪

- Titre : Création des pages web ASP.NET en utilisant le moteur de vue Razor

- Auteurs : Hinault Romaric DONFACK, Philippe Vialatte

- Parution : 29 août 2011

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2011 Developpez. Aucune reproduction, même partielle, ne peut être faite de ce site et 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.

Sommaire

- I. Introduction

- II. Présentation de Razor

- II-A. Description

- II-B. Avantages de Razor

- II-C. Traitement des pages ASP.NET Razor

- II-D. Extension des pages ASP.NET Razor

- III. Prise en charge dans Visual Studio 2010

- III-A. Utilisation de Razor dans Visual Studio

- III-B. Fenêtre de création d'une nouvelle vue

- III-C. Support de l'IntelliSense et la coloration syntaxique

- III-D. Prise en charge du débogage pour Razor

- IV. Syntaxe de base de Razor

- IV-A. Le caractère @

- IV-B. Les opérateurs de base

- IV-C. Les blocs de code

- IV-D. Les variables

- IV-E. Les chaines de caractères

- IV-F. Les tableaux et les dictionnaires de données

- IV-G. les boucles

- IV-G-1. La boucle for

- IV-G-2. La boucle foreach

- IV-G-3. La boucle While

- IV-H. Les structures de contrôles

- IV-I. Les commentaires

- IV-J. Gestion des exceptions

- V. Les Layouts

- V-A. ViewStart

- V-B. Sections

- V-C. Vues partielles avec Razor

- VI. Les Helpers Razor

- VI-A. Utilisation des Helpers

- VI-B. Création de son propre Helper

- VI-B-1. Création d'un simple Helper dans une vue

- VI-B-2. Création d'un Helper réutilisable dans de multiples vues

- VII. Les formulaires dans les vues Razor

- VII-A. Création d'un formulaire HTML simple avec validation des données

- VII-B. Création d'un formulaire ASP.NET MVC 3 avec Razor.

- VII-B-1. Création du modèle

- VII-B-2. Création du contrôleur

- VII-B-3. Génération de la vue Razor

- VIII. Manipulation des données

- VIII-A. Connexion à une base de données

- VIII-B. Lecture des données dans une vue ASP.NET Razor

- VIII-C. Insertion des données

- VIII-D. Utilisation du Helper Razor WebGrid pour l'affichage des données

- VIII-D-1. Personnalisation d'un WebGrid

- IX. Razor References

- IX-A. Classes

- IX-B. Data

- IX-C. Helper

- X. Conclusion, liens et remerciements

- X-A. Conclusion

- X-B. Liens

- X-C. Remerciements

I - Introduction

La sortie de WebMatrix, l'environnement de développement web gratuit de Microsoft et la publication du Framework ASP.MVC 3 ont été accompagnés de la version finale d'un nouveau moteur de vue ASP.NET baptisé « Razor ».

Razor est un moteur de modèle et de rendu ASP.NET conçu avec pour principal but de simplifier la syntaxe utilisée dans les pages ASP.NET.

Nous allons dans cet article découvrir ce nouveau moteur de rendu ASP.NET, sa syntaxe et comment créer des pages ASP.NET en utilisant Razor.

Pour les exemples de code, nous allons utiliser principalement Visual Studio 2010 ou Visual web Developper 2010.

La majorité des exemples peuvent également être utilisés avec l'environnement de développement WebMatrix, pour ceux ne disposant pas de Visual Studio et désirant néanmoins se lancer dans l'utilisation de Razor.

II - Présentation de Razor

II-A - Description

Couramment, les pages web ASP.NET ont des blocs de code en C# ou en VB.NET au même endroit que des balises HTML en utilisant les délimiteurs :

<% %>

Parfois, cette combinaison est assez inconfortable pour l'écriture et la délimitation du code qui peut rapidement devenir illisible.

Razor a été conçu pour faciliter la conception des pages ASP.NET. Il introduit une syntaxe de programmation assez facilement compréhensible, qui vous permet d'insérer du code serveur dans une page web qui peut également contenir du HTML, du CSS et des scripts JavaScript.

Le moteur Razor est fluide, compact, expressif et s'appuie sur la syntaxe des langages .NET C# et Visual Basic .NET. Il offre la puissance d'ASP.NET pour la création rapide des applications web fonctionnelles et sophistiquées.

Razor est inclus par défaut dans l'EDI WebMatrix et également dans le Framework .NET ASP.NET MVC 3. Il est pris en charge par Visual Studio 2010, qui offre des fonctionnalités supplémentaires pour la création des pages ASP.NET Razor comme l'IntelliSense, le débogage et la coloration syntaxique.

II-B - Avantages de Razor

Le moteur de vue ASP.NET Razor offre les avantages suivants :

- il permet de limiter le nombre de caractères séparant le code serveur du code HTML ;

- il est compact, expressif et fluide. Il réduit drastiquement le code nécessaire à écrire et en facilite la compréhension ;

- il est facile à apprendre, car nécessite peu de concepts à maitriser ;

- ce n'est pas un énième langage. Microsoft a voulu permettre aux développeurs C# et VB.NET de construire des pages HTML facilement ;

- il permet de mettre en place des tests unitaires sans avoir besoin d'un contrôleur ou d'un serveur web ;

- il améliore également l'IntelliSense avec Visual Studio.

II-C - Traitement des pages ASP.NET Razor

Lorsque l'utilisateur accède à une page web ASP.NET Razor, le serveur exécute ce code et génère dynamiquement à la volée du code purement HTML qui est envoyé vers le serveur, comme c'est le cas pour les pages ASP.NET standard.

L'exécution du code Razor sur le serveur permet d'effectuer des tâches qui peuvent s'avérer très complexes à faire en utilisant uniquement du contenu client comme l'accès et le traitement de données d'une base de données.

II-D - Extension des pages ASP.NET Razor

Razor introduit de nouvelles extensions pour les pages web ASP.NET.

Les fichiers de types .cshtml (pour le langage C#) et .vbhtml (pour le langage VB.NET) sont donc des pages web pouvant contenir du code HTML, JavaScript et CSS tout comme une page HTML normale, sauf qu'ils reposent sur le nouveau moteur de vue Razor et peuvent de ce fait avoir du contenu dynamique.

Nous allons utiliser pour les exemples dans cet article les fichiers .cshtml et la syntaxe de Razor reposant sur C#.

III - Prise en charge dans Visual Studio 2010

L'installation du Framework ASP.NET MVC 3 apporte une mise à jour de l'environnement de développement Visual Studio 2010 et Visual web Developper 2010, qui permet une prise en charge des pages web ASP.NET qui sont développées en utilisant la syntaxe du moteur de vue Razor.

Les modèles de projets ASP.NET MVC 3 disponibles dans Visual Studio permettent désormais de créer une application web en utilisant soit le moteur ASP.NET standard, soit le nouveau moteur Razor.

Les deux moteurs de vue peuvent être utilisés au sein d'une même application. Donc, la création d'un projet ASP.NET Razor ne vous oblige pas à créer uniquement des vues reposant sur ce moteur.

III-A - Utilisation de Razor dans Visual Studio

Après avoir installé ASP.NET MVC 3, lancez votre environnement de développement.

Dans le menu fichier, cliquez sur nouveau projet. Dans la boite de dialogue qui s'affiche, sélectionnez le langage C# (vous pouvez également utiliser VB.NET) ainsi que la version 4 du Framework .NET.

Dans les modèles de projets proposés, sélectionnez le type de projet « ASP.NET MVC 3 web Application » et cliquez ensuite sur OK.

Lors de la création d'un nouveau projet ASP.NET MVC 3, la boite de dialogue vous permet désormais de spécifier le moteur d'affichage ainsi que le modèle de projet ASP.NET MVC que vous souhaitez utiliser.

Pour notre exemple, nous allons sélectionner le modèle Internet Application qui par défaut contient des contrôleurs pour l'authentification.

L'explorateur de solutions affiche l'ensemble des fichiers qui sont créés par défaut. Les fichiers Razor - rappelons-le - ont pour extension .cshtml et sont stockés par défaut dans le dossier View.

III-B - Fenêtre de création d'une nouvelle vue

La boite de dialogue de création d'une nouvelle vue a subi quelques améliorations pour permettre d'ajouter aisément des vues reposant sur Razor.

Vous pouvez directement à partir de cette fenêtre, lier le fichier de vue à un Layout (la partie sur les Layouts est décrite dans les sections suivantes).

III-C - Support de l'IntelliSense et la coloration syntaxique

La mise à jour de Visual Studio 2010 apporte également l'IntelliSense et la coloration syntaxique pour Razor comme l'illustre la capture ci-dessous :

III-D - Prise en charge du débogage pour Razor

Les vues Razor peuvent également être déboguées avec Visual Studio 2010.

À titre d'exemple, nous allons procéder à un débogage pas à pas pour une page de l'application que nous avons créée précédemment.

Revenons dans l'explorateur de solutions de notre projet. Dans le fichier index.chtml, ajoutez après la ligne ViewBag.Title, la ligne de code suivante :

var Today = DateTime.Now;

Ajoutez un point d'arrêt à cette instruction dans Visual Studio pour indiquer au débogueur d'arrêter l'exécution du programme sur cette ligne. Votre code doit ressembler à ceci :

Appuyez ensuite sur F5 pour procéder au débogage de la page.

Le débogueur Visual Studio va s'arrêter sur le point d'arrêt que nous avons défini, et en approchant le pointeur de la souris sur la variable, nous pouvons examiner la valeur qu'elle contient ou les visualiser tout simplement dans la fenêtre affichée en dessous.

Si vous disposez de plusieurs points d'arrêt, appuyez simplement sur F1 pour passer d'un point d'arrêt à un autre.

Il est à noter que vous ne pouvez marquer des points d'arrêt que sur des lignes de code contenues dans un bloc (@{}).

À l'affichage, vous aurez le résultat suivant dans votre navigateur :

IV - Syntaxe de base de Razor

Razor n'est pas un nouveau langage de programmation. Il s'appuie sur les langages .NET connus en l'occurrence C# et VB.NET, et la puissance d'ASP.NET pour permettre de créer facilement des applications web robustes.

Nous allons donner dans cette section, un aperçu des fondamentaux de Razor qu'il est nécessaire de maitriser.

IV-A - Le caractère @

Le code Razor dans une page commence obligatoirement avec le caractère « magique » @. Contrairement à l'utilisation des caractères ,

<% %>

Razor ne vous oblige pas à fermer implicitement un bloc de code et rend les vues plus lisibles.

Pour une seule ligne de code serveur que vous insérez dans une page, la syntaxe est la suivante :

@DateTime.Now.ToShortDateString()

Pour mélanger une expression avec du texte sur une ligne, la syntaxe est la suivante :

Bonjour @nom. Nous sommes le @DateTime.Now.ToShortDateString().

IV-B - Les opérateurs de base

Razor étant essentiellement basé sur la syntaxe du langage C#, et VB.NET, les opérateurs de base utilisés par celui-ci sont les mêmes que pour ces deux langages, en fonction du type de fichier que vous utilisez.

Pour les fichiers .schtml, nous aurons donc les opérateurs suivants que nous n'allons pas décrire cependant.

.     ;      >=      ;      ()     ;    +     ;     []     ;
-     ;       =      ;      *      ;    !     ;     /      ;
==    ;      &&      ;      !=     ;    ||    ;     <>     ;
+=    ;      <=      ;      -=

IV-C - Les blocs de code

Le code sur plusieurs lignes est défini dans un bloc. Les blocs de code Razor doivent contenir le caractère @ suivi des {} (@{}).

@{

var Nom = "Hinault";
var Message = "Salut" + Nom;
}

Chaque instruction dans un bloc de code doit toujours s'achever avec le ;.

IV-D - Les variables

La déclaration des variables avec Razor se fait en utilisant le mot-clé « var ».

@{
//Affectation d'une chaine à une variable
var Nom = " Hinault " ;
//Affectation d'un entier
var Compteur = 5 ;
//Affection d'une expression
var VFinal = Compteur +3 ;
}

Ou en utilisant la syntaxe classique en définissant explicitement le type de données.

@{
string Nom = "hinault";
int Valeur =205;
DateTime Today = DateTime.Now ;
}

Le mot-clé « new » est également pris en compte.

@{
var stringBuilder stB = new System.Text.StringBuilder();
}

Tout comme en C#, les noms de variables et les mot-clés comme var, if, etc. sont sensibles à la casse.

IV-E - Les chaines de caractères

Pour spécifier une chaine de caractères, vous devez simplement placer la chaine entre les guillemets.

@{var message = "bonjour monsieur" ; }

Si la chaine que vous souhaitez afficher contient le caractère « \ », ou les guillemets, vous pouvez utiliser l'opérateur « @ » pour spécifier une chaine de caractères verbatim.

@{
myFilePath= @"C:\perso\";
}
<p>Le dossier personnel est : @folder</p>

Pour le cas du texte contenant les guillemets, l'opérateur « @ » doit être utilisé, et les guillemets doivent être doublés :

@{
var MyQuote = @"Les utilisateurs ont dit : ""Razor est cool.""";
}
<p>@MyQuote</p>

Ce qui produit comme résultat :

Les utilisateurs ont dit : « Razor est cool »

Pour un texte unique dans un bloc, la syntaxe est la suivante :

@{

@:Nous sommes le : <b> @DateTime.Now.ToShortDateString() </b>

}

L'analyseur de code Razor est assez intelligent dans la plupart des cas, et est capable de déduire si le caractère @ dans une page est utilisé pour un bloc de code ou pour du contenu statique.

Le caractère @ peut être utilisé par exemple pour définir un email :

<p>
Mon mail est rdonfack@redaction-developpez.com
</p>

Lors de l'analyse de cette ligne par Razor, celui-ci va détecter automatiquement qu'il s'agit d'un contenu statique.

Le caractère @ peut également être échappé en le doublant simplement :

<p> le caractère "@@" est magique avec Razor<p>

Ce qui va donner comme résultat :

Le caractère « @ » est magique avec Razor

IV-F - Les tableaux et les dictionnaires de données

Une collection est un groupe d'objets de même type. Deux types de collections sont couramment utilisés en ASP.NET : les tableaux et les dictionnaires de données.

La déclaration d'un tableau peut être faite comme suit :

@{
string[] Clients = { "Hinault", "Paul", "Romain", "André", "Jean" };

var Clients2 = new string[] {"Hinault", "Paul", "Romain", "André", "Jean"} ;
}
<p>@Clients[1] est client dans notre entreprise</p>

Un dictionnaire quant à lui, est une collection qui associe une clé unique à chaque élément. On peut ensuite accéder à cet élément via sa clé.

L'implémentation d'un dictionnaire avec Razor est la suivante :

@{
var mesApp = new Dictionary<string, string>();
mesApp.Add("App1", "Visual Studio");
mesApp.Add("App2", "WebMatrix");
mesApp.Add("App3", "SQL Server");

}
<p>La seconde application couramment utilisée est : @mesApp["App2"]%</p>

IV-G - les boucles

Pour parcourir un tableau dans une vue Razor, vous pouvez utiliser les boucles for, foreach ou encore While. Leur syntaxe est reprise des langages C# et VB.NET.

IV-G-1 - La boucle for

La syntaxe d'utilisation de la boucle for est la suivante :

@{
string[] Clients = { "Hinault", "Paul", "Romain", "André", "Jean" };

int ct = Clients.Lenght();

for (var i = 0; i < ct; i++)
{
<p> @Clients[i]</p>
}
}

IV-G-2 - La boucle foreach

La bouche foreach est pratique pour parcourir les collections, car contrairement à une boucle for, vous n'avez pas à incrémenter le compteur ou fixer une limite. Au lieu de cela, la boucle foreach passe simplement à travers la collection jusqu'à ce qu'elle soit terminée.

La syntaxe de cette boucle est la suivante :

@{
string[] Clients = { "Hinault", "Paul", "Romain", "André", "Jean" };

foreach (var Client in Clients)
{
<p> @Client</p>
}
}

IV-G-3 - La boucle While

La syntaxe d'utilisation de la boucle While dans une vue Razor est la suivante :

@{
string[] Clients = { "Hinault", "Paul", "Romain", "André", "Jean" };
int ct = Client.Count();
int i = 0;
While (i < ct)
{
<p> @Client[i]</p>
i += 1 ;
}
}

IV-H - Les structures de contrôles

La syntaxe basique de la condition if est la suivante :

@ {
var showToday = true;
if(showToday) if (showToday)
{
@DateTime.Today; @ DateTime.Today;
}
}

Et avec un else :

@{
var showToday = false;
if(showToday)
{
@DateTime.Today;
}
else
{
<text>Désolé!</text>
}
}

L'utilisation du switch peut être faite comme suit :

@{
var Civilite = "M";
var Message = "";

switch(Civilite)
{
case "M":
Message = "Bonjour Monsieur";
break;
case "Mme":
Message = "Bonjour Madame";
break;
case "Mlle":
Message = "Bonjour Mademoiselle";
break;
default:
Message = "Inconnu";
break;
}

<p>@Message</p>
}

IV-I - Les commentaires

L'inclusion des commentaires dans un code Razor commence avec les caractères-clés « @* », et se termine avec les caractères « *@ ».

@{
@* Un simple commentaire sur une ligne *@
var nom = "Hinault";

@* commentaires sur plusieurs
lignes *@

@* un autre commentaire sur plusieurs lignes
var nom = "Hinault";
fin du commentaire *@
}

Les commentaires traditionnels en C# ou en VB.NET (en fonction du type de fichier que vous utilisez) sont également pris en compte dans un bloc de code Razor.

@ {
// Un commentaire sur une ligne en C#.
var nom = "Hinault";
/* Commentaire sur plusieurs lignes
En utilisant le langage C# avec Razor */
}

IV-J - Gestion des exceptions

Pour la gestion des exceptions, le traditionnel try{}catch(){}, peut être utilisé dans une vue Razor.

Sa syntaxe est la suivante :

@{
int a=0, b=0;
try
{
b = 5 / a;
}
catch (DivideByZeroException Ex)
{
<p> impossible de diviser un nombre par zéro </p>
<p>Details : @Ex.message</p>
}
}

V - Les Layouts

Razor apporte, avec les layouts, une alternative au concept des Masterpages en ASP.NET, qui ne sont pas supportées par Razor.

Pour ceux qui n'ont pas l'habitude d'ASP.NET, ou qui n'ont jamais utilisé les Masterpages, le principe est de regrouper, dans une page spécifique, les éléments communs de mise en page pour le site (tels que le menu, l'entête, le pied de page, ou autres scripts JavaScript utilisés par toutes les pages).

Par défaut, lors de la création d'un site web utilisant le moteur de vue Razor le fichier de Layout suivant est créé automatiquement :

@inherits System.Web.Mvc.WebViewPage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>@View.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="page">

<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>

<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>

<div id="menucontainer">

<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>

</div>
</div>
<div id="main">
@RenderBody()
<div id="footer">
</div>
</div>
</div>
</body>
</html>

Si l'on regarde de plus près la page, on se rend compte que ce qui la rend spéciale est l'appel à la méthode @RenderBody().

Cette méthode, qui ne peut être appelée qu'une seule fois dans la page, va permettre de déterminer l'endroit où le code de la page utilisant le Layout va être rendu.

Par exemple, si on a la vue suivante (la vue Home.cshtml créée par défaut) :

@inherits System.Web.Mvc.WebViewPage
@{
View.Title = "Home Page";
LayoutPage = "~/Views/Shared/_Layout.cshtml";
}

<h2>@View.Message</h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

Et que je modifie le fichier _Layout.cshtml ainsi :

<div id="main" style="background-color:red">
@RenderBody()
<div id="footer">
</div>
</div>

Le résultat, à l'exécution, sera le suivant :

V-A - ViewStart

Il peut vite être lassant d'avoir, en haut de chaque page, une ligne indiquant le fichier de layout à utiliser.

Pour remédier à cela, Razor propose un mécanisme supplémentaire, la vue _ViewStart, spécifiquement prévue pour gérer l'association des pages avec un layout.

ViewStart est en effet appelée avant chaque rendu d'une vue se trouvant dans son répertoire ou un de ses sous-répertoires.

Dans sa plus simple expression, une page ViewStart aura le contenu suivant :

@{
Layout = "~/Views/Shared/_Layout.cshtml";}

Il est aussi possible d'utiliser cette vue pour sélectionner le layout à utiliser, par exemple, on pourrait, pour utiliser un layout spécifique pour les pages d'édition, utiliser le code suivant :

@{
if (ViewContext.Controller.ValueProvider["controller"].RawValue.StartsWith("Edit"))
{
Layout = "~/Views/Shared/_EditLayout.cshtml";
}
else
{
Layout = "~/Views/Shared/_Layout.cshtml";
}
}

V-B - Sections

Le fait de n'avoir qu'un seul appel possible à RenderBody va certainement faire lever les sourcils de ceux qui utilisaient des masterpages ayant plusieurs zones de rendu possibles (plusieurs ContentPlaceHolders).

Razor apporte une solution élégante à cette problématique, par l'intermédiaire des sections.

Une section est une zone de la page qui va être définie ou redéfinie au niveau de la vue qui appelle le layout.

Par exemple, supposons que nous voulions, au niveau d'une vue spécifique, par exemple la vue Home, afficher un pied de page particulier, nous pourrions faire, dans notre vue _Layout :

<div id="main">
@RenderBody()
@RenderSection("PiedDePage")
// .

Et, dans notre vue Home.cshtml :

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}

@section PiedDePage {
<div>Mon pied de page pour la page Home</div>
}

Ceci étant dit, toute vue appelant _Layout va dorénavant devoir avoir une section Footer, au risque de remonter une exception. Nous avons le choix de rendre cette section optionnelle. Pour cela, il nous suffit de modifier l'appel à RenderSection, en mettant l'attribut required à false. Cela se passe comme cela :

@RenderSection("PiedDePage", required: false)

Cela est bien joli, mais pour vraiment couvrir les fonctionnalités de la masterpage, il nous manque toujours la possibilité d'avoir du contenu par défaut. Pour cela, on va tester l'existence de la section sur laquelle on travaille, et appliquer un rien de logique conditionnelle dans notre layout.

Notre layout aura dorénavant le contenu suivant :

@RenderBody()

@if (IsSectionDefined("PiedDePage")) {
@RenderSection("PiedDePage")
}
else {
<div>Mon pied de page par défaut </div>
}

V-C - Vues partielles avec Razor

L'exemple que nous venons de voir, bien que fonctionnel, est relativement tiré par les cheveux. En effet, dans la « vraie vie » d'un projet, un pied de page sera généralement soit géré directement depuis le layout, soit déporté dans une vue partielle.

En effet, tout comme lorsque l'on utilise le moteur de rendu aspx, Razor permet de créer et de manipuler des vues partielles, et introduit une syntaxe spécifique pour ces vues.

On va donc transformer notre pied de page en vue partielle, et utiliser la méthode RenderPage pour l'appeler.

Pour cela, on va commencer par créer un nouveau fichier cshtml

Notez que nous avons préfixé le nom de la vue par un caractère souligné (underscore). Cette convention, héritée de WebPages, indique que PiedDePage est une classe partielle, qui ne peut pas être rendue directement.

Pour conserver la démonstration la plus simple possible, on va commencer avec une vue partielle qui n'a pas besoin de données supplémentaires, et dont le code est décrit ci-après:

<div>Mon pied de page par défaut </div>

Oui, c'est tout, rien de plus compliqué que ça.

Notre fichier de layout, lui, va être modifié ainsi :

<div id="main">
@RenderBody()
@RenderPage("~/Views/Shared/_PiedDePage.cshtml")
// ...

Notez que vous arriveriez exactement au même résultat en utilisant la méthode RenderPartial, avec le code suivant :

{@Html.RenderPartial("_PiedDePage");}

Si notre page est plus complexe (comprendre, très certainement pas la page layout), et que nous devions passer, par exemple, la valeur Url de notre Model à notre vue partielle, il nous suffirait de faire, dans le fichier appelant la vue partielle :

@RenderPage("~/Views/Shared/_MaVuePartielleComplexe.cshtml", Model.Url)

Il nous faudra par contre modifier notre Vue partielle, pour la typer avec le type correspondant. Par exemple, en supposant que notre valeur Url est un string :

@model string
<div>Mon pied de page par défaut, avec l'Url @Model </div>

Il est possible d'utiliser des modèles dynamiques dans les vues partielles. Personnellement, cette méthode ne me réjouit pas plus que cela, je préfère donc ne pas la démontrer dans cet article ;)

VI - Les Helpers Razor

Les Helpers ASP.NET Razor sont des composants contenant des méthodes qui vont simplifier le rendu du code HTML dans la vue. Très faciles à utiliser, ils s'avèrent assez utiles dans le développement.

Les Helpers fournissent au développeur débutant ou expérimenté, un moyen simple et cohérent d'effectuer des tâches de développement web dynamique qui, autrement, exigeraient beaucoup de code personnalisé. Les helpers sont stockés sous forme de fichier .cshtml.

L'utilisation des Helpers permettra d'augmenter la réutilisabilité, la maintenance et l'organisation du code grâce à la création d'unités distinctes pour implémenter des caractéristiques spécifiques. De plus, le développeur peut profiter des Helpers tiers qui sont déjà disponibles pour faire interagir facilement son application avec les réseaux sociaux, le multimédia, se connecter à Windows Azure, afficher les données dans une grille, etc.

Dans cette section, nous verrons comment utiliser des Helpers Razor tiers, et comment nous pouvons créer nos propres Helpers.

VI-A - Utilisation des Helpers

La syntaxe pour utiliser un Helper dans une vue Razor est assez simple et se fait avec une seule ligne de code comme suit :

@nom_helper.methode()

L'espace de nom System.Web.Helpers dans le Framework .NET contient un ensemble de Helpers prédéfinis, qui peuvent être utilisés pour assurer la sécurité d'une application, la validation des formulaires, organiser et afficher des images ou travailler avec des données dans des pages ASP.NET.

À titre d'exemple, nous allons utiliser le Helper ServerInfo pour afficher la configuration de notre environnement de développement dans une page ASP.NET.

Pour cela, nous allons ajouter simplement la ligne de code ci-dessous dans la page index du projet que nous avons créé précédemment :

@ServerInfo.GetHtml()

Et à l'exécution, nous obtenons le résultat suivant :

Le Helper ServerInfo est une fonctionnalité qui peut s'avérer très utile pendant les travaux de développement.

Nous tenons à noter que lors du déploiement d'une application, pour des besoins de sécurité il faut supprimer la ligne de code faisant appel à cette fonctionnalité.

Nous pouvons encore utiliser le Helper Chart pour afficher un graphique dans une page.

@{
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Ventes du jour")

.AddSeries(
name: "Produits",
chartType: "Pie",
xValue: new[] {  "Stylo", "Livre", "Cahier", "Gomme"},
yValues: new[] { "25", "7", "42", "5"})
.Write();
}

Ce qui à l'exécution produit le résultat suivant :

Le composant Chart peut également être utilisé avec comme source de données, les données d'une base de données, d'un fichier XML, et peut être sauvegardé sous forme de fichier XML, d'image, etc.

Des Helpers supplémentaires sont disponibles en ligne et téléchargeables via une interface proposée par Visual Studio. Plusieurs de ces Helpers, comme le Helper Twitter, Captcha, Bing, sont accessibles via l'espace de nom Microsoft.Helper.

Un ensemble d'Helpers Razor sont présentés dans la section « Razor Reference ».

VI-B - Création de son propre Helper

Nous avons vu précédemment comment utiliser les Helpers existants par défaut, essayons maintenant de créer notre propre composant Helper que nous pouvons personnaliser à souhait et utiliser dans n'importe quelle vue Razor de notre projet.

Un Helper peut être directement créé dans une vue, dans le cas où vous voulez réutiliser votre Helper Razor dans de multiples vues, vous devez le créer séparément dans une autre vue.

La création d'un Helper doit commencer avec le mot-clé @helper suivi du nom du Helper.

La syntaxe est la suivante :

@helper MonHelper()
{

}

VI-B-1 - Création d'un simple Helper dans une vue

Nous pouvons créer un simple Helper affichant une date dans une vue comme suit :

@helper CurrentTime()
{
<p>
Il est actuellement @DateTime.Now.TimeOfDay
</p>
}

Et pour faire appel à notre Helper, il suffira de procéder comme suit dans la vue :

<div>
@CurrentTime()
</div>

Nous pouvons encore créer un Helper prenant en entrée des paramètres comme suit :

@helper Somme(int a, int b)
{
@{
var sum = a + b;
}

<b>@sum</b>
}

Et pour l'utiliser, nous allons procéder comme suit :

<div>
La somme de 5 et 6 est : @Somme(5,6).
<div>

Il est à noter que vous pouvez utiliser l'IntelliSense de Visual Studio lorsque vous invoquez votre Helper.

VI-B-2 - Création d'un Helper réutilisable dans de multiples vues

Pour créer un Helper Razor que nous allons réutiliser dans plusieurs vues, nous devons ajouter un nouveau fichier .cshtml dans notre projet.

Pour cela, nous allons faire un clic droit sur le dossier « App_code » puis, cliquer « Ajouter » et sélectionner « Nouvel élément ».

Dans la liste des différents modèles proposés, vous devez choisir le modèle « MVC 3 Partial Page (Razor) ». Et donner comme nom au fichier « MyHelper.cshtml ».

Dans ce fichier, nous allons ajouter les lignes de code suivantes :

@helper CurrentTime()
{
<div>
Il est actuellement @DateTime.Now
</div>
}

@helper Somme(int a, int b)
{
@{
var sum = a + b;
}

<b>@sum</b>
}

Et pour utiliser notre Helper dans n'importe quelle vue Razor de notre projet, nous allons simplement procéder comme suit :

@MyHelper.CurrentTime()

@MuHelper.Somme(4,5)

VII - Les formulaires dans les vues Razor

Razor n'introduit pas de nouveaux contrôles de formulaires. La création des zones de texte, des cases à cocher ou des boutons se fera toujours de façon standard en HTML ou en utilisant des contrôles ASP.NET standard.

Ce qu'il sera intéressant de noter cependant est que dans un formulaire, vous pouvez faire appel aux contrôles HTML sous forme d'Helper HTML Razor, et effectuer autrement les traitements (validation des données, restauration des paramètres) en utilisant Razor.

VII-A - Création d'un formulaire HTML simple avec validation des données

Pour cette partie, nous allons utiliser un simple formulaire disposant des composants HTML les plus usuels. Pour cela, dans notre projet nous allons ajouter une nouvelle vue InsertClients.chtmls.

Le code du formulaire HTML que nous allons utiliser est le suivant :

<h2>Formulaire d'enregistrement des clients</h2>

<form method="post" action="">
<fieldset>
<legend>Nouveau client</legend>
<div>
<label>Nom:</label></div>
<div>
<input name="Nom" type="text" size="50" value="" />
</div>
<div>
<label>Prénom:</label></div>
<div>
<input name="Prenom" type="text" size="50" value="" />
</div>
<div>
<label>Adresse mail:</label></div>
<div>
<input name="Email" type="text" size="50" value="" />
</div>
<div>
<label>&nbsp;</label>
<input type="submit" value="Enregistrer" class="submit" />
</div>
</fieldset>

</form>

L'exécution de ce code produit le résultat suivant :

À ce stade nous avons créé simplement notre formulaire. Cependant, un clic sur le bouton « enregistrer » n'effectuera aucune action. Voyons donc comment lire les valeurs des champs saisies par un utilisateur et comment y effectuer les opérations en utilisant la syntaxe de Razor.

Pour cela, nous devons tout simplement ajouter les lignes de code suivantes au début de la page InsertClients.cshtml.

@{

if (IsPost)
{
var errors = false;
var Nom = Request["Nom"];
if (Nom.IsEmpty())
{
errors = true;
@:Le nom du client est obligatoire.<br />
}
var Prenom = Request["Prenom"];
if (Prenom.IsEmpty())
{
errors = true;
@:Le prénom du client est obligatoire.<br />
}
var Email = Request["Email"];
if (Email.IsEmpty())
{
errors = true;
@:L'adresse mail du client est obligatoire.<br />
}

if (errors == false)
{
//action à effectuer
Response.Redirect(@Href("~/Clients"));
}
}
}

IsPost permet de vérifier si l'utilisateur a soumis son formulaire.

La méthode @Href() permet de générer une URL à partir d'un chemin de fichier local.

Le résultat produit à l'exécution après la validation du formulaire par un utilisateur est le suivant :

Vous avez certainement remarqué que si la validation des informations soumises par un utilisateur n'est pas correcte, les données renseignées précédemment sont perdues. Pour remédier à cela, nous pouvons simplement utiliser le code suivant pour restaurer les valeurs après un Postback :

<form method="post" action="">
<fieldset>
<legend>Nouveau client</legend>
<div>
<label>Nom:</label></div>
<div>
<input name="Nom" type="text" size="50" value="@Request["Nom"]" />
</div>
<div>
<label>Prénom:</label></div>
<div>
<input name="Prenom" type="text" size="50" value="@Request["Prenom"]" />
</div>
<div>
<label>Adresse mail:</label></div>
<div>
<input name="Email" type="text" size="50" value="@Request["Email"]" />
</div>
<div>
<label>&nbsp;</label>
<input type="submit" value="Enregistrer" class="submit" />
</div>
</fieldset>

</form>

VII-B - Création d'un formulaire ASP.NET MVC 3 avec Razor.

Comme vous avez pu le constater dans l'exemple précédent, nous avons surchargé dans la vue les bouts de code pour le contrôle du formulaire et également pour le traitement.

Cependant, le patern MVC nous oblige à organiser notre interface utilisateur en trois composants à savoir : le modèle, la vue et le contrôleur.

Nous allons donc voir comment créer un formulaire ASP.NET MVC 3 Razor.

VII-B-1 - Création du modèle

Reprenons l'exemple précédent du formulaire d'enregistrement d'un client.

Nous allons dans un premier temps créer le modèle qui sera utilisé. Pour cela, ajoutez à votre projet un nouveau fichier de classe ClientModel.cs.

Dans ce fichier, ajoutez les lignes de code suivantes :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.ComponentModel.DataAnnotations;

namespace MvcApplication1.Models
{

public class Clients
{
[Required(ErrorMessage="Le nom est obligatoire") ]
public string Nom { get; set; }
[Required(ErrorMessage = "Le prénom est obligatoire")]
public string Prenom { get; set; }
[Required(ErrorMessage = "L'adresse mail est obligatoire")]

public string Email { get; set; }
}

}

Nous avons ajouté quelques validations à l'aide de Data Annotations, qui a été introduit avec ASP.NET MVC 3.

VII-B-2 - Création du contrôleur

Maintenant, vous allez créer le contrôleur en faisant un clic droit sur le dossier correspondant, et ensuite vous devez sélectionner « Ajouter » et cliquer ensuite sur « Contrôleur ».

Vous allez donner comme nom à votre contrôleur « ClientController ». Lorsque vous allez cliquer sur ajouter, Visual Studio va générer un fichier contenant par défaut une méthode public ActionResult Index().

Modifiez ce fichier pour que le code soit semblable à ceci :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
using System.Web.Security;
using MvcApplication1.Models;

namespace MvcApplication1.Controllers
{
public class ClientController : Controller
{
//
// GET: /Clients/

public ActionResult InsertClients()
{
return View();
}

//
// POST: /Clients/
[HttpPost]
public ActionResult InsertClients(Clients Cl)
{
if (ModelState.IsValid)
return RedirectToAction("Index", "Accueil");

// If we got this far, something failed, redisplay form
return View();
}

}
}

N'oubliez pas d'ajouter une référence au modèle (using MvcApplication1.Models).

Lorsque l'utilisateur va soumettre son formulaire, le contrôleur doit traiter les informations qu'il a transmises. C'est pour cela que nous avons ajouté le bloc de code suivant :

[HttpPost]
public ActionResult InsertClients(Clients Cl)
{
if (ModelState.IsValid)
return RedirectToAction("Index", "Accueil");

// If we got this far, something failed, redisplay form
return View();
}

Si les données sont valides, alors il sera redirectionné vers l'index du site. Bien évidemment, dans votre application vous devez le redirectionner vers une page de confirmation de son enregistrement.

Dans le cas où les informations ne sont pas correctes, la même page lui sera affichée avec un message d'erreur.

VII-B-3 - Génération de la vue Razor

Maintenant, vous allez créer la vue associée à l'action InsertClients().

Pour cela, dans le code du contrôleur, vous allez faire un clic droit à l'intérieur de la fonction InsertClients(), et cliquer ensuite sur « Ajouter une vue ».

Vous devez cocher l'option « créer une vue fortement typée », et dans la liste déroulante vous devez lier votre vue au modèle.

Choisissez également l'option « Create » dans la liste déroulante « Scaffold template » pour associer l'action d'ajout au formulaire de la vue.

Lorsque vous allez cliquer sur Ajouter, Visual Studio va générer automatiquement notre vue qui sera liée au contrôleur et au modèle.

Le code qui est généré est le suivant :

@model MvcApplication1.Models.Clients

@{
ViewBag.Title = "Clients";
}

<h2>Clients</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Clients</legend>

<div class="editor-label">
@Html.LabelFor(model => model.Nom)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Nom)
@Html.ValidationMessageFor(model => model.Nom)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Prenom)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Prenom)
@Html.ValidationMessageFor(model => model.Prenom)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email)
</div>

<p>
<input type="submit" value="Enregistrer" />
</p>
</fieldset>
}

Notez la référence au modèle avec le mot-clé @model :

@model MvcApplication1.Models.Clients

Et voilà le résultat final :

VIII - Manipulation des données

La classe Database est introduite par WebMatrix et permet de manipuler avec souplesse dans une vue Razor, avec le minimum de code une base de données. Vous pouvez donc l'utiliser pour ouvrir, lire et mettre à jour votre base de données dans une vue.

Propriétés : L'unique propriété de la classe Database est Connection, qui permet d'obtenir la connexion courante à une base de données.

Méthodes :

Méthode

Définition

Close

Est utilisée pour fermer une base de données ouverte

Dispose()

Est utilisée pour libérer toutes les ressources utilisées par une base de données

Execute

Permet d'exécuter une requête qui ne retourne aucune valeur

Open

Ouvre une base de données en utilisant le nom du fichier spécifié, ou la chaine de connexion passée en paramètre

OpenConnectionString(String)

Ouvre une connexion à une base de données en utilisant la chaine de connexion spécifiée

OpenConnectionString(String, String)

Ouvre une connexion à une base de données en utilisant la chaine de connexion et le fournisseur de données spécifié

Query

Exécute une requête qui retourne plusieurs lignes de données

QuerySingle

Exécute une requête qui retourne une seule ligne

QueryValue

Exécute une requête qui retourne une valeur scalaire unique

VIII-A - Connexion à une base de données

Pour vous connecter à une base de données, vous pouvez procéder comme suit :

@{
var db = Database.Open("NomDeLaBD");

}

La méthode Open() établit automatiquement une connexion et ouvre la base de données dont le nom du fichier est passé en paramètre.

Ceci est surtout valable pour les bases de données SQL Server Compact Edition, pour SQL Server ou MySQL, vous devez spécifier la chaine de connexion. La syntaxe est la suivante :

@{
var db = Database.Open("ChaineDeConnexion");

}

VIII-B - Lecture des données dans une vue ASP.NET Razor

À titre d'exemple, nous allons lire et afficher des informations sur un client (voir formulaire dans la section précédente) dans une base de données. Pour cela, je vais supposer que vous disposez déjà d'une base de données contenant une table Clients et les champs qui ont été définis dans le formulaire précédent, ainsi que quelques enregistrements.

Dans le fichier Web.Config, vous allez ajouter dans les balises ConnectionString une nouvelle chaine de connexion pour communiquer avec la DB.

Le format de base de la chaine de connexion est le suivant :

<add name="AppConnection" connectionString="Server=ServerName;Database=DatabaseName;
Uid=Username;pwd=Password" providerName="System.Data.SqlClient"/>

Vous allez maintenant ajouter dans votre projet un nouveau fichier ListeClients.cshmtl.

Au début de ce fichier, ajoutez les lignes de code suivantes pour ouvrir une connexion sur votre BD et définir la requête qui sera utilisée :

@{
var DB = Database.Open("AppConnection");
var SqlReq = "SELECT * FROM Clients";
}

Écrivons maintenant le script pour exécuter la requête et afficher les données qui seront retournées.

Pour cela, nous allons utiliser la méthode Query de la classe Database qui prend en paramètre la requête, l'exécute et retourne les champs de la table.

Nous allons également utiliser une boucle foreach pour lire les données dans une variable row et les afficher dans le tableau.

Le code correspond est le suivant :

@foreach(var row in db.Query(sqlreq)){
<tr>
<td>@row[0]</td>
<td>@row[1]</td>
<td>@row[2]</td>
<td>@row[3]</td>

</tr>
}

Le code complet pour cette page est le suivant :

@{
ViewBag.Title = "Liste des clients";
var DB = Database.Open("AppConnection");
var SqlReq = "SELECT * FROM Clients";
}

<h2>Liste des Clients</h2>
<div>
<table>
<tr>
<th>Id</th>
<th>Nom</th>
<th>Prénom</th>
<th>email</th>
</tr>
@foreach (var row in DB.Query(SqlReq))
{
<tr>
<td>@row[0]</td>
<td>@row[1]</td>
<td>@row[2]</td>
<td>@row[3]</td>
</tr>
}
</table>
</div>

Ce qui produit le résultat suivant à l'exécution :

VIII-C - Insertion des données

L'insertion des données avec la classe Database en utilisant Razor est relativement simple.

La structure de la requête SQL que nous allons utiliser est la suivante :

var SqlReq = "INSERT INTO Clients (Nom, Prenom, Email) " +
"VALUES (@0, @1, @2)";

Vous remarquerez certainement cette syntaxe particulière (@0, @1, @2). C'est la structure d'une requête paramétrée avec Razor. L'utilisation de cette syntaxe permet de protéger son site contre les attaques par injection SQL par exemple.

Pour exécuter la requête, nous allons utiliser le code suivant, en passant les variables contenant les valeurs qui seront substituées à celles définies dans notre requête paramétrée.

DB.Execute(SqlReq, Nom, Prenom, Email);

Le code complet utilisant le formulaire précédent est le suivant :

@{
ViewBag.Title = "clients";
var DB = Database.Open("AppConnection ");
}

@{

if (IsPost)
{
var errors = false;
var Nom = Request["Nom"];
if (Nom.IsEmpty())
{
errors = true;
@:Le nom du client est obligatoire.<br />
}
var Prenom = Request["Prenom"];
if (Prenom.IsEmpty())
{
errors = true;
@:Le prénom du client est obligatoire.<br />
}
var Email = Request["Email"];
if (Email.IsEmpty())
{
errors = true;
@:L'adresse mail du client est obligatoire.<br />
}

if (errors == false)
{
var SqlReq = "INSERT INTO Clients (Nom, Prenom, Email) " +
"VALUES (@0, @1, @2)";
DB.Execute(SqlReq, Nom, Prenom, Email);
Response.Redirect(@Href("~/Client/ListeClients"));
}
}
}

<h2>Formulaire d'enregistrement des clients</h2>

<form method="post" action="">
<fieldset>
<legend>Nouveau clientt</legend>
<div>
<label>Nom:</label></div>
<div>
<input name="Nom" type="text" size="50" value="@Request["Nom"]" />
</div>
<div>
<label>Prénom:</label></div>
<div>
<input name="Prenom" type="text" size="50" value="@Request["Prenom"]" />
</div>
<div>
<label>Adresse mail:</label></div>
<div>
<input name="Email" type="text" size="50" value="@Request["Email"]" />
</div>
<div>
<label>&nbsp;</label>
<input type="submit" value="Enregistrer" class="submit" />
</div>
</fieldset>

</form>

VIII-D - Utilisation du Helper Razor WebGrid pour l'affichage des données

Nous avons omis consciemment de vous parler du Helper Razor WebGrid dans la section sur les Helpers, tout simplement parce que cette partie-ci est idéale pour son utilisation.

Le WebGrid simplifie énormément l'affichage des données d'une table de la base de données dans une page ASP.NET.

Le WebGrid Helper retourne un tableau HTML qui affiche les données d'une table. L'assistant prend en charge les options de mise en forme pour créer un moyen de parcourir les données, et pour laisser aux utilisateurs la latitude de trier en cliquant sur un titre de la colonne.

Pour utiliser ce composant, nous allons déclarer une nouvelle variable de type WebGrid comme suit :

var Grid = new WebGrid(DB.Query(SqlReq));

Le WebGrid prend en paramètre le résultat d'une instruction de sélection des données dans la BD.

La méthode @grid.GetHtml() sera par la suite utilisée pour retourner une représentation HTML de la grille(tableau HTML).

VIII-D-1 - Personnalisation d'un WebGrid

Le WebGrid Helper affiche par défaut toutes les colonnes retournées par la requête. Mais vous pouvez le personnaliser en spécifiant par exemple les données qui seront affichées et dans quel ordre, procéder aux formatages des données (à l'exemple des dates ou des valeurs monétaires), etc.

La personnalisation du WebGrid est assez simple, il suffit lors de l'appel du Grid.GetHtml, de spécifier les colonnes à afficher, ainsi que le format de celles-ci, et les styles qui seront appliqués aux lignes et entêtes de colonnes.

@Grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "altrow",
columns: Grid.Columns(
Grid.Column("Nom"),
Grid.Column("Prenom", "Prénom"),
Grid.Column("Email","Adresse mail", format:@<i>@item.Email</i>)
)
)

Dans le cas où vous avez plusieurs éléments enregistrés dans la base de données, il est possible avec le WebGrid de définir le nombre de lignes qui seront affichées dans la grille.

Pour cela, il suffit de surcharger le constructeur du WebGrid en spécifiant le nombre d'éléments à afficher par page.

var Grid = new WebGrid(DB.Query("SELECT * FROM Clients"),
rowsPerPage : 5);

Le code complet de la page est le suivant :

@{
ViewBag.Title = "Liste des clients";
var DB = Database.Open("ConnectString1");
//  var SqlReq = "SELECT * FROM Clients";
var Grid = new WebGrid(DB.Query("SELECT * FROM Clients"),
rowsPerPage : 5);
}

<h2>Liste des Clients</h2>
<div>
@Grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "altrow",
columns: Grid.Columns(
Grid.Column("Nom"),
Grid.Column("Prenom", "Prénom"),
Grid.Column("Email","Adresse mail", format:@<i>@item.Email</i>)
)
)

</div>

Et finalement, vous pouvez obtenir le résultat suivant :

Le code CSS que nous avons utilisé pour le WebGrid et qui a été défini dans le Layout est le suivant :

<style type="text/css">
.grid { margin: 4px; border-collapse: collapse; width: 600px; }
.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
.altrow { background-color: #E8E8E8; color: #000; }
</style>

IX - Razor References

IX-A - Classes

Méthodes

Description

Exemple

AsBool(), AsBool(true|false)

Convertit une chaine en une valeur booléenne. Retourne faux si la valeur spécifiée ne représente pas un booléen (true/false)

AsDateTime(), AsDateTime( value )

Convertit une chaine en date. Retourne DateTime.MinValue si la chaine ne représente pas une date/heure valide

DateTime dt = stringValue . AsDateTime ();

AsDecimal(), AsDecimal( value )

Convertit une chaine en un nombre décimal. Retourne 0.0 si la chaine ne représente pas une valeur décimale

decimal d = stringValue . AsDecimal ();

AsFloat(), AsFloat( value )

Convertit une chaine en nombre réel. Retourne 0.0 si la chaine ne représente pas un nombre réel.

float d = stringValue . AsFloat ();

AsInt(), AsInt( value )

Convertit une chaine en nombre entier. Retourne 0 si la chaine ne représente pas un nombre entier.

int i = stringValue . AsInt ();

Href(path [, param1 [, param2]])

Génère une URL à partir d'un chemin de fichier local

<a href=« @Href( »~/Folder/File« ) »> My File</a>

IsBool(), IsDateTime(), IsDecimal(), IsFloat(), IsInt()

Retourne True si la valeur peut être convertie dans le format spécifié

var isint = stringValue . IsInt ();

IsEmpty()

Retourne True si l'objet ou variable n'a aucune valeur

if (Nom.IsEmpty()) {@:Le nom du client est obligatoire.<br /> }

IsPost

Retourne vrai si la demande est un POST

Layout

Spécifie le chemin du Layout dans une page

Layout = « MyLayout.cshtml »;

PageData[ key ], PageData[ index ], Page

Peut être utilisé pour accéder aux mêmes données dans plusieurs pages.

PageData[« FavoriteColor »] = « red »;PageData[1] = « apples »;Page.MyGreeting = « Good morning »;// Displays the value assigned to PageData[1] in the page.@Page[1]// Displays the value assigned to Page.MyGreeting. @Page.MyGreeting

RenderBody()

(Layout pages) effectue le rendu du corps d'une zone

@RenderBody()

RenderPage(path, values) RenderPage(path[, param1 [, param2]])

Effectue le rendu d'une page en utilisant le chemin spécifié

RenderPage(« _MySubPage.cshtml », « red », 123, « apples »)

RenderSection(sectionName [, required = true|false])

(Layout pages) effectue le rendu d'une section de contenu nommée

@RenderSection(« header »)

Request.Cookies[ key ]

Obtient ou définit la valeur d'un cookie HTTP.

var cookieValue = Request.Cookies[« myCookie »].Value;

Request.Files[ key ]

Obtient les fichiers qui ont été téléchargés par la requête courante

Request . Files [ « postedFile » ]. SaveAs (@ « MyPostedFile » );

Request.Form[ key ]

Obtient les données qui ont été transmises dans un formulaire

var formValue = Request.Form[« myTextBox »];

Response.AddHeader(name, value)

Ajoute un entête HTTP

Response.AddHeader(« WWW-Authenticate », « BASIC »);

Response.SetStatus( httpStatusCode )

Définit le code de statut HTTP envoyé au navigateur.

Response . SetStatus ( 401 );

@section(sectionName) { content }

(Layout pages) définit une section de contenu qui a un nom

@section header { <div> Header text </div> }

IX-B - Data

Méthode

Définition

Close

Est utilisée pour fermer une base de données ouverte

Dispose()

Est utilisée pour libérer toutes les ressources utilisées par une base de données

Execute

Permet d'exécuter une requête qui ne retourne aucune valeur

Open

Ouvre une base de données en utilisant le nom du fichier spécifié, ou la chaine de connexion passée en paramètre

OpenConnectionString(String)

Ouvre une connexion à une base de données en utilisant la chaine de connexion spécifiée

OpenConnectionString(String, String)

Ouvre une connexion à une base de données en utilisant la chaine de connexion et le fournisseur de données spécifié

Query

Exécute une requête qui retourne plusieurs lignes de données

QuerySingle

Exécute une requête qui retourne une seule ligne

QueryValue

Exécute une requête qui retourne une valeur scalaire unique

IX-C - Helper

Helper

Description

Exemple

Analytics.GetGoogleHtml( webPropertyId )

Retourne le script JavaScript de Google Analytics pour l'ID spécifié

@Analytics.GetGoogleHtml(« MyWebPropertyId »)

Analytics.GetStatCounterHtml(project, security)

Retourne le script JavaScript StartCounter Analytics pour le projet spécifié

@Analytics.GetStatCounterHtml(89, « security »)

Analytics.GetYahooHtml( account )

Retourne le script JavaScript de Yahoo Analytics pour le compte spécifié

@Analytics.GetYahooHtml(« myaccount »)

Bing.SearchBox( [boxWidth] )

Ajoute une zone de recherche pour le moteur Bing

@Bing.SearchBox() @* Searches the web.*@

Chart(width, height [, template] [, templatePath])

Initialise un graphique

@{    var myChart = new Chart(width: 600, height: 400); }

Chart.AddLegend( [title] [, name] )

Ajoute la légende à un graphique

@{ var myChart = new Chart(width: 600, height: 400)     .AddLegend(« Basic Chart »)     .AddSeries(         name: « Employee »,         xValue: new[] {  « Peter », « Andrew », « Julie », « Mary », « Dave » },   yValues: new[] { « 2 », « 6 », « 4 », « 5 », « 3 » })     .Write(); }

Crypto.Hash( string [, algorithm] )

Renvoie un hachage pour les données spécifiées. L'algorithme par défaut est sha256

@Crypto.Hash(« data »)

Facebook.LikeButton(href [, buttonLayout] [, showFaces] [, width] [, height] [, action] [, font] [, colorScheme] [, refLabel])

Ajoute le bouton FaceBook like à une page

@Facebook.LikeButton(« www.asp.net »)

FileUpload.GetHtml([initialNumberOfFiles] [, allowMoreFilesToBeAdded]   [, includeFormTag] [, addText] [, uploadText])

Affiche une interface utilisateur pour le téléchargement des fichiers

@FileUpload.GetHtml(initialNumberOfFiles:1, allowMoreFilesToBeAdded:false,   includeFormTag:true, uploadText:« Upload »)

Json.Encode( object )

Convertit un objet au format JSON

var myJsonString = Json.Encode(dataObject);

Json.Decode( string )

Convertit une chaine de données au format JSON en un objet que vous pouvez parcourir

var myJsonObj = Json.Decode(jsonString);

ModelStateDictionary.AddError(key, errorMessage)

Associe un message d'erreur avec un champ de formulaire

ModelState.AddError(« email », « Enter an email address »)

ModelStateDictionary.AddFormError( errorMessage )

Associe un message d'erreur avec un formulaire

ModelState . AddFormError ( « Password and confirmation password do not match. » );

ModelStateDictionary.I sValid

Retourne True s'il y a des erreurs de validation d'un formulaire

if (ModelState.IsValid) { // Save the form to the database }

ObjectInfo.Print( value [, depth] [, enumerationLength] )

Retourne les propriétés et les valeurs d'un objet et tous les objets enfants

@ObjectInfo.Print(person)

Recaptcha.GetHtml( [, publicKey] [, theme] [, language] [, tabIndex] )

Génère un contrôle

@ReCaptcha.GetHtml()

ReCaptcha.Validate( [, privateKey] )

Retourne le résultat d'un test

if (ReCaptcha.Validate()) {    // Test passed. }

ServerInfo.GetHtml()

Affiche la configuration du serveur

@ServerInfo.GetHtml()

Twitter.Profile( twitterUserName )

Affiche un flux Twitter du compte utilisateur spécifié

@Twitter.Profile(« billgates »)

Twitter.Search( searchQuery )

Affiche un flux Twitter pour le texte de recherche spécifié

@Twitter.Search(« asp.net »)

Video.Flash( filename [, width, height] )

Affiche un lecteur vidéo Flash pour le fichier spécifié (en option avec une largeur et une hauteur).

@Video.Flash(« test.swf », « 100 », « 100 »)

Video.MediaPlayer( filename [, width, height] )

Affiche un lecteur Windows Media Player pour le fichier spécifié

@Video.MediaPlayer(« test.wmv », « 100 », « 100 »)

Video.Silverlight(filename, width, height)

Affiche un lecteur Silverlight pour le fichier spécifié

@Video.Silverlight(« test.xap », « 100 », « 100 »)

WebCache.Get( key )

Retourne l'objet spécifié par la clé dans le cache, ou nul si l'objet n'est pas trouvé.

var username = WebCache.Get(« username »)

WebCache.Remove( key )

Supprime l'objet spécifié par la clé dans le cache

WebCache . Remove ( « username » )

WebCache.Set(key, value [, minutesToCache] [, slidingExpiration])

Ajoute la valeur spécifiée et sa clé dans le cache

WebCache.Set(« username », « joe@contoso.com »)

WebGrid( data )

Crée un objet WebGird en utilisant les données de la requête passée en paramètre

var db = Database.Open(« SmallBakery »);var grid = new WebGrid(db.Query(« SELECT * FROM Product »));

WebGrid.GetHtml()

Affiche un tableau HTML des données dans le WebGrid

@grid.GetHtml()// The 'grid' variable is set when WebGrid is created.

WebGrid.Pager()

@grid.Pager()

WebImage( path )

Charge une image à partir du chemin spécifié

var image = new WebImage(« test.png »);

WebImage.AddImagesWatermark( image )

Ajoute l'image spécifiée en filigrane

WebImage photo = new WebImage(« test.png »);WebImage watermarkImage = new WebImage(« logo.png »);photo.AddImageWatermark(watermarkImage);

WebImage.AddTextWatermark( text )

Ajoute le texte spécifié à l'image

image . AddTextWatermark ( « Copyright » )

WebImage.FlipHorizontal() WebImage.FlipVertical()

Inverse l'image horizontalement ou verticalement.

image.FlipHorizontal(); image.FlipVertical();

WebImage.Resize(width, height)

Redimensionne une image

image.Resize(100, 100);

WebImage.RotateLeft() WebImage.RotateRight()

Fait pivoter une image à gauche ou à droite

image.RotateLeft(); image.RotateRight();

WebImage.Save( path [, imageFormat] )

Sauvegarde l'image dans le répertoire spécifié

image . Save ( « test.png » );

WebMail.Password

Définit le mot de passe pour le serveur SMTP

WebMail.Password = « password »;

WebMail.Send(to, subject, body [, from] [, cc] [, filesToAttach] [, isBodyHtml]   [, additionalHeaders])

Envoie un email

WebMail.Send(« touser@contoso.com », « subject », « body of message », « fromuser@contoso.com »);

WebMail.SmtpServer

Définit le nom du serveur SMTP

WebMail.SmtpServer = « smtp.mailserver.com »;

WebMail.UserName

Définit le nom d'utilisateur pour le serveur SMTP

WebMail.UserName = « Joe »;

X - Conclusion, liens et remerciements

X-A - Conclusion

Le moteur de vue Razor est fluide, expressif, compact et sa prise en main est relativement simple. Nous avons essayé de regrouper autant que faire se peut dans ce tutoriel tout ce dont vous avez besoin de maitriser pour effectuer des opérations dans une vue ASP.NET en utilisant le moteur Razor.

X-B - Liens

Documentation officielle

Le billet d'introduction à Razor de Scott Guthrie

Les nouveautés d'ASP.NET MVC 3

Découverte et prise en main de WebMatrix

WebMatrix : Utilisation des Helpers Razor

Création d'un formulaire web avec ASP.NET MVC 3 et Razor

X-C - Remerciements

Je tiens à remercier ClaudeLELOUP pour sa relecture et correction orthographique.