Question

This question is similar, but with no conclusion and a self accepted answer of “no”: automatically generate javascript object model from c# object

This answer by Darin is a very good example of mapping an object to Json, although I am not sure if it works with complex models: https://stackoverflow.com/a/9007578/1026459

Here is an example of what I was looking at. Given this setup:

Viewmodel:

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

Is there a possible way to define this object model:

javascript object model:

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

Through a more precise method than just typing it all out by hand?

Or, perhaps through some sort of reflection in a helper so that it would become

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

Which would call a helper method

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

Does this already exist in the framework? Would using a serialization process like JSON be superior here and if so what type of hook would be used to tie JSON in for this scenario?

What is the best practice approach for creating a complex model in javascript based on a viewmodel.

Answer 1

I’m partial of using the JavaScriptSerializer.

Not sure how to post Gists here so here is the link to the Gist with the pertinent pieces of code:

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);
        }
    }
}

The complete code sample can be downloaded here: https://github.com/devlife/Sandbox/tree/master/JSSerializerSample