将 MVC4 应用程序转换为“酷炫毛巾”单页应用程序（SPA）

• 下载“Cool Towel”SPA 项目模板 - 23,807 KB
• 使用该模板的演示网站：预算管理器

介绍 

本技巧介绍如何使网站导航速度与桌面应用程序一样快，并具有相同的外观和感觉，例如在 ASP.NET MVC4 互联网应用程序中，通过将其转换为“Cool Towel”单页应用程序 (SPA) 来实现。 这通过将每个互联网应用程序页面的 HTML5 代码放置在 SPA 项目模板的适当位置来完成，同时还将相应的 JavaScript 和控制器代码合并到此解决方案中。 Cool Towel：没有它，你别想用 SPA！

背景

SPA，也称为单页界面 (SPI)，是一种适合单个网页的 Web 应用程序或网站，旨在提供更流畅的用户体验，类似于桌面应用程序。 在 SPA 中，所有必要的代码——HTML、JavaScript 和 CSS——都在单次页面加载时检索。 在整个过程中，页面不会重新加载，也不会将控制权转移到另一个页面。

Using the Code

在 Visual Studio 2012 或更高版本中打开 SPA_Project_Template_01 解决方案。 将您的页面的 HTML5 代码复制/粘贴到 Index.cshtml 中的“XXXX HTML5 Here”占位符中，添加 JavaScript 文件、CSS 文件和控制器文件。 确保所有 JavaScript 和 CSS 文件都在 Index.cshtml 中引用。 

默认情况下，导航按钮具有点击事件 Knockout 数据绑定（HTML5 代码）

<div class="float-right">
    <nav>
        <ul id="menu1">
            <li>
                <input type="button" value="Home" data-bind="click: $root.divHome" /></li>
            <li>
                <input type="button" value="Manual" data-bind="click: $root.divManual" /></li>
            <li>
                <input type="button" value="Blog" data-bind="click: $root.divBlog" /></li>
            <li>
                <input type="button" value="Balance" data-bind="click: $root.divBalance" /></li>
            <li>
                <input type="button" value="Budget" data-bind="click: $root.divBudget" /></li>
            <li>
                <input type="button" value="About" data-bind="click: $root.divAbout" /></li>
            <li>
                <input type="button" value="Contact" data-bind="click: $root.divContact" /></li>
        </ul>
    </nav>
</div>

默认情况下，这些点击事件会触发 JQuery 打开和折叠占位符 <div>，如下所示（JavaScript 代码）

function appViewModel() {

    var self = this;

    self.divHome = function () {
        $("#divHome").show();
        $("#divManual").hide();
        $("#divBlog").hide();
        $("#divBalance").hide();
        $("#divBudget").hide();
        $("#divAbout").hide();
        $("#divContact").hide();
        $("#divTerms").hide();
        $("#divPrivacy").hide();
    }

关注点

根据 PageSpeed Chrome 插件，budget.satoconor.com 演示网站的导航大约需要 2 秒。现在在 SPA Index.cshtml 中，它就像在微秒内瞬间完成一样。 此外，当应用程序池和网站 IIS 处于活动状态时，整个 SPA 的启动时间仅翻倍，从大约 2 秒到 4 秒，与仅加载 MVC4 互联网应用程序的 HOME 页面相比。

历史

• 2014 年 1 月 25 日：初始版本