• 30 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 23/11/2017

Scaffolding

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Pour ce chapitre, nous n’allons pas travailler sur l’application fil rouge. Vous êtes déçus, je vous comprends. Mais soyez quand même heureux, car le Scaffolding va vous simplifier la tâche au quotidien.
Le Scaffolding, c’est la capacité que possèdent Visual Studio et ASP.NET MVC pour vous générer du code répétitif permettant de créer, lire, mettre à jour et supprimer des choses dans votre application. En analysant votre modèle, Visual Studio est capable d’en déduire les champs dont vous allez avoir besoin pour réaliser des formulaires classiques et pour générer des actions de contrôleur.
En fait, nous aurions pu utiliser le Scaffolding pour notre application fil rouge mais j’ai préféré vous montrer comment tout faire de A à Z afin que vous puissiez comprendre les mécanismes qui sont inhérents à la création d’application ASP.NET MVC.

Gardez bien à l’esprit que le Scaffolding ne vous permettra pas de créer une application. Simplement, cela vous fera gagner du temps dans vos développements.

Projet de test

Pour éviter de salir notre belle application fil rouge, je vais créer un projet temporaire que j’appelle DemoScaffold afin d’illustrer comment tout cela fonctionne. Bien sûr, il s’agira d’une application Empty où nous aurons coché MVC.

Première chose à faire, je vais ajouter le modèle que nous avons créé pour l’application fil rouge dans cette application, comme cela vous saurez vraiment de quoi on parle.
Ajoutez donc à la solution les fichiers :

  • BddContext.cs

  • Resto.cs

  • Sondage.cs

  • Utilisateur.cs

  • Vote.cs

du répertoire Models. N’oubliez pas de compiler.

Scaffolding de contrôleur

Ensuite, nous allons ajouter un nouveau contrôleur que nous allons appeler Restaurant , sauf que cette fois-ci, nous n'allons pas créer un contrôleur MVC 5 vide, mais plutôt un contrôleur avec vues, utilisant Entity Framework :

Création d'un contrôleur avec vues, utilisant Entity Framework
Création d'un contrôleur avec vues, utilisant Entity Framework

Appelez-le Restaurant, puis sélectionnez la classe Resto  en tant que classe de modèle ainsi que BddContext  en tant que classe de contexte de données (si les classes n’apparaissent pas, il vous faudra recompiler votre application) :

Choix du modèle et de la classe de contexte de données
Choix du modèle et de la classe de contexte de données

Vous pouvez même spéficier le layout, ce que nous n'avons pas besoin de faire ici.

Cliquez sur Ajouter et la magie opère…

Visual Studio nous génère plein de choses. Le contrôleur RestaurantController  avec plusieurs actions dedans :

  • Index , qui permet de lister les restaurants

  • Details , qui permet d’afficher les détails d’un restaurant

  • Create  (GET et POST) pour créer un nouveau restaurant

  • Edit  (GET et POST) pour modifier un restaurant existant

  • Delete  (GET) et DeleteConfirmed  (POST) pour supprimer un restaurant

À l’intérieur, nous trouvons du code Entity Framework du même genre que celui que nous avons créé dans la DAL permettant de faire toutes les actions CRUD sur un restaurant.

Il y a également les vues. Visual Studio les a créées dans le répertoire qui va bien /Views/Restaurant (Create, Delete, Details, Edit et Index).
Ces vues sont presque comme celles que nous avons créées dans notre application fil rouge, à la différence qu’il y a pas mal d’anglais qui traîne, par exemple :

<h2>Create</h2>
[...]
@Html.ActionLink("Back to List", "Index")

Et que ce sont les helpers du genre DisplayFor  et EditorFor  qui sont utilisés plutôt que les LabelFor  et TextBoxFor  que nous avions vu précédement.

Sinon, franchement ce n’est pas loin de ce que nous avons déjà fait. Bien sûr, il y a des modifications à faire pour par exemple enlever l’anglais, changer un peu la disposition, retirer (éventuellement) la possibilité de supprimer un restaurant, rajouter nos validations personnalisées, etc. Mais à part ça, tout y est. Vous avez vu le temps que nous gagnons à éviter tout ce travail répétitif et peu intéressant ?

Tout ce que vous avez à faire, c’est utiliser ce mécanisme de scaffolding et vous aurez le gros du travail. Votre boulot à vous sera juste de customiser ce qui a été généré.

Scaffolding de vues

Alors là, nous avons vu comment générer tout d’un coup, mais vous n’avez pas forcément besoin de générer le contrôleur ni toutes les actions CRUD. Peut-être n’avez-vous juste besoin que d’une ou deux vues ?

Et bien c’est parfait, car il est également possible de choisir un modèle de vue de structure directement depuis la fenêtre d’ajout d’une vue :

