有办法自动将视图模型对象映射到javascript对象吗？

Question

这个问题类似，但没有结论，而且自我接受的答案是“否”：从c#对象自动生成javascript对象模型

达林的这个答案是将一个对象映射到Json的一个很好的例子，尽管我不确定它是否适用于复杂模型：https://stackoverflow.com/a/9007578/1026459。

下面是我所看到的一个例子。在这种情况下：

视图模型：

public class Avm
{
 public int id { get; set; }
 public string name { get; set; }
 public Foo Foo { get; set; }
}

public class Foo
{
 public int id { get; set; }
 public string description { get; set; }
 public List<Bar> Bars { get; set; }
}

public class Bar
{
 public int id { get; set; }
 public string metal { get; set; }
}

有可能定义这个对象模型吗？

javascript对象模型：

<script>
 var Avm = {};
 Avm.id = @(Model.id);
 Avm.name = "@(Model.name)";
 Avm.Foo = {};
 Avm.Foo.id = @(Model.Foo.id);
 Avm.Foo.description = "@(Model.Foo.description)";
 Avm.Foo.Bars = [];
 var Bar = function(){
  return
  {
   id : var id,
   metal : var metal;
  };
 }
 var Bar0 = new Bar();
 Bar0.id = @(Model.Foo.Bars[0].id);
 Bar0.metal = "@(Model.Foo.Bars[0].metal)";
 Avm.Foo.Bars.push(Bar0);
 //and so on for each Bar.
</script>

通过一种更精确的方法，而不仅仅是手工输入？

或者，也许是通过一个帮手的某种反射，使它成为

<script>
 @Html.GenerateJsObjectModel(Model)
<script>

它将调用帮助方法。

    public static void GenerateJsObjectModel(
        this HtmlHelper html, dynamic model)
    {
      html.ViewContext.Writer.Write("var Avm = {};");
      html.ViewContext.Writer.Write("Avm.id = " + model.id + ");");
      //etc. (except obviously more generic instead of specific)
    }

这在框架中已经存在了吗？在这里使用像JSON这样的序列化过程会更好吗?如果是这样的话，在这个场景中将使用哪种类型的钩子来绑定JSON？

基于视图模型在javascript中创建复杂模型的最佳实践方法是什么。

Answer 1

我不喜欢使用JavaScriptSerializer。

不知道如何在这里发布文档，因此这里是Gist与相关代码片段的链接：

https://gist.github.com/3043237

Index.cshtml

@model JSSerializerSample.Models.IndexViewModel
@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<div id="userName"></div>
<div id="message"></div>
<div id="complexProperty1"></div>

<script>
    $(function () {
        var options = @Html.Raw(Model.AsJson());
        $("#userName").html(options.UserName);
        $("#message").html(options.Message);
        $("#complexProperty1").html(options.ComplexProperty.ComplexProperty1);
    });
</script>

ComplexViewModel.cs

namespace JSSerializerSample.Models
{
    public class ComplexViewModel
    {
        public string ComplexProperty1 { get; set; }
    }
}

IndexViewModel.cs

namespace JSSerializerSample.Models
{
    public class IndexViewModel : BaseViewModel
    {
        public string Message { get; set; }
        public string UserName { get; set; }

        public ComplexViewModel ComplexProperty { get; set; }
    }
}

BaseViewModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Script.Serialization;

namespace JSSerializerSample.Models
{
    public abstract class BaseViewModel
    {
        public string AsJson()
        {
            var serializer = new JavaScriptSerializer();
            return serializer.Serialize(this);
        }
    }
}

完整的代码示例可以在这里下载：https://github.com/devlife/Sandbox/tree/master/JSSerializerSample

Answer 2

knockout.js库中的这种东西会不会是您要找的东西呢？

示例JSON对象：

var data = {"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}

示例映射

var viewModel = ko.mapping.fromJSON(data);    

您可以将viewmodel序列化到JSON服务器端，然后使用它自动生成javascript viewmodel。每次从服务器接收数据时，只需调用ko.mapping.fromJSON(数据)即可。

链接到文档(这很好)：http://knockoutjs.com/documentation/plugins-mapping.html

如果这是你想要的，请告诉我。

编辑:这里有一个指向一个好的JSON序列化库的链接，您可以通过Nuget来快速演示它。http://json.codeplex.com/

Answer 3

这听起来不像您试图为JSON提供服务，正如对您的其他员额的响应中所指出的那样，JSON纯粹用于数据传输，而更像是您试图使用MVC3为JSONP服务。

使用MVC3服务JSONP是迫在眉睫的可能。

服务器端部分的教程。

客户端部分的CodePen示例。