angularjs 和 ASP.NET MVC：客户端模型的最佳策略答案

【问题标题】：angularjs and ASP.NET MVC : best strategy for clientside modelsangularjs 和 ASP.NET MVC：客户端模型的最佳策略
【发布时间】：2013-04-13 15:04:33
【问题描述】：

我目前正在研究客户端模型绑定到 HTML 模板，尤其是使用 angularjs。我想知道从服务器检索客户端视图模型的最佳策略是什么，例如一个视图模型，不仅包含用于编辑的数据，还包含用于选择列表或下拉列表等的数据。

在我看来，有几种选择

使用例如从服务器检索一个视图模型web api，包含视图模型所需的所有数据
将客户端视图模型渲染到服务器端 html 中的 javascript
使用多个 Web api 调用检索视图模型的数据，例如，一个用于要编辑的主要数据，一个用于每个附加数据（选择列表）

我没有遇到很多选项 1 的示例，因为似乎 web api 主要用于返回一种对象的特定数据的 crud 操作，例如人或订单

选项 2 符合使用 asp.net mvc 的服务器端视图模型的做法，但我还没有看到很多将这种技术与 angularjs 结合使用的示例

如果考虑分离关注点，选项 3 看起来很干净，但具有多个较小的 ajax 请求的缺点。

您能分享一下您的想法和经验吗？

【问题讨论】：

标签： asp.net-mvc angularjs asp.net-web-api

【解决方案1】：

我同意圣。从来没有并且肯定使用过选项#3，我认为结合 $resource 和 Web API 将是一个完美的 RAD 组合。但是，我也曾在非常复杂的屏幕上工作过，我想要亚秒级的响应时间，所以我采取了优化整个开发“列”的方法——我使用 SQL Server 作为我的后端数据库进行开发，所以我使用了它对 XML 的本机支持从存储过程返回结构化 XML，然后我将其序列化为 .Net 模型 (POCO)，然后将其传递给 Json 序列化器以传输到浏览器。我可能需要针对 POCO 执行一些额外的业务处理，但这仍然会导致非常简单的代码结构来传输相当复杂的数据结构。通常它也非常快，因为我已经对数据库进行了一次调用，并且监视和优化一个存储过程非常简单。

【讨论】：

为什么不使用 Dapper 之类的东西来序列化到 POCO，并跳过 XML 步骤？我们正在将我们的 .Net 应用程序从 Backbone / homegrown JS 转换为带有 Web API 的 Angular 解决方案。听听您使用 Angular 的经验以及如何将其与 .Net 集成会很有趣

【解决方案2】：

就个人而言，我使用选项#3。该应用程序将请求“准备编辑器”，例如填充下拉列表，并请求获取您要编辑的数据（或者，如果您正在创建一个新对象，则为任何默认初始值）。我认为这比选项 1 更好地分离了关注点，选项 1 将“模型”数据和“支持”数据联系在一起。

但正如您所指出的，这确实会产生额外的调用，并且如果它们非常多，可能会显着减慢页面速度。（或增加复杂性；在具有大量依赖字段的大表单上，排序可能变得很重要）。

我通常做的是让服务器提供“组合”api（例如/editor/prepare-all），同时还提供小片段（例如/editor/prepare-dropdown-1、/editor/prepare-dropdown-2）。当您的编辑器加载时，您使用组合的；如果字段之间存在依赖关系，您可以只请求依赖字段的数据（例如/editor/prepare-dropdown-2?dropdown1-value=123）。我相信这对服务器的复杂性影响不大。

【讨论】：