Condividi tramite

Modello Hot Towel

  • Articolo

di Mads Kristensen

Il modello hot towel MVC è scritto da John Papa

Scegliere la versione da scaricare:

Modello MVC a caldo per Visual Studio 2012

Modello MVC a caldo per Visual Studio 2013

Asciugamani caldo: perché non vuoi andare alla SPA senza uno!

Vuoi creare una SPA, ma non puoi decidere dove iniziare? Usare l'asciugamani caldo e in secondi si avrà una SPA e tutti gli strumenti che è necessario costruire su di esso!

Hot Towel crea un ottimo punto di partenza per la creazione di un'applicazione a pagina singola (SPA) con ASP.NET. Fuori dalla scatola offre una struttura modulare per il codice, visualizzare la navigazione, il data binding, la gestione dei dati avanzata e uno stile semplice ma elegante. L'asciugamani caldo fornisce tutto ciò che devi creare una SPA, quindi puoi concentrarsi sulla tua app, non sull'impianto idraulico.

Altre informazioni sulla creazione di una SPA dai video, esercitazioni e corsi Pluralsight di John Papa.

Struttura dell'applicazione

Hot Towel SPA fornisce una cartella app che contiene i file JavaScript e HTML che definiscono l'applicazione.

All'interno della cartella App:

  • Durandal
  • services
  • Viewmodels
  • Viste

La cartella App contiene una raccolta di moduli. Questi moduli incapsulano funzionalità e dichiarano le dipendenze su altri moduli. La cartella views contiene il codice HTML per l'applicazione e la cartella viewmodels contiene la logica di presentazione per le visualizzazioni (un modello MVVM comune). La cartella dei servizi è ideale per ospitare tutti i servizi comuni necessari all'applicazione, ad esempio il recupero dei dati HTTP o l'interazione con l'archiviazione locale. È comune che più modelli di visualizzazione usino nuovamente il codice dai moduli del servizio.

ASP.NET struttura dell'applicazione lato server MVC

Hot Towel si basa sulla struttura ASP.NET MVC familiare e potente.

  • App_Start
  • Content
  • Controllers
  • Modelli
  • Script
  • Visualizzazioni
  • ASP.NET MVC
  • API Web ASP.NET
  • ASP.NET Ottimizzazione Web - Raggruppamento e minificazione
  • Breeze.js - Gestione avanzata dei dati
  • Durandal.js - composizione di spostamento e visualizzazione
  • Knockout.js - Associazioni dati
  • Require.js - Modularità con AMD e ottimizzazione
  • Toastr.js - Messaggi popup
  • Twitter Bootstrap - Stile CSS affidabile

Installazione tramite il modello di Visual Studio 2012 Hot Towel SPA

L'asciugamani caldo può essere installato come modello di Visual Studio 2012. Fare clic File | New Project e scegliere ASP.NET MVC 4 Web Application. Selezionare quindi il modello 'Hot Towel Single Page Application' ed eseguire!

Installazione tramite il pacchetto NuGet

Hot Towel è anche un pacchetto NuGet che aumenta un progetto MVC vuoto esistente ASP.NET. Installare solo con Nuget e quindi eseguire!

Install-Package HotTowel

Come faccio a costruire l'asciugamani caldo?

È sufficiente iniziare ad aggiungere codice!

  1. Aggiungere il proprio codice lato server, preferibilmente Entity Framework e WebAPI (che funzionano davvero con Breeze.js)
  2. Aggiungere visualizzazioni alla App/views cartella
  3. Aggiungere i modelli di visualizzazione alla App/viewmodels cartella
  4. Aggiungere data binding HTML e Knockout alle nuove visualizzazioni
  5. Aggiornare le route di spostamento in shell.js

Procedura dettagliata dell'HTML/JavaScript

Views/HotTowel/index.cshtml

index.cshtml è la route iniziale e la visualizzazione per l'applicazione MVC. Contiene tutti i meta tag standard, i collegamenti css e i riferimenti JavaScript previsti. Il corpo contiene un singolo <div> elemento in cui verrà inserito tutto il contenuto (le visualizzazioni) quando vengono richieste. Usa @Scripts.Render Require.js per eseguire il punto di ingresso per il codice dell'applicazione, contenuto nel main.js file. Viene fornita una schermata iniziale per illustrare come creare una schermata iniziale durante il caricamento dell'app.

