Hot Towel-Vorlage

Artikel
07/13/2023

Die Hot Towel MVC-Vorlage wurde von John Papa geschrieben

Wählen Sie die version aus, die heruntergeladen werden soll:

Heißtuch-MVC-Vorlage für Visual Studio 2012

Heißhandtuch-MVC-Vorlage für Visual Studio 2013

Heißes Handtuch: Weil Sie nicht ohne ins SPA gehen möchten!

Möchten Sie eine SPA erstellen, können aber nicht entscheiden, wo Sie beginnen sollen? Verwenden Sie Hot Towel und in Sekunden haben Sie ein SPA und alle Tools, die Sie benötigen, um darauf zu bauen!

Hot Towel bietet einen hervorragenden Ausgangspunkt für die Erstellung einer Single Page Application (SPA) mit ASP.NET. Standardmäßig bietet es eine modulare Struktur für Ihren Code, die Ansichtsnavigation, Datenbindung, umfassende Datenverwaltung und einfache, aber elegante Formatierung. Hot Towel bietet alles, was Sie zum Erstellen eines SPA benötigen, sodass Sie sich auf Ihre App konzentrieren können, nicht auf die Sanitäranlagen.

Erfahren Sie mehr über das Erstellen eines SPA in Den Videos, Tutorials und Pluralsight-Kursen von John Papa.

Anwendungsstruktur

Hot Towel SPA stellt einen App-Ordner bereit, der die JavaScript- und HTML-Dateien enthält, die Ihre Anwendung definieren.

Im Ordner App:

durandal
services
Viewmodels
views

Der Ordner App enthält eine Sammlung von Modulen. Diese Module kapseln Die Funktionalität und deklarieren Abhängigkeiten von anderen Modulen. Der Ordner views enthält den HTML-Code für Ihre Anwendung, und der Ordner viewmodels enthält die Präsentationslogik für die Ansichten (ein gängiges MVVM-Muster). Der Ordner "Dienste" eignet sich ideal für alle gängigen Dienste, die Ihre Anwendung möglicherweise benötigt, z. B. HTTP-Datenabruf oder Interaktion mit lokalem Speicher. Es ist üblich, dass mehrere Viewmodels Code aus den Dienstmodulen wiederverwenden.

ASP.NET serverseitige MVC-Anwendungsstruktur

Hot Towel baut auf der vertrauten und leistungsstarken ASP.NET MVC-Struktur auf.

App_Start
Inhalt
Controller
Modelle
Skripts
Ansichten

Ausgewählte Bibliotheken

ASP.NET MVC
ASP.NET-Web-API
ASP.NET Weboptimierung – Bündelung und Minimierung
Breeze.js – umfassende Datenverwaltung
Durandal.js : Navigation und Komposition anzeigen
Knockout.js – Datenbindungen
Require.js – Modularität mit AMD und Optimierung
Toastr.js : Popupnachrichten
Twitter Bootstrap – robustes CSS-Formatieren

Installation über die Visual Studio 2012 Hot Towel SPA-Vorlage

Hot Towel kann als Visual Studio 2012-Vorlage installiert werden. Klicken Sie einfach, File | New Project und wählen Sie aus.ASP.NET MVC 4 Web Application Wählen Sie dann die Vorlage "Hot Towel Single Page Application" aus, und führen Sie aus!

Installation über das NuGet-Paket

Hot Towel ist auch ein NuGet-Paket, das ein vorhandenes leeres ASP.NET MVC-Projekt erweitert. Installieren Sie einfach mithilfe von Nuget, und führen Sie dann aus!

Install-Package HotTowel

Wie baue ich heißes Handtuch?

Beginnen Sie einfach mit dem Hinzufügen von Code!

Fügen Sie Ihren eigenen serverseitigen Code hinzu, vorzugsweise Entity Framework und WebAPI (die mit Breeze.js wirklich glänzen)
Hinzufügen von App/views Ansichten zum Ordner
Hinzufügen von Viewmodels zum App/viewmodels Ordner
Hinzufügen von HTML- und Knockout-Datenbindungen zu Ihren neuen Ansichten
Aktualisieren der Navigationsrouten in shell.js

Exemplarische Vorgehensweise für HTML/JavaScript

Views/HotTowel/index.cshtml

