Javascript 更新/将ViewModel返回到服务器

作为web开发人员和MVC4的新手，我反复遇到同样的设计问题，希望有人能告诉我什么是正确的/支持的/等等。。解决方案出现在MVC4世界：

基本上，我已经喝了视图模型Koolay，并且我的项目中的每个视图都有视图模型，其中大多数都是在单页应用程序上动态更新的部分子视图。所有这些都很好地生成/呈现了视图，然后用户在客户端更新了许多值，现在是更新服务器的时候了

例如，假设它是一个简单的容器视图模型：

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

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

公共类数据{
公共列表道具{get；set；}
}
公共类道具{
公共字符串Id{get；set；}
公共int值{get；set；}
}

因此，让我们假设用户正在向容器添加新的道具。如何将修改后的对象返回到服务器

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

但我发现自己经常遇到这样的情况：我希望客户端能够（通过view/js/etc）操作对象，并且在完成并提交之前，我不需要在服务器上进行更新。我真正想要的是能够将对象与渲染视图一起传递，通过Javascript与之交互，然后在完成所有操作后将对象传递回控制器。我该怎么做？（抱歉，我花了一段时间才说到点子上！）

我看到的备选方案：

--Quick&Dirty（）：这肯定会将对象放入客户端的javascript中，尽管在没有任何验证的情况下将整个对象序列化到客户端html中似乎有点黑客行为，等等。（虽然我最终意识到这就是对象向下运行的方式，但似乎您绕过了整个MVC4对象处理/解析过程。）

--Upshot.Js曾一度在微软的支持下大有可为，但现在看来它已经死了：

--Breeze.js（）似乎是一种尝试，尽管我担心它是相当新的，还没有得到广泛的采用

---

<>最后，让我觉得我缺少一个必须是一个明显的替代物的是，所有的片段都已经很清楚地建立在MVC4中了。例如，当你使用表单视图时，你的字段对控件是数据绑定的，当提交表单时，创建一个并行JSON对象，然后发送给控制器，然后PAR。sed到您的POCO ViewModel对象中。这基本上就是我要寻找的往返（虽然保留完整的JSON对象clientside）。什么是“正确的”处理方法？

从您的描述中，我可以理解您需要将对象集合传递给控制器，然后更新集合。模型绑定到集合将使您更轻松

当绑定到单个字段的集合时，它会变得更容易，但是当您想要绑定到对象集合时，它会变得有点棘手

顺序绑定：

下面是将发布表单的控制器操作（HTTP POST操作）

public ActionResult更新操作（ICollection道具）{
返回视图（道具）；
}
form method=“post”action=“/Home”>

当表单发布时，这些值将类似于

[0]。Id=1001&[0]。Value=Prop1&[1]。Id=&[1]。Value=NewProp

您可以看到索引[0]和[1]。模型绑定器将根据索引正确地对对象进行分组，您将获得预期的集合。发布后，您的操作将在ICollection道具中获得2个对象。一个ID为1001，另一个是新添加的

现在，您会注意到，如果动态添加新道具，则需要使用脚本对其进行正确索引。或者，如果这对您来说很困难，则可以使用上述格式发布元素，而不是对其进行索引。您需要解析元素并使用脚本发布表单。数据应使用索引进行排列。解析将为您提供另一个道具您可以只发布所需的元素，即新添加或修改的元素，而不是发布所有元素，从而节省有效负载

在非顺序绑定中索引是唯一值，而不是数字序列序列，如下所示：

[PropId1001]。Id=1001&[PropId1001]。Value=Prop1&[PropIdTemp233]。Id=”“&[PropIdTemp233]。Value=NewProp

---

Knockout实际上正是我想要的（或者另一个客户端MV*框架），我只是不知道如何使用它

归功于@Mathletics和其他一些SO解决方案，它们为我指明了正确的方向，特别是：

关键是使用ko.mapping库，并在服务器端对模型进行Json编码或序列化。特别是，此脚本块在强类型局部视图中运行良好：

<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>

函数viewModel（）{
//这里有额外的淘汰赛
};
var jsonModel='@Html.Raw（JsonConvert.SerializeObject（this.Model））；
var mvcModel=ko.mapping.fromJSON（jsonModel）；
var myViewModel=newviewmodel（）；
var g=ko.mapping.fromJS（myViewModel，mvcModel）；
ko.应用绑定（g）；

然后，您就可以按照正常情况使用淘汰赛了：

<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也同样适用。）

将对象传回很容易。将对象更新为普通，当您将其传回控制器时，您已经准备好了Json对象，并将按照普通进行解析，以作为服务器端的POCO视图模型传回，完成往返过程。

I appreci

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