14

TL;博士

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

语境

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

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

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

问题

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

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

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

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

4

2 回答 2

26

在使用 MVC 和另一个 JavaScript 框架（Knockout）时，我们处理了这个问题几个月。最终，如果您打算使用客户端 MV* 框架来呈现您的用户界面，您会发现大多数情况下放弃 Razor 将是您最好的选择。

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

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

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

于 2013-06-24T01:18:19.327 回答
5

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

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

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

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

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

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

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

于 2014-05-24T12:20:33.757 回答