javascript - 更新/返回 ViewModel 返回服务器

Question

作为 Web 开发和 MVC4 的新手，我反复遇到相同的设计问题，并希望有人能告诉我 MVC4 世界中正确/支持/等的解决方案是什么:

基本上，我已经使用了 View 模型 koolaid，并且为项目中的每个 View 都提供了 View 模型，其中大多数是在单页面应用程序的某些内容上动态更新的部分 subview 。生成/渲染 View 的一切都进展顺利，然后用户在客户端更新了许多值，然后就到了更新服务器的时候了。

举个例子，假设它是一个简单的容器 View 模型:

public class Data {
  public List<Prop> Props { get; set; }
}

public class Prop {
  public string Id { get; set; }
  public int Value { get; set; }
}

所以我们假设用户正在向容器添加新的 Prop 。如何将修改后的对象返回到服务器？

到目前为止:如果服务器实时同步很重要，我可以对服务器上的每个添加/更新进行调用，然后在客户端上保持同步，或者只是让服务器返回更新的 View 。对于这样的简单场景，一切都很好。

但我发现自己经常遇到这样的情况:我希望客户端能够操作对象(通过 View /js/等)，并且在完成并提交之前我实际上不需要在服务器上更新。我真正想要的是能够将对象与渲染 View 一起传递，通过 Javascript 与其交互，然后在完成所有操作后将对象传递回 Controller 。我该怎么办呢？ (抱歉花了一段时间才进入正题!)

我见过的替代方案:

-- Quick & Dirty ( Encode viewmodel properties to JavaScript in Razor ):这肯定会将对象放入客户端的 javascript 中，尽管将整个对象序列化到客户端 html 而不进行任何验证等似乎很黑客。 (虽然我最终意识到这就是对象的下降方式，但看起来您正在绕过整个 MVC4 对象处理/解析。)

-- Upshot.Js 一度看起来很有希望获得 MS 支持，但现在似乎已经消亡了:Current status of Upshot.js

-- Breeze.js ( http://www.breezejs.com/ ) 似乎是一种接管那里的尝试，尽管我担心它相当新并且尚未得到广泛采用。

最终让我觉得我错过了一个明显的替代方案，那就是所有的部分都已经明确内置于 MVC4 中。例如，当您使用表单 View 时，您的字段将数据绑定(bind)到控件，提交表单时，会创建一个并行 JSON 对象，发送到 Controller ，然后解析为您的 POCO ViewModel 对象。这基本上就是我正在寻找的往返(尽管保留了完整的 JSON 对象客户端)。处理这个问题的“正确”方法是什么？

Answer 1

Knockout 实际上正是我正在寻找的(或另一个客户端 MV* 框架)，我只是不知道如何使用它。

感谢@Mathletics和其他几个SO解决方案为我指明了正确的方向，特别是:How to use knockout.js with ASP.NET MVC ViewModels?

关键是要使用 ko.mapping 库，并在服务器端对模型进行 Json 编码或序列化。特别是，这个脚本 block 在强类型部分 View 中对我来说工作得很好:

<script type="text/javascript">
function viewModel() {
    // Additional Knockout Here    
};

var jsonModel = '@Html.Raw(JsonConvert.SerializeObject(this.Model))';
var mvcModel = ko.mapping.fromJSON(jsonModel);

var myViewModel = new viewModel();
var g = ko.mapping.fromJS(myViewModel, mvcModel);

ko.applyBindings(g);
</script>

然后您就可以正常使用 Knockout 了:

<div class="row">    
    <div class="span3">
        <h3>Bound Value:</h3>
        <span data-bind="text: PropertyName"></span>
    </div>
</div>

(这需要 knockout.js、knockout.mapping.js 和 Newtonsoft.Json - 尽管 Json.Encode 也同样有效。)

将对象传回就很容易了。像平常一样更新你的对象，当你将它传回 Controller 时，你已经准备好了 Json 对象，并将按正常方式解析，以作为服务器端的 POCO View 模型传回，完成一轮旅行。