mercredi 7 mars 2012

Publication One-Click avec Visual Studio 2010

Introduction

Une fonctionnalité très intéressante de Visual Studio est la publication One-Click. Celà permet assez simplement de publier votre site sur un IIS distant.

Web Deploy 2.0

Avant toute chose commençons par installer Web Deploy 2.0 disponible ici :
  • http://www.iis.net/download/webdeploy

Service de gestion IIS

Il faut ensuite installer le service de rôle "Service de gestion IIS".

Web Deploy 2.0

Il faut maintenant activer ce service via la console d'administration IIS



Paramétrage

Une fois l'installation et l'activation effectuées, reste le paramétrage:

  • Nous commençons par créer un utilisateur local auquel on affecte le groupe "Utilisateurs"
  • Nous ajoutons ensuite cet utilisateur dans les gestionnaires des services Internet via "Autorisation du gestionnaire des service Internet" dans la console d'administration IIS.
  • Nous lui attribuons ensuite les droits d'écriture sur le répertoire du site pour lequel nous voulons activer le publish One-Click
  • Nous ajoutons ensuite les règles suivantes via "Délégation du service de gestion" en leur attribuant l'utilisateur local déjà créé
    • iisApp
    • createApp
    • setAcl

Publication

Publions maintenant notre site en renseignant les informations nécessaires:




A noter que l'URL du service est formatée de la façon suivante:

  • http://SERVEUR_IIS:PORT_DU_SERVICE/msdeploy.axd
Et que le port est celui par défaut (8172) ou celui que vous avez renseigné lors de l'activation du service des gestion.

mercredi 6 avril 2011

Introduction au moteur de vues RAZOR

Introduction

Une des plus importantes nouveautés de ASP.NET MVC3 est le support du nouveau moteur de vues Razor. Attardons nous quelques instants sur cette nouveauté.

