Šablona Hot Towel

Článek
07/13/2023

Šablona MVC horkého ručníku je napsána JohnEm Papa

Zvolte verzi, kterou chcete stáhnout:

Šablona Hot Towel MVC pro Visual Studio 2012

Šablona MVC horkého ručníku pro Visual Studio 2013

Horký ručník: Protože nechcete jít do SPA bez jednoho!

Chcete vytvořit SPA, ale nemůžete se rozhodnout, kde začít? Použijte horký ručník a za několik sekund budete mít SPA a všechny nástroje, které potřebujete, abyste na něm mohli stavět!

Horký ručník je skvělým výchozím bodem pro vytvoření jednostránkové aplikace (SPA) s ASP.NET. Nabízí modulární strukturu pro váš kód, navigaci v zobrazení, datové vazby, bohatou správu dat a jednoduché, ale elegantní styly. Hot Towel poskytuje vše, co potřebujete k vytvoření SPA, takže se můžete soustředit na svou aplikaci, ne na instalatérské práce.

Další informace o vytváření SPA najdete v videích, výukových kurzech a kurzech Pluralsightu od Johna Papa.

Struktura aplikace

Hot Towel SPA poskytuje složku Aplikace, která obsahuje soubory JavaScriptu a HTML, které definují vaši aplikaci.

Ve složce Aplikace:

durandal
services
modely zobrazení
zobrazení

Složka Aplikace obsahuje kolekci modulů. Tyto moduly zapouzdřují funkce a deklarují závislosti na jiných modulech. Složka views obsahuje kód HTML pro vaši aplikaci a složka viewmodels obsahuje logiku prezentace pro zobrazení (běžný vzor MVVM). Složka services je ideální pro uložení všech běžných služeb, které vaše aplikace může potřebovat, jako je načítání dat HTTP nebo interakce s místním úložištěm. Je běžné, že více modelů viewmodelů znovu používá kód z modulů služby.

ASP.NET struktura aplikace na straně serveru MVC

Hot Towel staví na známé a výkonné ASP.NET MVC struktury.

App_Start
Content
Kontrolery
Modely
Skripty
Zobrazení

Doporučené knihovny

ASP.NET MVC
Rozhraní API pro ASP.NET Web
optimalizace webu ASP.NET – sdružování a minifikace
Breeze.js – bohatá správa dat
Durandal.js – navigace a zobrazení složení
Knockout.js – datové vazby
Require.js – Modularita s procesorem AMD a optimalizace
Toastr.js – automaticky otevírané zprávy
Twitter Bootstrap - robustní styl css

Instalace prostřednictvím šablony SPA horkého ručníku sady Visual Studio 2012

Hot Towel je možné nainstalovat jako šablonu sady Visual Studio 2012. Stačí kliknout File | New Project a zvolit .ASP.NET MVC 4 Web Application Pak vyberte šablonu Hot Towel Single Page Application (Hot Towel Single Page Application) a spusťte příkaz!

Instalace prostřednictvím balíčku NuGet

Hot Towel je také balíček NuGet, který rozšiřuje existující prázdný projekt ASP.NET MVC. Stačí nainstalovat pomocí Nugetu a pak spustit!

Install-Package HotTowel

Jak můžu stavět na horkém ručníku?

Jednoduše začněte přidávat kód!

Přidejte vlastní kód na straně serveru, nejlépe Entity Framework a WebAPI (které opravdu září s Breeze.js)
Přidání zobrazení do App/views složky
Přidání modelů zobrazení do App/viewmodels složky
Přidání datových vazeb HTML a Knockout do nových zobrazení
Aktualizace navigačních tras v shell.js

Návod k HTML/JavaScriptu

Views/HotTowel/index.cshtml

