Partager via

Modèle Hot Towel

  • Article

par Mads Kristensen

Le modèle Hot Towel MVC est écrit par John Papa

Choisissez la version à télécharger :

Modèle Hot Towel MVC pour Visual Studio 2012

Modèle Hot Towel MVC pour Visual Studio 2013

Serviette chaude: Parce que vous ne voulez pas aller au SPA sans un!

Vous souhaitez créer un SPA, mais vous ne pouvez pas décider par où commencer ? Utilisez Hot Towel et en quelques secondes, vous aurez un SPA et tous les outils dont vous avez besoin pour construire dessus!

Hot Towel crée un excellent point de départ pour la création d’une application monopage (SPA) avec ASP.NET. Il fournit une structure modulaire pour votre code, la navigation d’affichage, la liaison de données, la gestion riche des données et un style simple mais élégant. Hot Towel fournit tout ce dont vous avez besoin pour construire un SPA, afin que vous puissiez vous concentrer sur votre application, pas sur la plomberie.

Apprenez-en davantage sur la création d’un SPA à partir des vidéos, tutoriels et cours Pluralsight de John Papa.

Structure d'application

Hot Towel SPA fournit un dossier d’application qui contient les fichiers JavaScript et HTML qui définissent votre application.

Dans le dossier Application :

  • Durandal
  • services
  • viewmodels
  • views

Le dossier App contient une collection de modules. Ces modules encapsulent des fonctionnalités et déclarent des dépendances sur d’autres modules. Le dossier views contient le code HTML de votre application et le dossier viewmodels contient la logique de présentation des vues (un modèle MVVM courant). Le dossier services est idéal pour héberger tous les services courants dont votre application peut avoir besoin, tels que la récupération de données HTTP ou l’interaction de stockage local. Il est courant que plusieurs modèles d’affichage réutilisent le code des modules de service.

ASP.NET structure d’application côté serveur MVC

Hot Towel s’appuie sur la structure MVC ASP.NET familière et puissante.

  • App_Start
  • Contenu
  • Controllers
  • Modèles
  • scripts ;
  • Les vues

Installation via le modèle SPA Hot Towel de Visual Studio 2012

Hot Towel peut être installé en tant que modèle Visual Studio 2012. Cliquez simplement sur File | New Project et choisissez .ASP.NET MVC 4 Web Application Sélectionnez ensuite le modèle « Application monopage Hot Towel » et exécutez !

Installation via le package NuGet

Hot Towel est également un package NuGet qui augmente un projet MVC ASP.NET vide existant. Installez simplement à l’aide de Nuget, puis exécutez!

Install-Package HotTowel

Comment construire sur une serviette chaude ?

Commencez simplement à ajouter du code !

  1. Ajoutez votre propre code côté serveur, de préférence Entity Framework et WebAPI (qui brillent vraiment avec Breeze.js)
  2. Ajouter des vues au App/views dossier
  3. Ajouter des viewmodels au App/viewmodels dossier
  4. Ajouter des liaisons de données HTML et Knockout à vos nouvelles vues
  5. Mettre à jour les itinéraires de navigation dans shell.js

Procédure pas à pas du code HTML/JavaScript

Views/HotTowel/index.cshtml

index.cshtml est la route et la vue de départ de l’application MVC. Il contient toutes les balises meta standard, les liens CSS et les références JavaScript que vous attendez. Le corps contient un seul <div> qui est l’endroit où tout le contenu (vos vues) sera placé lorsqu’ils sont demandés. Utilise @Scripts.Render Require.js pour exécuter le point d’entrée du code de l’application, contenu dans le main.js fichier. Un écran de démarrage est fourni pour montrer comment créer un écran de démarrage pendant le chargement de votre application.

<body>
    <div id="applicationHost">
        @Html.Partial("_splash")
    </div>

    @Scripts.Render("~/scripts/vendor")
        <script type="text/javascript" src="~/App/durandal/amd/require.js" 
            data-main="@Url.Content("~/App/main")"></script>
</body>

Application/main.js

Le main.js fichier contient le code qui s’exécutera dès que votre application est chargée. C’est là que vous souhaitez définir vos itinéraires de navigation, définir vos vues de démarrage et effectuer toute configuration/démarrage, comme l’amorçage des données de votre application.

Le main.js fichier définit plusieurs modules de durandal pour aider l’application à démarrer. L’instruction define permet de résoudre les dépendances de modules afin qu’elles soient disponibles pour la fonction. Tout d’abord, les messages de débogage sont activés, ce qui envoie des messages sur les événements que l’application effectue à la fenêtre de console. Le code app.start indique au framework durandal de démarrer l’application. Les conventions sont définies afin que durandal sache que toutes les vues et les modèles d’affichage sont contenus dans les mêmes dossiers nommés, respectivement. Enfin, le app.setRoot kicks charge le à l’aide shell d’une animation prédéfinie entrance .