<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>

App/main.js

Il main.js file contiene il codice che verrà eseguito non appena l'app viene caricata. Questo è il punto in cui si desidera definire le route di spostamento, impostare le visualizzazioni di avvio ed eseguire qualsiasi installazione/avviostrapping, ad esempio il priminging dei dati dell'applicazione.

Il main.js file definisce diversi moduli durandali per facilitare l'avvio dell'applicazione. L'istruzione define consente di risolvere le dipendenze dei moduli in modo che siano disponibili per la funzione. Prima di tutto, i messaggi di debug sono abilitati, che inviano messaggi relativi agli eventi che l'applicazione esegue nella finestra della console. Il codice app.start indica al framework durandal di avviare l'applicazione. Le convenzioni vengono impostate in modo che durandal conoscono tutte le visualizzazioni e i modelli di visualizzazione siano contenuti rispettivamente nelle stesse cartelle denominate. Infine, i app.setRoot calci caricano l'uso di un'animazione shell predefinita 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');
    });
});

Visualizzazioni

Le visualizzazioni sono disponibili nella App/views cartella.

shell.html

Contiene shell.html il layout master per il codice HTML. Tutte le altre visualizzazioni saranno composte da qualche parte sul lato della visualizzazione shell . L'asciugamani caldo offre tre shell aree di questo tipo: un'intestazione, un'area del contenuto e un piè di pagina. Ognuna di queste aree viene caricata con il modulo contenuto di altre visualizzazioni quando richiesto.

Le compose associazioni per l'intestazione e il piè di pagina sono hard coded in Hot Towel per puntare rispettivamente alle nav visualizzazioni e footer . L'associazione di composizione per la sezione #content è associata all'elemento router attivo del modulo. In altre parole, quando si fa clic su un collegamento di spostamento viene caricata nella visualizzazione corrispondente in questa area.

<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>

Contiene nav.html i collegamenti di spostamento per la spa. Questa è la posizione in cui è possibile posizionare la struttura dei menu, ad esempio. Spesso si tratta di dati associati (usando Knockout) al router modulo per visualizzare lo spostamento definito in shell.js. Knockout cerca gli attributi di associazione dati e associa quelli shell al modello di visualizzazione per visualizzare le route di spostamento e visualizzare una barra di avanzamento (usando Twitter Bootstrap) se il router modulo si trova al centro della navigazione da una visualizzazione a un'altra (vedere 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 e details.html

Queste visualizzazioni contengono HTML per le visualizzazioni personalizzate. Quando si fa clic sul home collegamento nel nav menu della visualizzazione, la home visualizzazione verrà posizionata nell'area contenuto della shell visualizzazione. Queste visualizzazioni possono essere aumentate o sostituite con le proprie visualizzazioni personalizzate.

footer.html

Contiene footer.html il codice HTML visualizzato nel piè di pagina, nella parte inferiore della shell visualizzazione.

ViewModel

ViewModels è disponibile nella App/viewmodels cartella.

shell.js

Il shell modello di visualizzazione contiene proprietà e funzioni associate alla shell visualizzazione. Spesso si tratta di una posizione in cui vengono trovate le associazioni di spostamento dei menu (vedere la router.mapNav logica).

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 e details.js

Questi modelli di visualizzazione contengono le proprietà e le funzioni associate alla home vista. contiene anche la logica di presentazione per la visualizzazione ed è la colla tra i dati e la vista.

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;
    }
});

Servizi

I servizi sono disponibili nella cartella App/services. Idealmente, i servizi futuri, ad esempio un modulo del servizio dati, responsabili del recupero e della registrazione di dati remoti, potrebbero essere inseriti.

logger.js

L'asciugamani caldo fornisce un logger modulo nella cartella dei servizi. Il logger modulo è ideale per registrare i messaggi nella console e per l'utente in popup.