SlideShare une entreprise Scribd logo
MVC & nouveautés ASP.NET
Où en sommes-nous ?


  Framework .NET (4.5)

   ASP.NET

    Présentation
     WebForms                  Dynamic
                MVC 4   Ajax             Web Pages 2
       4.5 ?                    Data
Une intro rapide à ASP.Net MVC

  En WebFoms, la page est le point de départ de votre
  applicaton
  En MVC, le code est le point de départ de votre application

  Quel code ?
     On reprend les principes REST :
     L’URL représente ce qu’on veut faire
     Par exemple /Clients/Affiche/Dupont

  .. Démo ?
Du neuf à tous les étages

  Dans ASP.NET Core


  Dans ASP.NET WebForms


  Dans ASP.NET MVC


  …
ASP.NET CORE
Minification et bundles

 <script src=“Scripts/js"></script>

        Packaging des scripts


 <link href="styles/css" rel="stylesheet" />


        Packaging des css

   Ordre : alphabétique + bon sens

(js connus placés en tête, ainsi que
reset.css et normalize.css)
Validation des requêtes

  La validation des requêtes change dans ASP.Net 4.5

  <httpRuntime requestValidationMode="4.5" ... />



  Les champs ne sont validés qu’à la première utilisation


  var s = context.Request.Unvalidated.Form["forum_post"];


  Et on peut choisir de ne pas les valider.
jQuery, on continue !




 Source : trends.builtwith.com
ASP.NET WebForms
Eval et Bind

<ul>
<asp:Repeater runat="server" ID="clients">
<ItemTemplate>
<li>
Nom: <%# Eval("Nom") %><br />
Prenom: <%# Eval("Prenom") %><br />
</li>
</ItemTemplate>
</asp:Repeater>
</ul>




<asp:FormView runat="server" ID="editClient">
<EditItemTemplate>
<div>
<asp:Label runat="server" AssociatedControlID="prenom">Prenom :</asp:Label>
<asp:TextBox ID="prenom" runat="server" Text='<%# Bind("Prenom") %>' />
</div>
<div>
<asp:Label runat="server" AssociatedControlID="nom">Nom :</asp:Label>
<asp:TextBox ID="nom" runat="server" Text='<%# Bind("Nom") %>' />
</div>
<asp:Button runat="server" CommandName="Update" />
</EditItemTemplate>
</asp:FormView>
Item et BindItem




<asp:FormView runat="server" ID="editClient" ModelType="ASPNETvNextTest.Model.Client">
<EditItemTemplate>
<div>
<asp:Label runat="server" AssociatedControlID="prenom">Prenom :</asp:Label>
<asp:TextBox ID="prenom" runat="server" Text='<%# BindItem.Prenom %>' />
</div>
<div>
<asp:Label runat="server" AssociatedControlID="nom">Nom :</asp:Label>
<asp:TextBox ID="nom" runat="server" Text='<%# BindItem.Nom %>' />
</div>
<asp:Button runat="server" CommandName="Update" />
</EditItemTemplate>
</asp:FormView>
Typage des contrôles de binding
<asp:GridView ID="categoriesGrid" runat="server"
ModelType="WebApplication1.Model.Category" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="CategoryID" HeaderText="ID" />
<asp:BoundField DataField="CategoryName" HeaderText="Name" />
<asp:BoundField DataField="Description" HeaderText="Description" />
<asp:TemplateField HeaderText="# of Products">
<ItemTemplate> <%# Item.Products.Count %> </ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Datasource : selectMethod
<asp:GridView ID="categoriesGrid" runat="server"
ModelType="WebApplication1.Model.Category"
SelectMethod="GetCategories" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="CategoryID" HeaderText="ID" />
<asp:BoundField DataField="CategoryName" HeaderText="Name" />
<asp:BoundField DataField="Description" HeaderText="Description" />
<asp:TemplateField HeaderText="# of Products">
<ItemTemplate> <%# Item.Products.Count %> </ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>


public IQueryable<Category> GetCategories()
{
var db = new Northwind();
return db.Categories.Include(c => c.Products);
}
Passage de paramètres

 public IQueryable<Product> GetProducts([QueryString]string keyword)
 {
 IQueryable<Product> query = _db.Products;

 if (!String.IsNullOrWhiteSpace(keyword))
 {
 query = query.Where(p => p.ProductName.Contains(keyword));
 }

 return query;
 }
