单页应用程序：使用 ASP.NET 构建响应迅速的现代 Web 应用程序

单页应用程序：使用 ASP.NET 构建响应迅速的现代 Web 应用程序2014-06-04 MSDN Mike Wasson单页应用程序（SPA）是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。

SPA 使用 AJAX 和 HTML5 创建流畅且响应迅速的 Web 应用程序，不会经常进行页面重载。但是，这意味着许多工作在客户端的 JavaScript 中进行。传统的 ASP.NET 开发人员可能难以适应这一巨变。幸运的是，可以借助许多开放源代码 JavaScript 框架来简化创建 SPA 的任务。

在本文中，我将演示如何创建一个简单的 SPA 应用程序。在此过程中，我将介绍一些构建 SPA 的基本概念，包括“模型-视图-控制器”（MVC）和“模型-视图-视图模型”（MVVM）模式、数据绑定和路由。

关于示例应用程序

我创建的示例应用程序是简单的电影数据库，如图 1 所示。页面最左列显示影片类型列表。单击某个类型可显示该类型的电影列表。单击某个条目旁的 Edit 按钮可以更改该条目。进行编辑之后，可以单击 Save 以将更新提交给服务器，或单击 Cancel 以撤销更改。

图 1. 单页应用程序电影数据库应用程序

我创建了两个不同版本的应用程序，一个版本使用 Knockout.js 库，另一个使用 Ember.js 库。这两个库具有不同的方法，因此将其进行比较具有指导意义。在两种情况下，客户端应用程序的 JavaScript 行数均少于 150。在服务器端，我使用 ASP.NET Web API 向客户端提供 JSON。您可以在 github.com/MikeWasson/MoviesSPA 上找到这两个应用程序版本的源代码。

（注意：我使用 Visual Studio 2013 的候选发布 [RC] 版本创建应用程序。某些内容可能与交付厂商 [RTM] 版本不同，但应该不会影响代码。）

背景

在传统 Web 应用程序中，每次应用程序调用服务器时，服务器都会呈现新的 HTML 页面。这会在浏览器中触发页面刷新。如果您曾经编写过 Web 窗体应用程序或 PHP 应用程序，那么此页面生命周期在您看来应该十分熟悉。

在 SPA 中，第一个页面加载之后，与服务器之间的所有交互都通过 AJAX 调用进行。这些 AJAX 调用通常以 JSON 格式返回数据（而不是标记）。应用程序使用 JSON 数据动态更新页面，而无需重载页面。 图 2 说明了两种方法之间的差异。

图 2 传统页面生命周期与 SPA 生命周期