Breeze/Knockout 模板

  • 项目

作者 ：Mads Kristensen

微风/敲门 MVC 模板由 Ward Bell 编写

下载 Breeze/Knockout MVC 模板

你听说过 SPA) (“单页应用程序”，想知道它是什么。 虽然你可以阅读它，你宁愿亲自体验它。 但谁有时间下载示例？ 如果拥有 Visual Studio，则使用 ASP.NET MVC 4“Breeze/Knockout 单页应用程序”模板在 60 秒内即可启动并运行示例 SPA。

什么是 Breeze/Knockout SPA 模板？

大多数项目模板都会生成应用程序框架。 通过添加代码，最终交付一个正常工作的应用程序，将肉放在这些骨头上。 Breeze/Knockout SPA 模板不同。 它生成一个示例应用程序供你学习。 它演示了 SPA 应用程序设计和许多用于生成 SPA 的技术。

Breeze/Knockout 模板是包含在 ASP.NET 和 Web 工具 2012.2 更新中的 KnockoutJS SPA 模板的变体。 Breeze SPA 模板生成具有相同用户体验的应用程序，但它具有不同的实现，使用 Breeze 进行数据管理。

KnockoutJS SPA 模板使用原始 jQuery AJAX 发出服务请求，这足以满足简单应用程序的需求。 但更复杂的应用具有更严格的数据管理要求。 例如，大多数应用程序：

  • 在扩展用户会话期间查询和重新查询服务器。
  • 添加查询筛选器、排序和分页。
  • 跨多个屏幕共享相同的数据。
  • 累积对多个对象的更改，然后将其保存为单个事务。
  • 验证客户端上的更改，以便用户可以在将更改提交到数据库之前更正错误。

BreezeJS 库可处理这些杂务，使你能够开发最重要的应用程序逻辑和用户体验。

Breeze 是一个开放源代码库，用于在 JavaScript 和 HTML 中生成丰富的数据应用程序，这些应用程序历来以独立桌面应用程序的形式交付。

Breeze/Knockout 模板可帮助你迈出朝着更可靠的数据管理基础结构迈出第一个关键步骤。 它生成与 KnockoutJS SPA 模板相同的示例 Todo 应用程序。 在内部，它将 AJAX 数据层替换为 Breeze，因此你可以并行比较这两种方法。 当然，它几乎没有触及 Breeze 应用程序的潜力。 但你会看到 Breeze 的工作原理，以及进行这种转换所需的很少。

现在就开始吧。

创建 Breeze/敲除模板项目

单击上面的“下载”按钮，下载并安装模板。 模板打包为 Visual Studio 扩展 (VSIX) 文件。 可能需要重启 Visual Studio。

在“ 模板 ”窗格中，选择“ 已安装的模板 ”，然后展开 “Visual C# ”节点。 在 “Visual C#”下，选择“ Web”。 在项目模板列表中，选择 “ASP.NET MVC 4 Web 应用程序”。 给该项目命名，然后单击“确定”。

在 “新建项目 ”向导中，选择“ Breeze Knockout SPA”。

按 Ctrl-F5 在不调试的情况下生成并运行应用程序，或按 F5 以通过调试运行。

应用程序首次运行时，会显示登录屏幕。 单击“注册”链接，新页面将滑入视图，可在其中输入用户名和密码。 (登录和注册页面是使用 ASP.NET MVC.) 提交注册表单时，服务器会为帐户生成包含两项的 TodoList。 然后，它会用黄色纸条呈现给你。

现在你在 SPA 的土地上。 操作 Todos 时看到和体验的所有内容都借助 Knockout 和 Breeze 在客户端上呈现和管理。 以用户身份浏览应用... 但与开发人员的眼睛。 使用浏览器中的开发人员工具捕获网络流量。 (在 Internet Explorer 中：按 F12，选择“ 网络 ”选项卡，然后单击“ 开始捕获”。) 现在请尝试以下操作：

  • 添加新的 Todo 项。
  • 单击标签并编辑“Todo”项标题
  • 选中一个复选框以将项目标记为已完成。 请注意，文本框已禁用，因此标题不再可编辑。
  • 单击标签右侧的“x”。 该项将消失，并从数据库中删除。
  • 选取另一项并清除其标题。 你将收到一个验证错误，指出游戏是必需的。 短暂暂停后，将还原上一个游戏。
  • 键入一个可笑的长标题。 你将收到不同的验证错误，即游戏太长。
  • 单击“添加 Todo List”按钮。 上一个列表的左侧将显示一个新列表。
  • 使用 TodoList 游戏，触发其所需的和长度验证。
  • 单击标题文本框中以清除错误消息。
  • 单击右上角圆圈中的“x”可删除 TodoList 及其待办事项。

验证逻辑由 Breeze 在客户端执行。 服务器模型类上的验证属性将传播到客户端，并在客户端与服务器联系之前自动执行。

查看网络流量。 请注意，当 Breeze 检测到错误时，没有调用服务器。 每个有效更改都会导致对“/api/Todo/SaveChanges”发出 POST 请求。 Breeze 将更改捆绑在一起，并将其作为单个请求发送到 Web API 控制器的方法 SaveChanges 。 这与 KnockoutJS SPA 模板不同，后者分别为每个项发出 PUT、POST 和 DELETE 请求。

查看内部

此应用程序具有客户端和服务器端。 客户端堆栈由一个小 HTML 和“应用”文件夹中 (的应用程序 JavaScript 模块) 以及“Scripts”文件夹中 (的第三方 JavaScript 库) 组成。

如果已调查 KnockoutJS SPA 模板，这看起来应该非常熟悉。 将焦点放在蓝色框上。 UI 体系结构是 Model-View-ViewModel (MVVM) ，其中视图的 HTML 小组件与视图模型中的支持演示代码完全分离。 在这种情况下，数据绑定系统 (敲除) 协调视图和视图模型，以便每个人都可以在不了解另一个视图的情况下完成其工作。

模型封装了 Todo 数据。 模型中的实体由 Breeze 构造，具有 Knockout 可观测属性，因此可以直接绑定到视图中的小组件。 视图模型要求数据上下文获取并保存模型实体。 数据上下文将大部分工作委托给 Breeze。

服务器端堆栈由一些开发人员代码和三个主体 .NET 库组成：Web API、实体框架和 Breeze.NET。

基本体系结构与 KnockoutJS SPA 模板相同。 但是，实现要简单得多：DTO 已删除，并且大部分实体框架详细信息已委托给 Breeze.NET。

后续步骤

我们建议你浏览代码，在微风网站上的客户端和服务器堆栈的广泛讨论的指导下。

可以尝试使用 Breeze 客户端查询;添加一些筛选器和排序。 可以添加更多模型属性和更多实体，以便更好地体验端到端 SPA 开发。 当你对设计有信心时，可以拆解 Todo 功能并将其替换为你自己的功能。

很快，你将为下一个大步骤做好准备：添加客户端屏幕并在其中导航。 您将离开这个 SPA 模板，并转向更完整的 SPA 堆栈，如 约翰爸爸的热毛巾，将杜兰达尔添加到微风和敲门混合。