3

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

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？

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

4

3 回答 3

3

来自 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);

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

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

让我知道这是否有帮助/是您想要的。

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

于 2012-07-03T21:15:02.353 回答
2

我偏爱使用 JavaScriptSerializer。

不知道如何在这里发布要点，所以这里是要点的链接以及相关的代码：

https://gist.github.com/3043237

索引.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>

复杂视图模型.cs

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

索引视图模型.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

于 2012-07-03T21:20:02.307 回答
1

听起来不像您在尝试提供 JSON，正如您在另一篇文章的回复中所指出的那样，纯粹是为了数据传输，更像是您在尝试使用 MVC3 提供 JSONP。

使用 MVC3 服务 JSONP 即将成为可能。

服务器端部分的教程。

客户端部分的 CodePen 示例。

于 2012-07-03T21:15:01.590 回答