asp.net MVC 与 MVVM 通过 Knockout，将模型传递给 javascript答案

【问题标题】：asp.net MVC with MVVM via Knockout, pass model to javascriptasp.net MVC 与 MVVM 通过 Knockout，将模型传递给 javascript
【发布时间】：2012-04-21 20:12:51
【问题描述】：

我正在编写一个 MVC 应用程序，我决定 Knockout.js 将帮助解决我的很多问题，除了在此过程中，它产生了一个我正在解决的问题的新问题。

我将所有 MVC 端点转换为仅返回视图，然后我创建了几个返回 JSON 对象的其他端点。当用户浏览网站时，网站会加载基本的 UI 框架。之后，Knockout.js 通过 AJAX 调用加载模型。这导致每个页面都加载，然后再次“加载”，就像仅使用 MVC 加载页面并且所有数据都存在一样。

我一直在寻找同时加载两者的方法，但我没有找到不需要我完全重构网站的任何东西。最好的选择是：

将 JSON 端点合并到视图端点中，并在代码隐藏中使用 @Html.Raw(Json.Encode(object)) 将模型转换为 JSON

但是我必须使用我所有的纯 JSON 端点。

我还能做些什么来将 JSON 端点数据传递到服务器端的视图？或者有什么方法可以同时加载模型和视图？

【问题讨论】：

标签： javascript asp.net-mvc json knockout.js

【解决方案1】：

您的架构是正确的，但您希望初始加载使用模型中的数据预先填充您的视图。在只返回视图的控制器操作中，您应该将要填充的数据放入 ViewData。然后视图最初加载模型值，每个 UI 元素都可以有一个 AJAX 更新，该更新为该特定字段调用控制器操作。

这也是ideal case for a ViewModel。这可能有助于as well。

【讨论】：

感谢您的回答！只是为了确保我在同一页面上，我应该在视图中调用 JSON 端点吗？类似： var model = @Html.Action("Data","Items") where model is in js?
仅调用 JSON 端点进行更新。如果您创建一个 ViewModel 对象并在 Javascript 中与之交互，您应该只让视图与该对象交互并具有封装 AJAX 请求的方法（使用控制器端点）。这将使您能够执行智能操作，例如定期缓存或更新。
好的，所以我的视图端点应该返回一个被翻译成 JavaScript 的模型，我应该有一个 json 端点来返回该模型的更新版本？我能做些什么来消除代码重复我就是这种情况？
您可以将更新封装在方法调用中（可能在服务层中），然后在初始操作和 ajax 更新选项中调用该方法。 DRY 是个好东西，但是在多个地方调用方法也是可以的。 :)

【解决方案2】：

我也同意让您的初始视图生成将初始数据直接呈现到视图中是个好主意。一般来说，这确实比单独的 AJAX 调用 + JavaScript 之后填充数据产生更好的性能。

但我也认为这实际上取决于您正在加载的页面类型。如果您的应用程序主要是基于 AJAX（SPA 样式模型）的，那么第一次加载可能并不那么重要，因为它只发生一次，并且可能需要一些额外的时间。通过 AJAX 或通过传统的视图操作以一种方式加载所有数据会更容易和更一致。当您的客户端代码要求您重新加载列表或记录的整个数据集时，您最终不会复制模板/视图逻辑来生成该输出。

【讨论】：