index.cshtml je počáteční trasa a zobrazení aplikace MVC. Obsahuje všechny standardní metaznačky, odkazy css a odkazy javascriptu, které byste očekávali. Tělo obsahuje jeden <div> , do kterého se při vyžádání umístí veškerý obsah (vaše zobrazení). Použije @Scripts.Render Require.js ke spuštění vstupního bodu pro kód aplikace, který je obsažen v main.js souboru. Úvodní obrazovka ukazuje, jak vytvořit úvodní obrazovku při načítání aplikace.

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

Aplikace/main.js

Soubor main.js obsahuje kód, který se spustí, jakmile se aplikace načte. Tady chcete definovat navigační trasy, nastavit spouštěcí zobrazení a provádět jakékoli nastavení nebo spouštění, jako je například primární nastavení dat aplikace.

Soubor main.js definuje několik modulů durandalu, které pomáhají aplikaci spustit. Příkaz define pomáhá vyřešit závislosti modulů tak, aby byly dostupné pro funkci. Nejprve jsou povoleny zprávy ladění, které odesílají zprávy o událostech, které aplikace provádí, do okna konzoly. Kód app.start říká architektuře durandal, aby aplikaci spustila. Konvence jsou nastaveny tak, aby durandal věděl, že všechna zobrazení a modely zobrazení jsou obsaženy ve stejných pojmenovaných složkách v uvedeném pořadí. Nakonec kicks app.setRoot načte shell pomocí předdefinované entrance animace.

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

Zobrazení

Zobrazení se nacházejí ve App/views složce.

shell.html

Obsahuje shell.html hlavní rozložení pro html. Všechna ostatní zobrazení se skládají někde vedle zobrazení shell . Hot Towel má shell tři takové oblasti: záhlaví, oblast obsahu a zápatí. Každá z těchto oblastí je na vyžádání načtena obsahem z jiných zobrazení.

Vazby compose pro záhlaví a zápatí jsou pevně zakódovány v horkém ručníku nav , aby ukazovaly na zobrazení a footer v uvedeném pořadí. Vytvoření vazby pro oddíl #content je vázáno na router aktivní položku modulu. Jinými slovy, když kliknete na navigační odkaz, do této oblasti se načte odpovídající zobrazení.

<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

Obsahuje nav.html navigační odkazy pro SPA. Sem je možné umístit například strukturu nabídek. Často se jedná o vázaná data (pomocí knockoutu router ) na modul, aby se zobrazila navigace, kterou jste definovali v objektu shell.js. Knockout vyhledá atributy vazby dat a vytvoří jejich vazbu na shell model viewmodelu, aby se zobrazily navigační trasy, a aby se zobrazil indikátor průběhu (pomocí Twitter Bootstrap), pokud router je modul uprostřed přechodu z jednoho zobrazení do druhého (viz 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 a details.html

Tato zobrazení obsahují kód HTML pro vlastní zobrazení. Po kliknutí na homehome odkaz v nav nabídce zobrazení se zobrazení umístí do oblasti shell obsahu zobrazení. Tato zobrazení je možné rozšířit nebo nahradit vlastními zobrazeními.

footer.html

Obsahuje footer.html kód HTML, který se zobrazí v zápatí v dolní části shell zobrazení.

Modely zobrazení

ViewModels se nacházejí ve App/viewmodels složce.

shell.js

Viewmodel shell obsahuje vlastnosti a funkce, které jsou vázané na shell zobrazení. Často se zde nacházejí navigační vazby nabídek (viz logika 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 a details.js

Tyto modely zobrazení obsahují vlastnosti a funkce, které jsou vázané na home zobrazení. Obsahuje také logiku prezentace pro zobrazení a je připevnění mezi daty a zobrazením.

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

Služby

Služby se nacházejí ve složce Aplikace/služby. V ideálním případě by se daly umístit vaše budoucí služby, jako je modul datové služby, který je zodpovědný za získávání a odesílání vzdálených dat.

logger.js

Hot Towel poskytuje logger modul ve složce služeb. Modul logger je ideální pro protokolování zpráv pro konzolu a uživatele v automaticky otevíraných informačních zprávách.

Sdílet prostřednictvím