Udostępnij za pośrednictwem

Szablon Hot Towel

  • Artykuł

Autor: Mads Kristensen

Szablon Hot Towel MVC został napisany przez Johna Papa

Wybierz wersję do pobrania:

Szablon Hot Towel MVC dla programu Visual Studio 2012

Szablon HOT Towel MVC dla Visual Studio 2013

Gorący ręcznik: Bo nie chcesz iść do SPA bez jednego!

Chcesz zbudować SPA, ale nie może zdecydować, gdzie zacząć? Użyj gorącego ręcznika i w sekundach będziesz mieć SPA i wszystkie narzędzia, które trzeba na nim zbudować!

Hot Ręcznik tworzy doskonały punkt wyjścia do tworzenia aplikacji jednostronicowej (SPA) z ASP.NET. Poza polem zapewnia modułową strukturę kodu, nawigację widoków, powiązanie danych, zaawansowane zarządzanie danymi i proste, ale eleganckie style. Hot Ręcznik zapewnia wszystko, czego potrzebujesz, aby zbudować SPA, więc możesz skupić się na aplikacji, a nie hydrauliku.

Dowiedz się więcej o tworzeniu SPA z filmów Johna Papa, samouczków i kursów Pluralsight.

Struktura aplikacji

Hot Towel SPA udostępnia folder Aplikacji zawierający pliki JavaScript i HTML definiujące aplikację.

Wewnątrz folderu Aplikacja:

  • durandal
  • services
  • viewmodels
  • widoki

Folder App zawiera kolekcję modułów. Te moduły hermetyzują funkcje i deklarują zależności od innych modułów. Folder views zawiera kod HTML aplikacji, a folder viewmodels zawiera logikę prezentacji dla widoków (typowy wzorzec MVVM). Folder usług jest idealny do obsługi wszystkich typowych usług, których aplikacja może potrzebować, takich jak pobieranie danych HTTP lub interakcja z magazynem lokalnym. Często zdarza się, że wiele modelów widoków używa ponownie kodu z modułów usługi.

ASP.NET struktura aplikacji po stronie serwera MVC

Hot Ręcznik opiera się na znanej i potężnej strukturze MVC ASP.NET.

  • App_Start
  • Zawartość
  • Kontrolery
  • Modele
  • Skrypty
  • Widoki
  • ASP.NET MVC
  • ASP.NET Web API
  • ASP.NET Optymalizacja sieci Web — łączenie i minimalizowanie
  • Breeze.js — zaawansowane zarządzanie danymi
  • Durandal.js — nawigacja i wyświetlanie kompozycji
  • Knockout.js — powiązania danych
  • Require.js — modułowość z procesorem AMD i optymalizacją
  • Toastr.js — wyskakujące komunikaty
  • Twitter Bootstrap — niezawodny styl CSS

Instalowanie za pośrednictwem szablonu Spa Hot Towel programu Visual Studio 2012

Gorący ręcznik można zainstalować jako szablon programu Visual Studio 2012. Wystarczy kliknąć File | New Project i wybrać pozycję ASP.NET MVC 4 Web Application. Następnie wybierz szablon "Aplikacja jednostronicowa gorącego ręcznika" i uruchom polecenie!

Instalowanie za pośrednictwem pakietu NuGet

Hot Towel to również pakiet NuGet, który rozszerza istniejący pusty projekt MVC ASP.NET. Wystarczy zainstalować przy użyciu narzędzia Nuget, a następnie uruchomić!

Install-Package HotTowel

Jak budować na gorący ręcznik?

Po prostu zacznij dodawać kod!

  1. Dodaj własny kod po stronie serwera, najlepiej Entity Framework i WebAPI (który naprawdę świeci Breeze.js)
  2. Dodawanie widoków do App/views folderu
  3. Dodawanie modelu viewmodels do App/viewmodels folderu
  4. Dodawanie powiązań danych HTML i Knockout do nowych widoków
  5. Aktualizowanie tras nawigacji w programie shell.js

Przewodnik po kodzie HTML/JavaScript

Views/HotTowel/index.cshtml

index.cshtml to trasa początkowa i widok aplikacji MVC. Zawiera on wszystkie standardowe tagi meta, linki css i odwołania do języka JavaScript, których można oczekiwać. Treść zawiera pojedynczy element <div> , który jest miejscem, w którym zostanie umieszczona cała zawartość (twoje widoki) podczas ich żądania. Używa @Scripts.Render Require.js do uruchomienia punktu wejścia dla kodu aplikacji, który znajduje się w main.js pliku. Zostanie wyświetlony ekran powitalny, który pokazuje, jak utworzyć ekran powitalny podczas ładowania aplikacji.

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

Aplikacja/main.js

Plik main.js zawiera kod, który zostanie uruchomiony zaraz po załadowaniu aplikacji. Jest to miejsce, w którym chcesz zdefiniować trasy nawigacji, skonfigurować widoki uruchamiania i wykonać dowolną konfigurację/uruchamianie aplikacji, takie jak tworzenie danych aplikacji.

Plik main.js definiuje kilka modułów durandal, aby ułatwić rozpoczęcie uruchamiania aplikacji. Instrukcja define ułatwia rozwiązywanie zależności modułów, dzięki czemu są one dostępne dla funkcji. Najpierw włączono komunikaty debugowania, które wysyłają komunikaty o zdarzeniach wykonywanych przez aplikację w oknie konsoli. Kod app.start informuje platformę durandal o uruchomieniu aplikacji. Konwencje są ustawione tak, aby durandal wiedział wszystkie widoki i modele widoków znajdują się odpowiednio w tych samych nazwach folderów. app.setRoot Na koniec kopie ładuje shell przy użyciu wstępnie zdefiniowanej entrance animacji.

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

Widoki

Widoki znajdują się w folderze App/views .

shell.html

Element shell.html zawiera układ główny kodu HTML. Wszystkie inne widoki będą komponowane gdzieś po stronie widoku shell . Hot Ręcznik zapewnia shell trzy takie regiony: nagłówek, obszar zawartości i stopkę. Każdy z tych regionów jest ładowany z zawartością w postaci innych widoków po żądaniu.

Powiązania compose nagłówka i stopki są zakodowane w gorącym ręczniku, aby wskazać nav odpowiednio widoki i footer . Powiązanie tworzenia sekcji #content jest powiązane z aktywnym elementem modułu router . Innymi słowy, po kliknięciu linku nawigacji odpowiedni widok zostanie załadowany w tym obszarze.

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

Zawiera nav.html linki nawigacyjne dla SPA. Jest to miejsce, w którym można umieścić strukturę menu, na przykład. Często są to dane powiązane (przy użyciu aplikacji Knockout) do modułu router w celu wyświetlenia nawigacji zdefiniowanej w elemecie shell.js. Knockout wyszukuje atrybuty powiązania danych i wiąże je shell z modelem widoku, aby wyświetlić trasy nawigacji i pokazać pasek postępu (przy użyciu narzędzia Twitter Bootstrap), jeśli router moduł znajduje się w środku nawigowania z jednego widoku do innego (zobacz 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 i details.html

Te widoki zawierają kod HTML dla widoków niestandardowych. home Po kliknięciu home linku nav w menu widoku widok widok zostanie umieszczony w obszarze shell zawartości widoku. Te widoki można rozszerzyć lub zastąpić własnymi widokami niestandardowymi.

footer.html

Zawiera footer.html kod HTML wyświetlany w stopce w dolnej części shell widoku.

ViewModels

Modele widoku znajdują się w folderze App/viewmodels .

shell.js

Model shell widoku zawiera właściwości i funkcje powiązane z shell widokiem. Często w tym miejscu znajdują się powiązania nawigacji menu (zobacz 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 i details.js

Te modele widoków zawierają właściwości i funkcje powiązane z home widokiem. Zawiera również logikę prezentacji dla widoku i jest klejem między danymi a widokiem.

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

Usługi

Usługi znajdują się w folderze App/services. W idealnym przypadku można umieścić przyszłe usługi, takie jak moduł usługi danych, odpowiedzialny za pobieranie i delegowanie danych zdalnych.

logger.js

Hot Towel udostępnia logger moduł w folderze usług. Moduł logger jest idealny do rejestrowania komunikatów w konsoli programu i użytkownika w wyskakujących wyskakujących okienkach.