Le 17 janvier 2014, l'équipe Cellenza vous proposait une soirée communautaire vous permettant de découvrir ASP.NET MVC. Voici les slides de la session.

1. A S P . N E T
M V C
From zero to hero
Software
Development
Done Right
1

2. Présentation
Cellenza est un cabinet de conseil IT dédié au
technologies Microsoft et aux méthodes Agiles.
Notre mission consiste à jouer le rôle de bras droit
et de tiers de confiance pour nos clients afin de
les accompagner dans l’adoption des meilleures
pratiques techniques et méthodologiques.
Afin de les aider à concevoir, développer et faire
évoluer vos applications et SI, nous fédérons au
sein de notre cabinet des consultants et coachs
Agiles de grande qualité.
2

3. Qui sommes nous ?
Georges Damien
Consultant .NET
Architecte logiciel
Spécialisation : web
3
Nicholas Suter
Spécialisation : homme à
tout faire

4. ASP.NET MVC : from zero to hero
Historique de MVC chez Microsoft
Comment ça marche ?
REST et http
Le routage
Razor
Pourquoi on y passe tous ?
4

5. Historique de MVC chez Microsoft
Le pattern émerge dans les années 70 dans des projets
Smalltalk
… et est formalisé en 1988. C’est une des premières
tentatives de formalisation du développement d’IHM.
2009 :
ASP.NET MVC
2010 :
ASP.NET MVC 2
Client-side validation,
Data Annotations
2011 :
ASP.NET MVC 3
Razor
2012 :
ASP.NET MVC 4
Web API
2013 :
ASP.NET MVC 5
Unification ASP.NET,
Identity et Web API 2
5

6. Comment ça marche ?
Modèle
La logique
métier et la
persistance
des données
C# + SQL
Server
http request
Navigateur
web
Contrôleur
http response
La gare de triage :
interroge le
modèle, choisit et
peuple la vue
C#
6
Ce avec quoi
intéragit
l’utilisateur
Vue
HTML + Razor
+ Javascript

7. REST et http
Architecture RESTfull : qui respecte le protocole http… et donc ses verbes
Verbe http
Equivalent
CRUD
Description
Supporté par Supporté par
ASP.NET
ASP.NET
MVC
Web API
GET
Select
Sert à
requêter le
modèle
Oui
Oui
POST
Insert
Créé un ou
Oui
des nouveaux
éléments
Oui
PUT
Update
Modifie un ou
des éléments
Oui
DELETE
Delete
Supprime un
élément
Oui
7

8. Le routage
La configuration du routage se fait dans
App_Start/RouteConfig.cs :
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action =
"Index", id = UrlParameter.Optional }
);
}
8

9. Le routage
{controler} = la classe contrôleur
{action} = nom de la méthode de la classe contrôleur
{id} = identifiant de l’objet à manipuler (optionnel)
Le routage par défaut est suffisant pour de petites
applications
Pour les applications plus conséquentes, on utilisera les
zones (Area).
9

10. Le routage
1. Réception de la requête http : GET:
/Account/Login
2. Exécution de
Controllers/AccountControler.Login()
3. Peuplement de la vue
Views/Account/Login.cshtml
4. Envoi de réponse http avec la vue
peuplée
10

11. Les zones
A utiliser quand le nombre de vues et de contrôleurs
deviennent trop élevés
Peuvent avoir un système de routage propre à chaque
zone
public class AdminAreaRegistration : AreaRegistration
{
public override string AreaName
{
get { return "Admin"; }
}
11
public override void
RegisterArea(AreaRegistrationContext context)
{
context.MapRoute(
"Admin_default",
"Admin/{controller}/{action}/{id}",
new { action = "Index", id =
UrlParameter.Optional }
);
}
}

12. Razor
C’est quoi ?
Le moteur de rendu introduit avec ASP.NET MVC 3 pour
remplacer le vieux moteur ASP.NET Webforms
En quoi c’est mieux ?
Moins verbeux
Plus testable
Supporte l’Intellisense
Les principes
Des helpers HTML
Des boucles, des conditionnelles, des switch…
L’accès au Framework
12

13. Razor
@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class =
"navbar-right" }))
{
@Html.AntiForgeryToken()
<ul class="nav navbar-nav navbar-right">
<li>
@Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Manage", "Account",
routeValues: null, htmlAttributes: new { title = "Manage" })
</li>
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
</ul>
}
}
else
{
<ul class="nav navbar-nav navbar-right">
<li>@Html.ActionLink("Register", "Register", "Account", routeValues: null,
htmlAttributes: new { id = "registerLink" })</li>
<li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new
{ id = "loginLink" })</li>
</ul>
}
13

14. Razor
ActionLink
Un lien vers une méthode d'action.
BeginForm
Déclaration d'un formulaire et lien vers la méthode
d'action qui restitue le formulaire.
CheckBox
DropDownList
Une liste déroulante.
Hidden
Informations du formulaire invisibles pour l’utilisateur.
ListBox
Une zone de liste.
Password
Une champ texte pour mot de passe.
RadioButton
Un bouton radio.
TextArea
Une zone de texte (ou champ texte multiligne).
TextBox
14
Une case à cocher.
Un champ texte.

15. Pourquoi on y passe tous ?
Vous aimez vraiment Webforms ? Mais genre…
vraiment ? Le ViewState, le cycle de vie de la page, le
moteur ASPX, les contrôles, etc.
Le pattern est propre et adapté au web
La séparation claire des responsabilités entre les
intégrateurs et les développeurs
Les vues sont du pur HTML (+ JS + CSS), les
contrôleurs et le modèle sont du pur C#
La testabilité du système (on y reviendra, mais pas
forcément aujourd’hui)
15

16. Allez plus loin
Allez plus loin :
http://blog.cellenza.com
http://www.asp.net/mvc
Formations intra (sur mesure) et extra entreprise :
http://training.cellenza.com/
formation@cellenza.com
Nous contacter :
info@cellenza.com
Nous rejoindre :
recrutement@cellenza.com
16