Choix d'un modèle de vue de structure
Choix d'un modèle de vue de structure

Il suffit d’utiliser la liste déroulante. Vous reconnaîtrez les différentes possibilités qui s’offrent à nous :

  • Create pour générer de quoi créer un restaurant ;

  • Delete pour générer de quoi supprimer un restaurant ;

  • Details pour générer de quoi voir les détails d’un restaurant ;

  • Edit pour générer de quoi modifier un restaurant ;

  • List pour générer de quoi voir la liste des restaurants.

La vue qui se génère continue à se baser sur les propriétés des objets du modèle afin de fournir tous les champs dont nous avons besoin dans la vue.
Très pratique pour mâcher un peu le travail et gagner du temps.

D’autres modèles

Le moteur de Scaffolding se base sur les templates T4 de Visual Studio. Il est tout à fait possible d’aller modifier les templates existants. Ils se trouvent dans :

C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\VWDExpress\ItemTemplates\CSharp\Web\MVC 4\CodeTemplates\AddView\CSHTML

Par exemple, nous pourrions imaginer remplacer l’anglais par du français dans ces templates. Si j’ouvre le fichier Create.tt, je peux voir plein de choses plus ou moins compréhensibles. Mais il y a notamment à un endroit un :

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Nous pouvons le modifier en :

<div>
    @Html.ActionLink("Retour à la liste", "Index")
</div>

Et pourquoi pas faire plein d’autres choses :p, mais pour cela il faut parler le T4 et c’est un autre sujet…

Il existe d’autres modèles divers et variés, certains disponibles sur NuGet que vous pouvez télécharger, correspondant à divers besoins. Citons par exemple MvcScaffolding qui possède des modèles permettant de générer un contrôleur avec un repository, plutôt que d’utiliser directement Entity Framework dans le contrôleur. Vous pouvez l’installer en cherchant MvcScaffolding :

MVCScaffolding sur Nuget
MVCScaffolding sur Nuget

Le code du contrôleur généré est le suivant :

public class RestaurantController : Controller
{
    private readonly IRestoRepository restoRepository;

    // If you are using Dependency Injection, you can delete the following constructor
    public RestaurantController()
        : this(new RestoRepository())
    {
    }

    public RestaurantController(IRestoRepository restoRepository)
    {
        this.restoRepository = restoRepository;
    }

    //
    // GET: /Restaurant/

    public ViewResult Index()
    {
        return View(restoRepository.All);
    }

    //
    // GET: /Restaurant/Details/5

    public ViewResult Details(int id)
    {
        return View(restoRepository.Find(id));
    }

    //
    // GET: /Restaurant/Create

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

    //
    // POST: /Restaurant/Create

    [HttpPost]
    public ActionResult Create(Resto resto)
    {
        if (ModelState.IsValid)
        {
            restoRepository.InsertOrUpdate(resto);
            restoRepository.Save();
            return RedirectToAction("Index");
        }
        else
        {
            return View();
        }
    }

    //
    // GET: /Restaurant/Edit/5

    public ActionResult Edit(int id)
    {
        return View(restoRepository.Find(id));
    }

    //
    // POST: /Restaurant/Edit/5

    [HttpPost]
    public ActionResult Edit(Resto resto)
    {
        if (ModelState.IsValid)
        {
            restoRepository.InsertOrUpdate(resto);
            restoRepository.Save();
            return RedirectToAction("Index");
        }
        else
        {
            return View();
        }
    }

    //
    // GET: /Restaurant/Delete/5

    public ActionResult Delete(int id)
    {
        return View(restoRepository.Find(id));
    }

    //
    // POST: /Restaurant/Delete/5

    [HttpPost, ActionName("Delete")]
    public ActionResult DeleteConfirmed(int id)
    {
        restoRepository.Delete(id);
        restoRepository.Save();

        return RedirectToAction("Index");
    }

    protected override void Dispose(bool disposing)
    {
        if (disposing)
        {
            restoRepository.Dispose();
        }
        base.Dispose(disposing);
    }
}

Ça ressemble quand même pas mal à ce que nous avons fait non ? ;)
Remarquez que le Repository et son interface ont été générés bien sûr dans le répertoire Models…  À noter que les vues sont également légèrement différentes et utilisent les vues partielles pour factoriser un peu de code.

En résumé

  • Le mécanisme de Scaffolding permet aux développeurs ASP.NET MVC de gagner du temps.

  • Il permet de générer une grosse partie du code répétitif dont nous avons besoin pour gérer des listes d’éléments avec les diverses opérations CRUD.

  • Le Scaffolding se base sur le moteur de template T4 et est extensible, vous pouvez trouver des nouveaux modèles sur Internet.

Exemple de certificat de réussite
Exemple de certificat de réussite