index.cshtml ist die Startroute und -ansicht für die MVC-Anwendung. Sie enthält alle Standardmetatags, CSS-Links und JavaScript-Verweise, die Sie erwarten würden. Der Textkörper enthält eine Einzelne <div> , in der alle Inhalte (Ihre Ansichten) platziert werden, wenn sie angefordert werden. Der @Scripts.Render verwendet Require.js, um den Einstiegspunkt für den Code der Anwendung auszuführen, der in der main.js Datei enthalten ist. Ein Begrüßungsbildschirm wird bereitgestellt, um zu veranschaulichen, wie Sie einen Begrüßungsbildschirm erstellen, während Ihre App geladen wird.

<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

Die main.js Datei enthält den Code, der ausgeführt wird, sobald Ihre App geladen wird. Hier möchten Sie Ihre Navigationsrouten definieren, Ihre Startansichten festlegen und alle Setup-/Bootstrapping-Aktionen durchführen, z. B. das Priming der Anwendungsdaten.

Die main.js Datei definiert mehrere durandal-Module, um den Start der Anwendung zu unterstützen. Die define-Anweisung hilft beim Auflösen der Modulabhängigkeiten, sodass sie für die Funktion verfügbar sind. Zunächst werden die Debugnachrichten aktiviert, die Nachrichten über die von der Anwendung ausgeführten Ereignisse an das Konsolenfenster senden. Der code app.start weist durandal framework an, die Anwendung zu starten. Die Konventionen werden so festgelegt, dass durandal weiß, dass alle Ansichten und Ansichtsmodelle in denselben benannten Ordnern enthalten sind. Schließlich lädt die app.setRoot Kicks die shell mithilfe einer vordefinierten entrance Animation.

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

Ansichten

Ansichten befinden sich im App/views Ordner.

shell.html

Enthält shell.html das master Layout für Ihren HTML-Code. Alle Ihre anderen Ansichten werden an einer Seite ihrer shell Ansicht zusammengesetzt. Hot Towel bietet drei shell solche Regionen: eine Kopfzeile, einen Inhaltsbereich und eine Fußzeile. Jede dieser Regionen wird mit Inhalten aus anderen Ansichten geladen, wenn sie angefordert werden.

Die compose Bindungen für Kopf- und Fußzeile sind in Hot Towel hart codiert, um auf die Ansichten bzwfooter. auf die nav Ansichten zu verweisen. Die Compose-Bindung für den Abschnitt #content ist an das aktive Element des router Moduls gebunden. Anders ausgedrückt: Wenn Sie auf einen Navigationslink klicken, wird die entsprechende Ansicht in diesem Bereich geladen.

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

nav.html

Enthält nav.html die Navigationslinks für den SPA. Hier kann beispielsweise die Menüstruktur platziert werden. Häufig ist dies datengebunden (mit Knockout) an das router Modul, um die Navigation anzuzeigen, die Sie in definiert haben shell.js. Knockout sucht nach den Datenbindungsattributen und bindet diese an das shell Viewmodel, um die Navigationsrouten anzuzeigen und eine Fortschrittsleiste anzuzeigen (mithilfe von Twitter Bootstrap), wenn sich das router Modul gerade in der Navigation von einer Ansicht zur anderen befindet (siehe 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 und details.html

Diese Ansichten enthalten HTML für benutzerdefinierte Ansichten. Wenn auf den home Link im Menü der nav Ansicht geklickt wird, wird die home Ansicht im Inhaltsbereich der shell Ansicht platziert. Diese Ansichten können durch Ihre eigenen benutzerdefinierten Ansichten erweitert oder ersetzt werden.

footer.html

Enthält footer.html HTML, das in der Fußzeile am unteren Rand der shell Ansicht angezeigt wird.

ViewModels

ViewModels befinden sich im App/viewmodels Ordner.

shell.js

Das shell Viewmodel enthält Eigenschaften und Funktionen, die an die shell Ansicht gebunden sind. Häufig werden hier die Menünavigationsbindungen gefunden (siehe Logik router.mapNav ).

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

Diese Ansichtsmodelle enthalten die Eigenschaften und Funktionen, die an die home Ansicht gebunden sind. Es enthält auch die Präsentationslogik für die Ansicht und ist der Klebstoff zwischen den Daten und der Ansicht.

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

Dienste

Dienste befinden sich im Ordner App/services. Idealerweise könnten Ihre zukünftigen Dienste wie ein Dataservice-Modul, das für das Abrufen und Veröffentlichen von Remotedaten zuständig ist, platziert werden.

logger.js

Hot Towel stellt ein logger Modul im Dienstordner bereit. Das logger Modul eignet sich ideal zum Protokollieren von Nachrichten in der Konsole und für den Benutzer in Popup-Popups.

Freigeben über