Compartilhar via

Modelo Hot Towel

  • Artigo

por Mads Kristensen

The Hot Towel MVC Template é escrito por John Papa

Escolha qual versão baixar:

Modelo MVC de Toalha Quente para Visual Studio 2012

Modelo de MVC de toalha quente para Visual Studio 2013

Toalha Quente: Porque você não quer ir para o SPA sem um!

Deseja criar um SPA, mas não pode decidir por onde começar? Use a Toalha Quente e, em segundos, você terá um SPA e todas as ferramentas necessárias para criá-la!

O Hot Towel cria um ótimo ponto de partida para a criação de um SPA (Aplicativo de Página Única) com ASP.NET. Pronto para uso, você fornece uma estrutura modular para seu código, navegação de exibição, associação de dados, gerenciamento de dados avançado e estilo simples, mas elegante. A Toalha Quente fornece tudo o que você precisa para criar um SPA, para que você possa se concentrar em seu aplicativo, não no encanamento.

Saiba mais sobre como criar um SPA com base nos vídeos, tutoriais e cursos do Pluralsight de John Papa.

Estrutura de Aplicativos

O HOT Towel SPA fornece uma pasta de aplicativo que contém os arquivos JavaScript e HTML que definem seu aplicativo.

Dentro da pasta Aplicativo:

  • Durandal
  • services
  • Viewmodels
  • Modos de exibição

A pasta Aplicativo contém uma coleção de módulos. Esses módulos encapsulam a funcionalidade e declaram dependências em outros módulos. A pasta views contém o HTML para seu aplicativo e a pasta viewmodels contém a lógica de apresentação para as exibições (um padrão MVVM comum). A pasta de serviços é ideal para abrigar quaisquer serviços comuns que seu aplicativo possa precisar, como recuperação de dados HTTP ou interação de armazenamento local. É comum que vários viewmodels reutilizem o código dos módulos de serviço.

estrutura de aplicativos do lado do servidor do ASP.NET MVC

A Toalha Quente se baseia na estrutura familiar e poderosa ASP.NET MVC.

  • App_Start
  • Conteúdo
  • Controladores
  • Modelos
  • Scripts
  • Exibições
  • ASP.NET MVC
  • ASP.NET Web API
  • Otimização da Web ASP.NET – agrupamento e minificação
  • Breeze.js – gerenciamento de dados avançado
  • Durandal.js – navegação e Composição de exibição
  • Knockout.js – associações de dados
  • Require.js - Modularidade com AMD e otimização
  • Toastr.js - mensagens pop-up
  • Bootstrap do Twitter - estilo CSS robusto

Instalação por meio do Modelo de SPA de Toalha Quente do Visual Studio 2012

O Hot Towel pode ser instalado como um modelo do Visual Studio 2012. Basta clicar File | New Project e escolher ASP.NET MVC 4 Web Application. Em seguida, selecione o modelo "Aplicativo de Página Única de Toalha Quente" e execute!

Instalando por meio do Pacote NuGet

O Hot Towel também é um pacote NuGet que aumenta um projeto de MVC ASP.NET vazio existente. Basta instalar usando o Nuget e, em seguida, executar!

Install-Package HotTowel

Como faço para criar uma toalha quente?

Basta começar a adicionar código!

  1. Adicione seu próprio código do lado do servidor, preferencialmente Entity Framework e WebAPI (que realmente brilham com Breeze.js)
  2. Adicionar exibições à App/views pasta
  3. Adicionar viewmodels à App/viewmodels pasta
  4. Adicionar associações de dados HTML e Knockout aos seus novos modos de exibição
  5. Atualizar as rotas de navegação em shell.js

Passo a passo do HTML/JavaScript

Views/HotTowel/index.cshtml

index.cshtml é a rota inicial e a exibição do aplicativo MVC. Ele contém todas as meta tags padrão, links css e referências javaScript que você esperaria. O corpo contém um único <div> que é onde todo o conteúdo (seus modos de exibição) será colocado quando eles forem solicitados. O @Scripts.Render usa Require.js para executar o ponto de entrada do código do aplicativo, que está contido no main.js arquivo. Uma tela inicial é fornecida para demonstrar como criar uma tela inicial enquanto o aplicativo é carregado.

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

Aplicativo/main.js

O main.js arquivo contém o código que será executado assim que o aplicativo for carregado. É aqui que você deseja definir suas rotas de navegação, definir suas exibições de inicialização e executar qualquer configuração/inicialização, como preparar os dados do aplicativo.

O main.js arquivo define vários módulos do durandal para ajudar o aplicativo a iniciar. A instrução define ajuda a resolve as dependências dos módulos para que eles estejam disponíveis para a função. Primeiro, as mensagens de depuração são habilitadas, que enviam mensagens sobre quais eventos o aplicativo está executando para a janela do console. O código app.start informa a estrutura durandal para iniciar o aplicativo. As convenções são definidas para que durandal saiba que todos os modos de exibição e viewmodels estão contidos nas mesmas pastas nomeadas, respectivamente. Por fim, o app.setRoot kicks carrega o shell usando uma animação predefinida 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');
    });
});

Exibições

As exibições são encontradas na App/views pasta .

shell.html

O shell.html contém o layout de master para o HTML. Todas as outras exibições serão compostas em algum lugar ao lado da sua shell exibição. A Toalha Quente fornece um shell com três dessas regiões: um cabeçalho, uma área de conteúdo e um rodapé. Cada uma dessas regiões é carregada com conteúdo forma outros modos de exibição quando solicitado.

As compose associações para o cabeçalho e o rodapé são codificadas em Toalha Quente para apontar para as nav exibições e footer , respectivamente. A associação de composição para a seção #content está associada ao router item ativo do módulo. Em outras palavras, quando você clica em um link de navegação, seu modo de exibição correspondente é carregado nessa área.

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

O nav.html contém os links de navegação para o SPA. É aí que a estrutura do menu pode ser colocada, por exemplo. Geralmente, isso é associado a dados (usando Knockout) ao router módulo para exibir a navegação que você definiu no shell.js. O Knockout procura os atributos de associação de dados e os associa ao shell viewmodel para exibir as rotas de navegação e mostrar uma barra de progresso (usando o Twitter Bootstrap) se o router módulo estiver no meio da navegação de uma exibição para outra (consulte 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

Essas exibições contêm HTML para exibições personalizadas. Quando o home link no nav menu do modo de exibição for clicado, o home modo de exibição será colocado na área de conteúdo do shell modo de exibição. Essas exibições podem ser aumentadas ou substituídas por suas próprias exibições personalizadas.

footer.html

O footer.html contém HTML que aparece no rodapé, na parte inferior da exibição shell .

ViewModels

ViewModels são encontrados na App/viewmodels pasta .

shell.js

O shell viewmodel contém propriedades e funções associadas à exibição shell . Geralmente, é aqui que as associações de navegação do menu são encontradas (consulte a router.mapNav lógica).

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

Esses viewmodels contêm as propriedades e funções associadas à exibição home . ele também contém a lógica de apresentação para a exibição e é a cola entre os dados e a exibição.

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

Serviços

Os serviços são encontrados na pasta Aplicativo/serviços. O ideal é que seus serviços futuros, como um módulo de serviço de dados, responsável por obter e postar dados remotos, possam ser colocados.

logger.js

A Toalha Quente fornece um logger módulo na pasta de serviços. O logger módulo é ideal para registrar mensagens em log no console e para o usuário em notificação pop-up.