Question

这个问题很相似，但没有结论和自我接受的答案“不”：automatically generate javascript object model from c# object

Darin的这个答案是将对象映射到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？

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

Answer 1

来自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视图模型。每次从服务器接收数据时，您只需要调用ko.mapping.fromJSON（data）调用。

链接到文档（非常好）：http://knockoutjs.com/documentation/plugins-mapping.html

让我知道这是否有助于/你想要的。

编辑：这是一个很好的JSON序列化库的链接，您可以通过Nuget安装它来快速演示。 http://json.codeplex.com/

Answer 2

我偏爱使用JavaScriptSerializer。

不确定如何在这里发布Gists所以这里是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 3

这听起来不像你正在尝试提供JSON，正如你在other post的回复中所指出的纯粹用于数据传输，更像是你试图用MVC3提供JSONP。

迫切需要为MVC3提供JSONP。

A tutorial for the server-side portion。

A CodePen example of the client-side portion

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

3 个答案: