Поделиться через

Шаблон Hot Towel

  • Статья

Мэдс Кристенсен

Шаблон MVC "Горячее полотенце" написан Джоном Папа

Выберите версию для скачивания:

Шаблон MVC Hot Towel для Visual Studio 2012

Шаблон MVC Горячее полотенце для Visual Studio 2013

Горячее полотенце: Потому что вы не хотите идти в СПА без одного!

Хотите создать SPA, но не можете решить, с чего начать? Используйте горячее полотенце, и через несколько секунд вы получите SPA и все инструменты, необходимые для создания на нем!

Hot Towel создает отличную отправную точку для создания одностраничного приложения (SPA) с ASP.NET. В готовом виде она предоставляет модульную структуру для кода, навигацию по представлениям, привязку данных, расширенное управление данными и простой, но элегантный стиль. Горячее полотенце предоставляет все необходимое для создания SPA, поэтому вы можете сосредоточиться на своем приложении, а не на сантехнике.

Дополнительные сведения о создании SPA см. в видеороликах, руководствах и курсах Pluralsight Джона Папы.

Структура приложений

Spa Hot Towel предоставляет папку App, содержащую файлы JavaScript и HTML, определяющие приложение.

В папке App:

  • durandal
  • services;
  • Viewmodel
  • узел "Представления"

Папка App содержит коллекцию модулей. Эти модули инкапсулируют функциональные возможности и объявляют зависимости от других модулей. Папка views содержит HTML для приложения, а папка viewmodels содержит логику представления для представлений (общий шаблон MVVM). Папка служб идеально подходит для размещения общих служб, которые могут потребоваться приложению, например для получения данных HTTP или взаимодействия с локальным хранилищем. Код из модулей службы часто используется в нескольких модулях представления.

ASP.NET структура приложения на стороне сервера MVC

Горячее полотенце построено на знакомой и мощной ASP.NET MVC структуры.

  • App_Start
  • Содержимое
  • Контроллеры
  • Модели
  • Скрипты
  • Представления
  • ASP.NET MVC 3
  • ASP.NET Web API
  • ASP.NET веб-оптимизация — объединение и минификация
  • Breeze.js — расширенное управление данными
  • Durandal.js — структура навигации и представления
  • Knockout.js — привязки данных
  • Require.js — модульность с amd и оптимизацией
  • Toastr.js — всплывающие сообщения
  • Twitter Bootstrap — надежная стилизация CSS

Установка с помощью шаблона SPA-приложения "Горячее полотенце" в Visual Studio 2012

Горячее полотенце можно установить как шаблон Visual Studio 2012. Просто щелкните File | New Project и выберите ASP.NET MVC 4 Web Application. Затем выберите шаблон "Одностраничное приложение горячего полотенец" и запустите!

Установка с помощью пакета NuGet

Hot Towel также является пакетом NuGet, который дополняет существующий пустой ASP.NET проекта MVC. Просто установите с помощью NuGet, а затем запустите!

Install-Package HotTowel

Как построить на горячем полотенце?

Просто начните добавлять код!

  1. Добавьте собственный код на стороне сервера, желательно Entity Framework и WebAPI (которые действительно блистают Breeze.js).
  2. Добавление представлений в папку App/views
  3. Добавление модели представления в папку App/viewmodels
  4. Добавление привязок данных HTML и Knockout в новые представления
  5. Обновление маршрутов навигации в shell.js

Пошаговое руководство по HTML/JavaScript

Views/HotTowel/index.cshtml

index.cshtml — это начальный маршрут и представление для приложения MVC. Он содержит все стандартные метатеги, css-ссылки и ссылки JavaScript, которые вы ожидаете. Текст содержит один <div> объект , в который будет помещено все содержимое (ваши представления) при их запросе. Использует @Scripts.Render Require.js для запуска точки входа для кода приложения, который содержится в main.js файле . Предоставляется экран-заставка, демонстрирующий, как создать экран-заставку во время загрузки приложения.

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

Приложение/main.js

Файл main.js содержит код, который будет выполняться сразу после загрузки приложения. Здесь вы хотите определить маршруты навигации, настроить представления запуска и выполнить любую настройку или начальную загрузку, например подготовку данных приложения.

Файл main.js определяет несколько модулей durandal, которые помогут запустить приложение. Оператор define помогает разрешить зависимости модулей, чтобы они были доступны для функции. Сначала включены сообщения отладки, которые отправляют сообщения о событиях, выполняемых приложением, в окно консоли. Код app.start указывает durandal framework на запуск приложения. Соглашения задаются таким образом, чтобы durandal знал, что все представления и модели представления содержатся в одних и том же именованных папках соответственно. Наконец, app.setRoot удары загружают с shell помощью предопределенной анимации 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');
    });
});

Представления

Представления находятся в папке App/views .

shell.html

содержит shell.html макет master для HTML- кода. Все остальные представления будут составлены где-то в стороне вашего shell представления. Горячее полотенце предоставляет с shell тремя такими областями: верхний колонтитул, область содержимого и нижний колонтитул. Каждый из этих регионов загружается с содержимым из других представлений по запросу.

Привязки compose верхнего и нижнего колонтитулов жестко закодированы в Hot Towel, чтобы они указывали на nav представления и footer соответственно. Привязка compose для раздела #content привязана к активному router элементу модуля. Другими словами, при щелчке ссылки навигации в эту область загружается соответствующее представление.

<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 ссылки навигации для одностраничного приложения. Например, здесь можно разместить структуру меню. Часто это привязка данных (с помощью Knockout) к модулю router для отображения навигации, определенной shell.jsв . Knockout ищет атрибуты привязки данных и привязывает их к shell модели представления для отображения маршрутов навигации и отображения индикатора хода выполнения (с помощью начальной загрузки Twitter), если router модуль находится в середине перехода из одного представления в другое (см 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 и details.html

Эти представления содержат HTML для пользовательских представлений. home Если щелкнуть ссылку nav в меню представления, home представление будет помещено в область содержимого shell представления. Эти представления можно дополнить или заменить собственными пользовательскими представлениями.

footer.html

Содержит footer.html HTML-код, который отображается в нижнем колонтитуле в нижней shell части представления.

Модели представлений

ViewModels находятся в папке App/viewmodels .

shell.js

Модель shell представления содержит свойства и функции, привязанные к представлению shell . Часто именно здесь находятся привязки навигации меню (см. логику 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 и details.js

Эти модели представления содержат свойства и функции, привязанные к представлению home . он также содержит логику представления и является связуемой между данными и представлением.

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

Службы

Службы находятся в папке App/services. В идеале можно разместить будущие службы, такие как модуль dataservice, который отвечает за получение и публикацию удаленных данных.

logger.js

Горячее logger полотенце предоставляет модуль в папке служб. Модуль logger идеально подходит для ведения журнала сообщений в консоли и для пользователя во всплывающих всплывающих уведомлениях.