Razor 模板、视图和 angular.js

Question

TL;DR

使用 .NET Razor 视图和 AngularJS 时的最佳实践是什么？

上下文

我们正在使用mvc4 和razor 开发一个公共网站（不是Intranet 应用程序），我们对客户端脚本不是很熟悉，所以我们从我们知道的东西开始：jQuery。 但是现在事情变得越来越复杂，我们想切换到 AngularJS。

在 .NET 部分，我们使用 Razor 模板和 UIHintAttribute（以及一些自定义模板）来呈现正确的 html“控件”。我们还添加了自定义 html 属性以向 jQuery 部分提供额外信息（例如 title 用于工具提示......）

所以我们已经使用声明方式来设置用户界面行为，这就是为什么 AngularJS 似乎是一个不错的选择。

问题

既然我们已经在服务器端定义了模型，而且 AngularJS 也使用模型，那不会强迫我们重复代码吗？

我们如何处理数据绑定功能，因为我们已经做了一些绑定服务器端（在视图中）。我们应该创建一个完全异步的应用程序，从 AngularJS 调用 AJAX 来加载数据，还是可以混合使用两者？

在尝试使用这两种技术时，我们还应该注意什么？

我在 Google 上做了一些研究，但找不到将 Razor 视图和模板与 AngularJS 混合的详细方法……也许这不是一件好事？

Answer 1

我们编写了自己的数据绑定机制，将 angular.js 模型与服务器端的视图模型同步。 javascript 模型是从服务器端视图模型的 JSON 序列化生成的，以避免您所说的重复代码。

我们正在使用 SignalR 从服务器更新客户端的视图模型。

C# 视图模型属性的

服务器端更改作为包含属性路径的数据包发送到客户端，例如Persons[42].Address.City，以及值本身，例如纽约。视图模型继承了一个负责生成属性路径的基类，因此实际的视图模型看起来很干净，我们可以专注于业务逻辑。

javascript 视图模型属性的

客户端更改以相同的方式发送到服务器。为了捕捉更改事件，我们将原始 javascript 模型的所有字段封装在 get/set 属性中，setter 将更新数据包发送到服务器。

视图模型的

服务器端方法可以以类似的方式调用。视图模型中的所有对象都有一个 invokeMethod 函数，可以像这样使用：Products[42].Manufacturer.invokeMethod('SendEmail', 'mailsubject', 'mailbody')。这将向服务器发送一个数据包，其中包含方法路径 Products[42].Manufacturer.SendEmail 和 ['mailsubject','mailbody'] 数组形式的参数.

总之，html 视图（类似于）绑定到服务器端的视图模型，其他系统（例如常规 Razor 视图）可以在相同的对象上工作。

源代码可以在这里找到：SharpAngie。

Answer 2

在使用 MVC 和另一个 JavaScript 框架 (Knockout) 时，我们处理了这个问题几个月。最终，如果您打算使用客户端 MV* 框架来呈现您的用户界面，您会发现最好放弃 Razor。

大多数主要的 MV* JavaScript 框架，包括 AngularJS，都假设您将维护 UI 状态并基于 JavaScript 模型或视图模型呈现您的用户界面。尝试在服务器端渲染中混合使用不会很好。

这并不是说在开发 Angular 应用程序时 MVC 没有用处。您仍然可以利用一些强大的功能，例如 ASP.NET Bundling and Minification。有时使用 Razor 视图或部分视图将 JSON 直接嵌入到页面中效果非常好，而不是进行额外的 AJAX 调用。

至于型号，你可能想看看Breeze.js。它是一个用于数据访问的 JavaScript 库，非常适合在服务器端与 ASP.NET 一起共享模型元数据。