剃刀模板,视图和angular.js

Question

TL; DR

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

上下文

我们正在使用带有razor的mvc4 开发一个公共网站(不是内部网应用程序),我们对客户端脚本不是很熟悉,所以我们从我们所知道的开始:jQuery.但现在事情变得越来越复杂,我们想切换到AngularJS.

在.NET部分,我们使用Razor模板和UIHintAttribute(加上一些自定义模板)来呈现正确的html"控件".我们还添加了自定义html属性,以便为jQuery部分提供额外信息(例如title工具提示....)

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

问题

既然我们已经有模型定义服务器端,并且由于AngularJS也使用模型,它不会强迫我们重复代码吗？

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

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

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

Answer 1

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

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

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

至于模型,你可能想看看Breeze.js.它是一个用于数据访问的JavaScript库,与服务器端的ASP.NET配合使用,可以共享模型元数据.

Answer 2

我们编写了自己的数据绑定机制,将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.