Razor apporte une série d'améliorations à nos vues:

  • La courbe d'apprentissage est particulièrement rapide ; nous appréhenderons plus loin dans cet article la syntaxe de Razor et vous pourrez vous rendre compte par vous-même qu'elle facilite grandement l'apprentissage pour peu qu'on soit familier avec l'ASP.NET classique
  • Cette nouvelle syntaxe minimise clairement le nombres de caractères, rendant par la même occasion le code plus lisible et son écriture plus fluide (plus de nécessité d'indiquer des blocs server)
  • Grâce à Visual Studio 2010 nous avons accès directement à partir de la vue à un intellisense très complet
  • Razor support également les tests unitaires

Syntaxe

@ commence les expressions inline ou les blocs de code, exemple :

@{string myName="Mickael";}
Bonjour, je m'appelle @myName

L'affichage sera : Bonjour je m'appelle Mickael

Pour info, sachez que l'utilisation de @ encode l'output

Pour spécifier de façon explicite ce que Razor doit traiter comme expression il faut ajouter (), exemple :

@{string idProduit="2";}
L'adresse de la fiche produit est : www.monsite.com/FicheProduit.aspx?id_produit=@(idProduit)&mode=1

Sachez qu'en doublant @@ vous échapperez ainsi le 2e @

Pour les if, switch, for et foreach, la syntaxe reste identique au c# une fois que vous avez encapsulé votre code dans @{}

@{
var isGood=true;
if(isGood)
{
    <text>c'est bien!</text>
}
else
{
    <text>c'est pas bien!</text>
}
}

@{
var myColor="rouge";
var copyColor="";
switch(myColor)
{
     case "rouge":
         copyColor = myColor;
         break;

     case "bleu":
         break;

}
}

@for(var i=1 ; i <10 ; i++)
{
     <p>Number @i</p>
}

@foreach(var item in myList)
{
     <p>Number @item.Number</p>
}

Conclusion

Razor est, selon moi, et particulièrement grâce à sa syntaxe et ses parsers un moteur de vues qui atteind son objectif de simplification de code. L'écriture ainsi que la lecture de code deviennent aisées et donc rapides.

mercredi 23 mars 2011

Introduction à ASP.NET MVC 3

Cet article est une première approche de ASP.NET MVC 3, nous allons ici voir les principales nouveautés apportées et les appliquer ensuite dans un exemple.


Introduction

Pour rappel, MVC (Modèle-Vue-Contrôleur) est un pattern de conception.
  • Modèle : le modèle implémente la logique métier
  • Vue : la vue correspond à l'interface utilisateur
  • Contrôleur : le contrôleur agit comme intermédiaire entre la vue et le modèle

Principales nouveautés

Une série d'améliorations ont été apportées grâce et avec Visual Studio 2010.
  • Le template d'un projet ASP.NET MVC 3 inclue maintenant par défaut les dernières versions de JQuery, du plugin de validation JQuery ainsi que JQuery UI (Bibliothèque de composants JQuery http://jqueryui.com/).
  • NuGet est maintenant installé avec ASP.NET MVC 3 et permet ainsi d'accéder à une large galerie de bibliothèques.
  • Un nouveau moteur de vues RAZOR est maintenant disponible. Pour info, ce nouveau moteur a pour principale avantage de simplifier l'écriture et la lisibilité des vues.

La validation côté client continue à évoluer. La version 3 d'ASP.NET MVC étant compilée avec le Framework .NET 4.0, nous avons accès à toutes les DataAnnotations apparues dans le Framework .NET 3.5.

La gestion des action filters a elle aussi évoluée. Il était possible dans la version précédente d'appliquer des action filters à un contrôleur, il maintenant possible de l'étendre à toute l'application en ajoutant notre filtre à la collection GlobalFilters via le fichier Global.asax.

2 nouveau types d'ActionResult font leur apparition : HttpNotFoundResult et HttpStatusCodeResult.
  • HttpNotFoundResult : Permet de rediriger vers une page 404 avec un message personnalisé
  • HttpStatusCodeResult : Permet de gérer l'envoi d'une page avec le status code souhaité

Côté JavaScript, le moteur d'exécution nous permet maintenant de supporter l'Unobstrusive Javascript que nous détaillerons plus bas.

La preuve par l'exemple

Commençons par créer un projet de type Application Web ASP.NET MVC 3 en veillant bien à sélectionner le moteur de vue Razor ainsi que le template Internet Application.

Commençons par créer notre model dans le répertoire Models, nous nommerons notre classe CarModel.

using System.ComponentModel.DataAnnotations;

    public class CarModel
    {
        [Required]
        [Display(Name = "Marque")]
        public string Marque { get; set; }

        [Required]
        [Display(Name = "Modèle")]
        public string Modele { get; set; }

        [Required]
        [Display(Name = "Carburant")]
        public string Carburant { get; set; }

        [Required()]
        [Display(Name = "Motorisation")]
        public string Motorisation { get; set; }
    }

    public class Cars
    {
        public Cars()
        {
            CarsList.Add(new CarModel
            {
                Marque = "Volkswagen",
                Modele = "Polo",
                Carburant = "Diesel",
                Motorisation = "1.9 TDI 90"
            });
            CarsList.Add(new CarModel
            {
                Marque = "Volkswagen",
                Modele = "Golf",
                Carburant = "Diesel",
                Motorisation = "1.9 TDI 105"
            });
            CarsList.Add(new CarModel
            {
                Marque = "Volkswagen",
                Modele = "Passat",
                Carburant = "Diesel",
                Motorisation = "2.0 TDI 140"
            });
            CarsList.Add(new CarModel
            {
                Marque = "Volkswagen",
                Modele = "Touran",
                Carburant = "Diesel",
                Motorisation = "2.0 TDI 140"
            });
            CarsList.Add(new CarModel
            {
                Marque = "Volkswagen",
                Modele = "Tiguan",
                Carburant = "Diesel",
                Motorisation = "1.9 TDI 105"
            });
        }

        public List<CarModel> CarsList = new List<CarModel>();
    }

Nous pouvons observer ici l'utilisation des DataAnnotations, pour plus de détails : http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.aspx

Nous allons maintenant afficher notre liste de Cars.
Ajoutez une référence à votre HomeController créé par défaut afin d'accéder à votre CarModel créé juste avant.
Ajoutez ensuite le code suivant dans votre méthode Index:

Cars result = new Cars();
return View(result.CarsList)

Créez une vue en ayant pris soin de supprimer au préalable la vue Index existante

Nous pouvons maintenant afficher nos résultats.

Les résultats sont affichés grâce à un tableau, ce qui peut rendre la lecture de notre vue assez compliquée. Différentes solutions sont disponibles pour simplifier notre code.
Allez dans Références et ajoutez un "Library Package Reference". Effectuez ensuite une recherche pour microsoft-web-helpers et installez le package. NuGet nous permet d'installer la dernières version de ce package en quelques secondes.


Utilisons maintenant le WebGrid fournit par ce package (pour plus d'infos http://msdn.microsoft.com/en-us/library/system.web.helpers.webgrid(v=vs.99).aspx)
Commençons par ajouter les lignes suivantes au fichier de style situé par défaut dans le répertoire Content

/* WebGrid
-----------------------------------------------------------*/
.WebGrid{margin:3px;width:400px;border-collapse:collapse;}

.GridHeader{background-color:Silver;font-weight:bold;}

.WebGrid th, .WebGrid td{border:1px solid black;padding:2px;}

.AlternateGrid{background-color:Gray;}

Modifions maintenant notre vue de la façon suivante:

@model IEnumerable

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

@{
var webGrid = new WebGrid(source: Model, canPage: true, rowsPerPage: 2);
webGrid.Pager(WebGridPagerModes.Numeric);
@webGrid.GetHtml(tableStyle:"WebGrid",
headerStyle:"GridHeader",
alternatingRowStyle:"AlternateGrid",
columns:webGrid.Columns(webGrid.Column("Marque", "Marque", canSort:true),
webGrid.Column("Modele","Modèle",canSort:true),
webGrid.Column("Carburant","Carburant",canSort:true),
webGrid.Column("Motorisation", "Motorisation", canSort: true)));
}


Nous obtenons ainsi une WebGrid avec la gestion de la pagination et du tri en seulement quelques lignes.

------------------------------------------------------------------------

A une prochaine fois dans un autre post! :)