A S P . N E T

M V C

From zero to hero
Software
Development

Done Right
1
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
Qui sommes nous ?

Georges Damien
Consultant .NET

Architecte logiciel

Spécialisation : web

3

Nicholas Suter

Spécialisation : homme à
tout faire
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
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
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
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
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
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
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
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 }
);
}
}
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
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
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.
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
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

ASP.NET from Zero to Hero

  • 1.
    A S P. N E T M V C From zero to hero Software Development Done Right 1
  • 2.
    Présentation Cellenza est uncabinet 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 MVCchez 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 ArchitectureRESTfull : 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 configurationdu 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éceptionde 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 utiliserquand 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 ? Lemoteur 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 versune 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 ypasse 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 Allezplus 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