使用 Hot Towel 模板创建单页应用程序
4.85/5 (15投票s)
本文介绍如何使用 Hot Towel 模板创建单页应用程序。
引言
单页应用程序 (SPA) 是一种丰富的、响应式的 Web 应用程序，它加载单个 HTML 页面，并在用户与应用程序交互时动态更新该页面。
此代码示例提供了使用 Hot Towel SPA 模板（Knockout, Durandal, Breeze）创建单页应用程序的演示应用程序。
此应用程序将有助于在一定程度上理解单页应用程序的基础知识。如果您跟着操作并创建自己的应用程序，将获得 SPA 的宝贵经验。
背景
请了解 Durandal, Knockout 和 Breeze 的基础知识，以便更深入地理解以下步骤。
Durandal
Durandal 是一个小型的 JavaScript 框架，旨在使构建单页应用程序 (SPA) 变得简单而优雅。
Knockout
Knockout 是一个 JavaScript 库，可帮助您创建丰富的、响应式的显示和编辑器用户界面，并具有简洁的底层数据模型。
Breeze 是一个 JavaScript 库，可帮助您在富客户端应用程序中管理数据。它在数据库中存储和检索数据、执行查询等。
Hot Towel 模板
Hot Towel 为使用 ASP.NET 构建单页应用程序 (SPA) 提供了一个很好的起点。它为您的代码、视图导航、数据绑定、丰富的 data management 和简单而优雅的 styling 提供了模块化结构。
开放数据协议
开放数据协议 (OData) 的目的是提供一种基于 REST 的协议，用于对作为数据服务公开的资源执行 CRUD 风格的操作（创建、读取、更新和删除）。
先决条件
要在开发计算机上运行此示例，计算机应安装 Visual Studio 2012 或更高版本以及带有 Hot Towel Template 的 MVC 4。如果您对 MVVM 模式有基本了解，将有助于更好地理解 Hot Towel SPA。
描述
此代码示例逐步描述了使用 MVC 4 - Hot Towel 单页应用程序模板创建我的联系人项目。
我将逐步介绍使用 MVC 4 Hot Towel SPA 创建我的联系人项目的过程，并在源代码中添加了行内注释以便更好地理解代码。在此网页中，我将重点介绍创建此应用程序的步骤。
步骤 1：使用 MVC 4 -> Hot Towel SPA 创建我的联系人项目。
步骤 2：创建数据库和表。
在 App_Data 文件夹下创建数据库，请参阅下图创建数据库。
App_Data -> 添加 -> 新建项 -> SQL Server Compact 4.0 本地数据库。
可以是任何数据库，但必须在 web.config 文件中指定相应的连接字符串。
我将使用 SQL Server Compact 4.0 本地数据库。
双击 MyContact.sdf 文件，创建一个包含 Id、Name、Mobile、Email 列的表，请参阅下图。
将连接字符串信息添加到 web.config 文件。
<connectionStrings>
<add name="MyContactDB" connectionString="Data Source=|DataDirectory|MyContact.sdf" providerName="System.Data.SqlServerCe.4.0" />
</connectionStrings>
步骤 3：创建 Model 和 DataContext 类
在 Models 文件夹下创建 Contact 模型类 Contact.cs 和 datacontext 类 MyContactDbcontext.cs。
Contact.cs
public class Contact
{
public int Id { get; set; }
[Required, MaxLength(100)]
public string Name { get; set; }
[Required]
[RegularExpression(@"\(?\d{3}\)?-? *\d{3}-? *-?\d{4}",
ErrorMessage = "Invalid mobile")]
public string Mobile { get; set; }
[RegularExpression(
@"^\w+[\w-\.]*\@\w+((-\w+)|(\w*))\.[a-z]{2,3}$",
ErrorMessage = "Invalid email")]
public string Email { get; set; }
} MyContactDbContext.cs
public class MyContactDBContext : DbContext
{
//WebConfig-Connection string name has to mention here for connecting the database.
public MyContactDBContext()
: base(nameOrConnectionString: "MyContactDB")
{
}
protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
Database.SetInitializer<MyContactDBContext>(null);
}
public DbSet<Contact> Contacts { get; set; }
} 步骤 4：用于 Breeze 框架与数据库通信的 Web API 类 BreezeController.cs (ApiController) 在 Controller 文件夹下。
BreezeController.cs
[BreezeController]
public class BreezeController : ApiController
{
readonly EFContextProvider<MyContactDBContext> _contextProvider =
new EFContextProvider<MyContactDBContext>();
[HttpGet]
public string Metadata()
{
//assemblyref://System.Web.Http.OData
//OData reference has to add for Breeze connection with database for getting metadata.
//This reference will not come with this template - it can be download from online,
//also this code sample package is having this assembly dll.
return _contextProvider.Metadata();
}
[HttpGet]
public IQueryable<Contact> Contacts()
{
return _contextProvider.Context.Contacts;
}
[HttpPost]
public SaveResult SaveChanges(JObject saveBundle)
{
return _contextProvider.SaveChanges(saveBundle);
}
} 必须添加 System.web.Http.OData 引用才能使用 Breeze 获取元数据。
到目前为止，我们已经创建了数据库和 Web API 以供 Breeze 与数据库通信。在进入下一部分之前，请先了解 Durandal、Knockout 和 Breeze 的基础知识。
客户端代码
Hot Towel SPA 客户端代码使用 MVVM 模式构建，客户端 html/java script 文件充当 Model、View 和 ViewModel 类。下面我们来看看客户端代码。
所有客户端代码都位于 My Contact 项目的 App 文件夹下。它有三个文件夹
services (model) -> 包含模型、datacontext、log 和 Breeze.partial-entities 的 java script 文件。
viewmodels -> 包含 java script 文件，这些文件充当 html 视图文件的 viewmodel 类。
view -> 包含 html 文件，主要是视图（UI）文件。
从这里我开始提及文件名，这些文件需要从下载的源代码中复制。源代码在必要时有行内注释。
步骤 5：引导程序和配置文件
main.js 文件充当 bootstrapper，而 config.js（需要创建或从源代码复制）包含配置信息，如 remoteServicName。
步骤 6：在 services 文件夹中创建文件（从源代码复制文件）- MODEL
model.js 文件有助于使用 Breeze 元数据文件同步表列。
将 breeze.partial-entities.js 放在 App->services 文件夹下，模板有时不会创建此文件，或者我在这里遗漏了什么。但这是解决方法。
datacontext.js 文件负责通过 Breeze API Controller 获取数据，添加/更新数据，Breeze 框架将处理所有服务调用。
步骤 7：在 view 文件夹中创建 html 文件（从源代码复制文件）- VIEW
contacts.html -> 列出从数据库中提取的所有可用联系人，knockout 框架有助于从 viewmodel 到 view 进行数据绑定。
同样，contactadd.html 和 contactedit.html 分别用于添加和编辑。
步骤 8：在 viewmodel 文件夹中创建 java script 文件（从源代码复制文件）- VIEWMODEL
通常，viewmodel 文件包含属性、方法和可以由视图调用的命令。
注意：视图和 viewmodel 的命名约定应相同，这样 durandal 才能理解视图及其对应的 viewmodel 文件。
contacts.js -> contacts 属性包含联系人列表以及其他用于按姓名搜索的属性/命令。
contactadd.js/contactedit.js - 执行添加/编辑属性和命令。为了便于理解，添加/编辑文件创建了两个单独的视图，也有助于它们之间独立导航。
步骤 9：更新路由以导航到联系人、联系人添加视图。
shell.js (App->viewmodels)，必须更新下面的代码以在菜单列表中显示联系人、添加项。
步骤 10：构建和运行
完成以上所有步骤后，在所有 .cs 文件中添加所需的命名空间，然后构建和运行应用程序。它将重定向到联系人列表页面。点击“添加”菜单，然后添加一些联系人信息并点击“保存”。然后您将在联系人视图中看到新添加的记录。
结论
希望本文能帮助您理解 MVC 4 Hot Towel SPA 并能够创建您自己的我的联系人项目。请随时提出宝贵的评论、建议和疑问。感谢 John Papa 的 Hot Towel 模板。
您可以使用 Fiddler Web Debugger 工具来分析 Breeze 框架发出的 OData 请求。
参考