define(['durandal/app', 
        'durandal/viewLocator', 
        'durandal/system', 
        'durandal/plugins/router'],
    function (app, viewLocator, system, router) {

    // Enable debug message to show in the console 
    system.debug(true);

    app.start().then(function () {
        router.useConvention();
        viewLocator.useConvention();
        //Show the app by setting the root view model for our application.
        app.setRoot('viewmodels/shell', 'entrance');
    });
});

Les vues

Les vues se trouvent dans le App/views dossier .

shell.html

contient shell.html la disposition master pour votre code HTML. Toutes vos autres vues seront composées quelque part de côté de votre shell vue. Hot Towel fournit un shell avec trois régions de ce type : un en-tête, une zone de contenu et un pied de page. Chacune de ces régions est chargée avec le contenu d’autres affichages lorsque demandé.

Les compose liaisons pour l’en-tête et le pied de page sont codées en dur dans Hot Towel pour pointer vers les nav vues et footer , respectivement. La liaison de composition pour la section #content est liée à l’élément router actif du module. En d’autres termes, lorsque vous cliquez sur un lien de navigation, l’affichage correspondant est chargé dans cette zone.

<div>
    <header>
        <!--ko compose: {view: 'nav'} --><!--/ko-->
    </header>
     <section id="content" class="main container-fluid">
        <!--ko compose: {model: router.activeItem, 
            afterCompose: router.afterCompose, 
            transition: 'entrance'} -->
        <!--/ko-->
    </section>
    <footer>
        <!--ko compose: {view: 'footer'} --><!--/ko-->
    </footer>
</div>

contient nav.html les liens de navigation pour le SPA. C’est là que la structure de menu peut être placée, par exemple. Il s’agit souvent de données liées (à l’aide de Knockout) au router module pour afficher la navigation que vous avez définie dans .shell.js Knockout recherche les attributs de liaison de données et les lie au shell viewmodel pour afficher les itinéraires de navigation et afficher une barre de progression (à l’aide de Twitter Bootstrap) si le router module est en train de naviguer d’une vue à l’autre (voir router.isNavigating).

<nav class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <a class="brand" href="/">
            <span class="title">Hot Towel SPA</span> 
        </a>
        <div class="btn-group" data-bind="foreach: router.visibleRoutes">
            <a data-bind="css: { active: isActive }, attr: { href: hash }, text: name" 
                class="btn btn-info" href="#"></a>
        </div>
        <div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
            <div class="progress progress-striped active page-progress-bar">
                <div class="bar" style="width: 100px;"></div>
            </div>
        </div>
    </div>
</nav>

home.html et details.html

Ces vues contiennent du code HTML pour les vues personnalisées. Lorsque vous cliquez sur le home lien dans le nav menu de l’affichage, l’affichage home est placé dans la zone de contenu de l’affichage shell . Ces vues peuvent être augmentées ou remplacées par vos propres vues personnalisées.

footer.html

contient du footer.html code HTML qui s’affiche dans le pied de page, en bas de la shell vue.

ViewModels

Les viewModels se trouvent dans le App/viewmodels dossier .

shell.js

Le shell viewmodel contient des propriétés et des fonctions liées à la shell vue. Souvent, c’est là que se trouvent les liaisons de navigation de menu (voir la router.mapNav logique).

define(['durandal/system', 'durandal/plugins/router', 'services/logger'],
    function (system, router, logger) {
        var shell = {
            activate: activate,
            router: router
        };

        return shell;

        function activate() {
            return boot();
        }

        function boot() {
            router.mapNav('home');
            router.mapNav('details');
            log('Hot Towel SPA Loaded!', null, true);
            return router.activate('home');
        }

        function log(msg, data, showToast) {
            logger.log(msg, data, system.getModuleId(shell), showToast);
        }
    });

home.js et details.js

Ces viewmodels contiennent les propriétés et les fonctions liées à la home vue. il contient également la logique de présentation de la vue et constitue le lien entre les données et la vue.

define(['services/logger'], function (logger) {
    var vm = {
        activate: activate,
        title: 'Home View'
    };

    return vm;

    function activate() {
        logger.log('Home View Activated', null, 'home', true);
        return true;
    }
});

Services

Les services se trouvent dans le dossier App/services. Dans l’idéal, vos futurs services, tels qu’un module de service de données, chargé de l’obtention et de la publication des données distantes, pourraient être placés.

logger.js

Hot Towel fournit un logger module dans le dossier services. Le logger module est idéal pour la journalisation des messages dans la console et à l’utilisateur dans des toasts contextuels.