En vrac…

  Encodage

<asp:TemplateField HeaderText="Name">
<ItemTemplate><% #:Item.Products.Name %></ItemTemplate>
</asp:TemplateField>




  Unobtrusive Javascript

<add name="ValidationSettings:UnobtrusiveValidationMode"
value="WebForms" />




  AntiXSS
<httpRuntime
   encoderType="System.Web.Security.AntiXss.AntiXssEncoder,
                System.Web, Version=4….
Extensions
WCF Web API
[ServiceContract]
   public class ContactsApi
   {
       [WebGet(UriTemplate = "")]
       public IQueryable<Contact> Get()
       {
           var contacts = new List<Contact>()
               {
                   new Contact {ContactId = 1,   Name   =   "Phil Haack"},
                   new Contact {ContactId = 2,   Name   =   "HongMei Ge"},
                   new Contact {ContactId = 3,   Name   =   "Glenn Block"},
                   new Contact {ContactId = 4,   Name   =   "Howard Dierking"},
                   new Contact {ContactId = 5,   Name   =   "Jeff Handley"},
                   new Contact {ContactId = 6,   Name   =   "Yavor Georgiev"}
               };
           return contacts.AsQueryable();
       }
   }




 public static void RegisterRoutes(RouteCollection routes)
    {
      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
      routes.Add(new ServiceRoute("api/contacts",
                 new HttpServiceHostFactory(), typeof(ContactsApi)));
WCF Web API

   IQueryable permet de
   passer des requêtes
   LINQ

   L’API renvoie au choix
   XML ou JSON
   (entête http Accept:)

   Un client de test est
   disponible



var config = new HttpConfiguration() { EnableTestClient = true };
           routes.Add(new ServiceRoute("api/contacts",
               new HttpServiceHostFactory() { Configuration = config},
               typeof(ContactsApi)));
NuGet
Entity Framework « Code First »
Allons un peu plus loin ?
Scaffolders MVC
ASP.NET MVC 4
Arrivée des rendus mobiles

  Trois grandes façons de procéder

     CSS media queries

     Vues spécialisées

     Projets dédiés
« adaptive rendering »

  E.g., on s’appuie sur les CSS Media Queries

  Pour
     Optimisé pour le type de navigateur
     Pas de duplication

  Contre
     On ne peut pas vraiment spécialiser la version mobile vs.
     Desktop
     Utilisation excessive de la bande passante
Rendu côté serveur

  E.g. les vues sont différentes en fonction du client

  Pour
     Flexibilité maximale
     Efficacité en bande passante

  Contre
     On peut avoir de la répétition
     La détection fine des devices n’est pas triviale
Next steps ?
En conclusion
  Microsoft a réussi à décorréler les évolutions d’ASP.Net et de VS
     Proprement et par projet, grâce à NuGet

  MVC prend du galon
     Nettement plus productif tous les ans
     Doté d’un arsenal pour le dev mobile
     Epaulé par NuGet / EF / Scaffolders / etc

  Il y a sur Internet 30 fois plus de WebForms que de MVC
     Les proportions sont meilleures en entreprise

  L’investissement de Microsoft dans WebForms est important
     Adaptation de toutes les nouveautés intéressantes

  Alors, MVC ou WebForms ?
     Il est temps de prendre des compétences MVC, même si le cœur
     de votre activité reste WebForms
MERCI !

Contenu connexe

Tendances

Mini projet individuel php
Mini projet individuel phpMini projet individuel php
Mini projet individuel php
Khadim Mbacké
 
Asp Au Service Des Mv Ps
Asp Au Service Des Mv PsAsp Au Service Des Mv Ps
Asp Au Service Des Mv Ps
Gregory Renard
 

Tendances (18)

Mini projet individuel php
Mini projet individuel phpMini projet individuel php
Mini projet individuel php
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
 
Cours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partieCours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partie
 
Formation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHPFormation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHP
 
Asp Au Service Des Mv Ps
Asp Au Service Des Mv PsAsp Au Service Des Mv Ps
Asp Au Service Des Mv Ps
 
script site e-commerce -php
script site e-commerce -php script site e-commerce -php
script site e-commerce -php
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 
Cours php & Mysql - 5éme partie
Cours php & Mysql - 5éme partieCours php & Mysql - 5éme partie
Cours php & Mysql - 5éme partie
 
Php
PhpPhp
Php
 
PHP (Partie II) Par Mahdi Ben Alaya
PHP (Partie II) Par Mahdi Ben AlayaPHP (Partie II) Par Mahdi Ben Alaya
PHP (Partie II) Par Mahdi Ben Alaya
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partie
 
Cakephp
CakephpCakephp
Cakephp
 
Ns python web 1
Ns python web 1Ns python web 1
Ns python web 1
 
Php & My Sql
Php & My SqlPhp & My Sql
Php & My Sql
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
 
Jquery
JqueryJquery
Jquery
 
Tapestry
TapestryTapestry
Tapestry
 

En vedette (8)

Développer et déployer WordPress en environnement microsoft
Développer et déployer WordPress en environnement microsoftDévelopper et déployer WordPress en environnement microsoft
Développer et déployer WordPress en environnement microsoft
 
EventMachine
EventMachineEventMachine
EventMachine
 
Développer et déployer une application php maintenable
Développer et déployer une application php maintenableDévelopper et déployer une application php maintenable
Développer et déployer une application php maintenable
 
Joomla Days 2011 Lyon
Joomla Days 2011 LyonJoomla Days 2011 Lyon
Joomla Days 2011 Lyon
 
RxJs - Reactive Extensions for JavaScript
RxJs - Reactive Extensions for JavaScriptRxJs - Reactive Extensions for JavaScript
RxJs - Reactive Extensions for JavaScript
 
Drupal en environnement microsoft
Drupal en environnement microsoftDrupal en environnement microsoft
Drupal en environnement microsoft
 
Capistrano 3 Deployment
Capistrano 3 DeploymentCapistrano 3 Deployment
Capistrano 3 Deployment
 
Capistrano - Deployment Tool
Capistrano - Deployment ToolCapistrano - Deployment Tool
Capistrano - Deployment Tool
 

Similaire à Web dev open door

Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
Vincent Composieux
 
REST JUG Toulouse 20100615
REST JUG Toulouse 20100615REST JUG Toulouse 20100615
REST JUG Toulouse 20100615
JUG Toulouse
 
Utilisation d'une api web avec asp
Utilisation d'une api web avec aspUtilisation d'une api web avec asp
Utilisation d'une api web avec asp
Novencia Groupe
 
Introductions Aux Servlets
Introductions Aux ServletsIntroductions Aux Servlets
Introductions Aux Servlets
François Charoy
 
laravel.sillo.org-Cours Laravel 10 les bases la validation.pdf
laravel.sillo.org-Cours Laravel 10  les bases  la validation.pdflaravel.sillo.org-Cours Laravel 10  les bases  la validation.pdf
laravel.sillo.org-Cours Laravel 10 les bases la validation.pdf
HeartKing10
 

Similaire à Web dev open door (20)

Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
 
ASP.NET from Zero to Hero
ASP.NET from Zero to HeroASP.NET from Zero to Hero
ASP.NET from Zero to Hero
 
Spring MVC
Spring MVCSpring MVC
Spring MVC
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 
Service WEB de type REST avec Java
Service WEB de type REST avec JavaService WEB de type REST avec Java
Service WEB de type REST avec Java
 
REST JUG Toulouse 20100615
REST JUG Toulouse 20100615REST JUG Toulouse 20100615
REST JUG Toulouse 20100615
 
Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5
 
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
 
Utilisation d'une api web avec asp
Utilisation d'une api web avec aspUtilisation d'une api web avec asp
Utilisation d'une api web avec asp
 
Mpdf 9
Mpdf 9Mpdf 9
Mpdf 9
 
Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011
 
Introductions Aux Servlets
Introductions Aux ServletsIntroductions Aux Servlets
Introductions Aux Servlets
 
Symposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorSymposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme Meteor
 
laravel.sillo.org-Cours Laravel 10 les bases la validation.pdf
laravel.sillo.org-Cours Laravel 10  les bases  la validation.pdflaravel.sillo.org-Cours Laravel 10  les bases  la validation.pdf
laravel.sillo.org-Cours Laravel 10 les bases la validation.pdf
 
Services rest & jersey
Services rest & jerseyServices rest & jersey
Services rest & jersey
 

Plus de LeTesteur (8)

Drupal in the cloud with Windows Azure
Drupal in the cloud with Windows AzureDrupal in the cloud with Windows Azure
Drupal in the cloud with Windows Azure
 
Php sous Windows - webcamps Paris
Php sous Windows - webcamps ParisPhp sous Windows - webcamps Paris
Php sous Windows - webcamps Paris
 
Web Matrix (Microsoft WebCamps Paris)
Web Matrix (Microsoft WebCamps Paris)Web Matrix (Microsoft WebCamps Paris)
Web Matrix (Microsoft WebCamps Paris)
 
PHP Forum 2010 : Php et microsoft
PHP Forum 2010 : Php et microsoftPHP Forum 2010 : Php et microsoft
PHP Forum 2010 : Php et microsoft
 
Eclipse day paris
Eclipse day parisEclipse day paris
Eclipse day paris
 
Reactive programming for javascript
Reactive programming for javascriptReactive programming for javascript
Reactive programming for javascript
 
Comment approcherlecloud
Comment approcherlecloudComment approcherlecloud
Comment approcherlecloud
 
What linq is about
What linq is aboutWhat linq is about
What linq is about
 

Web dev open door

  • 2. Où en sommes-nous ? Framework .NET (4.5) ASP.NET Présentation WebForms Dynamic MVC 4 Ajax Web Pages 2 4.5 ? Data
  • 3. Une intro rapide à ASP.Net MVC En WebFoms, la page est le point de départ de votre applicaton En MVC, le code est le point de départ de votre application Quel code ? On reprend les principes REST : L’URL représente ce qu’on veut faire Par exemple /Clients/Affiche/Dupont .. Démo ?
  • 4. Du neuf à tous les étages Dans ASP.NET Core Dans ASP.NET WebForms Dans ASP.NET MVC …
  • 6. Minification et bundles <script src=“Scripts/js"></script> Packaging des scripts <link href="styles/css" rel="stylesheet" /> Packaging des css Ordre : alphabétique + bon sens (js connus placés en tête, ainsi que reset.css et normalize.css)
  • 7. Validation des requêtes La validation des requêtes change dans ASP.Net 4.5 <httpRuntime requestValidationMode="4.5" ... /> Les champs ne sont validés qu’à la première utilisation var s = context.Request.Unvalidated.Form["forum_post"]; Et on peut choisir de ne pas les valider.
  • 8. jQuery, on continue ! Source : trends.builtwith.com
  • 10. Eval et Bind <ul> <asp:Repeater runat="server" ID="clients"> <ItemTemplate> <li> Nom: <%# Eval("Nom") %><br /> Prenom: <%# Eval("Prenom") %><br /> </li> </ItemTemplate> </asp:Repeater> </ul> <asp:FormView runat="server" ID="editClient"> <EditItemTemplate> <div> <asp:Label runat="server" AssociatedControlID="prenom">Prenom :</asp:Label> <asp:TextBox ID="prenom" runat="server" Text='<%# Bind("Prenom") %>' /> </div> <div> <asp:Label runat="server" AssociatedControlID="nom">Nom :</asp:Label> <asp:TextBox ID="nom" runat="server" Text='<%# Bind("Nom") %>' /> </div> <asp:Button runat="server" CommandName="Update" /> </EditItemTemplate> </asp:FormView>
  • 11. Item et BindItem <asp:FormView runat="server" ID="editClient" ModelType="ASPNETvNextTest.Model.Client"> <EditItemTemplate> <div> <asp:Label runat="server" AssociatedControlID="prenom">Prenom :</asp:Label> <asp:TextBox ID="prenom" runat="server" Text='<%# BindItem.Prenom %>' /> </div> <div> <asp:Label runat="server" AssociatedControlID="nom">Nom :</asp:Label> <asp:TextBox ID="nom" runat="server" Text='<%# BindItem.Nom %>' /> </div> <asp:Button runat="server" CommandName="Update" /> </EditItemTemplate> </asp:FormView>
  • 12. Typage des contrôles de binding <asp:GridView ID="categoriesGrid" runat="server" ModelType="WebApplication1.Model.Category" AutoGenerateColumns="false"> <Columns> <asp:BoundField DataField="CategoryID" HeaderText="ID" /> <asp:BoundField DataField="CategoryName" HeaderText="Name" /> <asp:BoundField DataField="Description" HeaderText="Description" /> <asp:TemplateField HeaderText="# of Products"> <ItemTemplate> <%# Item.Products.Count %> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>
  • 13. Datasource : selectMethod <asp:GridView ID="categoriesGrid" runat="server" ModelType="WebApplication1.Model.Category" SelectMethod="GetCategories" AutoGenerateColumns="false"> <Columns> <asp:BoundField DataField="CategoryID" HeaderText="ID" /> <asp:BoundField DataField="CategoryName" HeaderText="Name" /> <asp:BoundField DataField="Description" HeaderText="Description" /> <asp:TemplateField HeaderText="# of Products"> <ItemTemplate> <%# Item.Products.Count %> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> public IQueryable<Category> GetCategories() { var db = new Northwind(); return db.Categories.Include(c => c.Products); }
  • 14. Passage de paramètres public IQueryable<Product> GetProducts([QueryString]string keyword) { IQueryable<Product> query = _db.Products; if (!String.IsNullOrWhiteSpace(keyword)) { query = query.Where(p => p.ProductName.Contains(keyword)); } return query; }
  • 15. En vrac… Encodage <asp:TemplateField HeaderText="Name"> <ItemTemplate><% #:Item.Products.Name %></ItemTemplate> </asp:TemplateField> Unobtrusive Javascript <add name="ValidationSettings:UnobtrusiveValidationMode" value="WebForms" /> AntiXSS <httpRuntime encoderType="System.Web.Security.AntiXss.AntiXssEncoder, System.Web, Version=4….
  • 17. WCF Web API [ServiceContract] public class ContactsApi { [WebGet(UriTemplate = "")] public IQueryable<Contact> Get() { var contacts = new List<Contact>() { new Contact {ContactId = 1, Name = "Phil Haack"}, new Contact {ContactId = 2, Name = "HongMei Ge"}, new Contact {ContactId = 3, Name = "Glenn Block"}, new Contact {ContactId = 4, Name = "Howard Dierking"}, new Contact {ContactId = 5, Name = "Jeff Handley"}, new Contact {ContactId = 6, Name = "Yavor Georgiev"} }; return contacts.AsQueryable(); } } public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.Add(new ServiceRoute("api/contacts", new HttpServiceHostFactory(), typeof(ContactsApi)));
  • 18. WCF Web API IQueryable permet de passer des requêtes LINQ L’API renvoie au choix XML ou JSON (entête http Accept:) Un client de test est disponible var config = new HttpConfiguration() { EnableTestClient = true }; routes.Add(new ServiceRoute("api/contacts", new HttpServiceHostFactory() { Configuration = config}, typeof(ContactsApi)));
  • 19. NuGet
  • 20. Entity Framework « Code First »
  • 21. Allons un peu plus loin ?
  • 24. Arrivée des rendus mobiles Trois grandes façons de procéder CSS media queries Vues spécialisées Projets dédiés
  • 25. « adaptive rendering » E.g., on s’appuie sur les CSS Media Queries Pour Optimisé pour le type de navigateur Pas de duplication Contre On ne peut pas vraiment spécialiser la version mobile vs. Desktop Utilisation excessive de la bande passante
  • 26. Rendu côté serveur E.g. les vues sont différentes en fonction du client Pour Flexibilité maximale Efficacité en bande passante Contre On peut avoir de la répétition La détection fine des devices n’est pas triviale
  • 28. En conclusion Microsoft a réussi à décorréler les évolutions d’ASP.Net et de VS Proprement et par projet, grâce à NuGet MVC prend du galon Nettement plus productif tous les ans Doté d’un arsenal pour le dev mobile Epaulé par NuGet / EF / Scaffolders / etc Il y a sur Internet 30 fois plus de WebForms que de MVC Les proportions sont meilleures en entreprise L’investissement de Microsoft dans WebForms est important Adaptation de toutes les nouveautés intéressantes Alors, MVC ou WebForms ? Il est temps de prendre des compétences MVC, même si le cœur de votre activité reste WebForms

Notes de l'éditeur

  1. http://blog.stevensanderson.com/2011/01/28/mvcscaffolding-one-to-many-relationships/