title: Create object with list of properties and pass it to Controller
body: <p>Perhaps there is an easy solution for my problem but I simply cannot seem to find it. I have read lots of tutorials about Knockout so I get the basics but I ask this question because my entity-structure is a bit more complicated than a person with a name and a list of friends which may or may not be on Twitter <strong>(Video on Channel9: <a href="http://channel9.msdn.com/Events/MIX/MIX11/FRM08" rel="nofollow">Helping you build dynamic JavaScript UIs with MVVM and ASP.NET</a>)</strong>. Here's my situation:</p>
  
  <p>I have a class <strong><em>PersonnelClass</em></strong> with this basic structure:</p>
  
  <pre><code>[Serializable]
  //The interface is for the implementation of 'Name' and 'Description'
  public class PersonnelClass : IPersonnelClassOrPerson 
  {
      public PersonnelClass() : this(Guid.NewGuid(), "", "") { }
  
      public PersonnelClass(Guid id, String name, String description = null)
      {
          if (id == Guid.Empty) { throw new ArgumentNullException("id"); }
          Id = id;
          Name = name;
          Description = description;
          Properties = new PropertyCollection();
      }
  
      public Guid Id { get; private set; }
      public String Name { get; set; }
      public String Description { get; set; }
      public PropertyCollection Properties { get; private set; }
  }
  </code></pre>
  
  <p>The <strong><em>PropertyCollection</em></strong> class and associated <strong><em>AbstractProperty</em></strong> class look like this:</p>
  
  <pre><code>[Serializable]
  public class PropertyCollection: List&lt;AbstractProperty&gt; { }
  
  [Serializable]
  public abstract class AbstractProperty: IEntity, IProperty
  {
      public AbstractProperty(String name, String description = null) : this(Guid.NewGuid(), name, description) { }
  
      public AbstractProperty(Guid id, String name, String description = null)
      {
          if (id == Guid.Empty) { throw new ArgumentNullException("id"); }
          if (String.IsNullOrEmpty(name)) { throw new ArgumentNullException("name"); }
          Id = id;
          Name = name;
          Description = description;
      }
  
      public Guid Id { get; private set; }
      public String Name { get; private set; }
      public String Description { get; private set; }
  }
  </code></pre>
  
  <p>In my Controller, I create an instance of a <strong><em>PersonnelClassViewModel</em></strong> that has this structure:</p>
  
  <pre><code>public class PersonnelClassViewModel
  {
      public PersonnelClass PersonnelClass { get; set; }
      public List&lt;AbstractProperty&gt; Properties { get; set; }
  }
  </code></pre>
  
  <p>I fill this viewmodel with a new PersonnelClass and two test-properties to pass to my View like this:</p>
  
  <pre><code>var properties = new List&lt;AbstractProperty&gt;
  {
      new TextProperty("prop1", "descr1"),
      new TextProperty("prop2", "descr2")
      //TextProperty is derived from AbstractProperty
  };
  var vm = new PersonnelClassViewModel { Properties = properties };
  return View(vm);
  </code></pre>
  
  <p>I get everything in my View as I wanted. From the View I want to create a new PersonnelClass with a set of selected properties. I have the fields for Name and Description and to add the properties I have a ListBox with the properties that already exist (for demo-purpose they came from the controller now). Through a bit of Knockout JavaScript code I can select items from this list and populate an HTML select-control () with the selected properties to add to the PersonnelClass. This all works fine, until I want to build up an object to pass back to the Controller and create the PersonnelClass.</p>
  
  <p><strong>My question is:</strong> what Knockout JS code is needed to build up this object and pass it to the Controller by submitting the form and in my Controller how should I receive this object, meaning: what type of object should this be (PersonnelClass, PersonnelClassViewModel, ...) ?</p>
  
  <p>If any more info/code is needed, please do ask. Thanks in advance!</p>
  
  <p><strong>Update after answer of 'B Z':</strong></p>
  
  <p>I followed a few more of Steven Sanderson's tutorials about this to be sure I understand this, especially the one you provided in your answer. Now I have following code in my View to start with:</p>
  
  <pre><code>var initialData = @Html.Raw(new JavaScriptSerializer().Serialize(Model));
  
  var viewModel = {
      personnelClassViewModel : ko.mapping.fromJS(initialData),
      properties : personnelClassViewModel.Properties,
      selectedProperties : ko.observableArray([]),
      addedProperties : ko.observableArray([])
  };
  
  ko.applyBindings(viewModel);
  </code></pre>
  
  <p>The variable 'initialData' contains the values I expect it to have but then I get the following error:</p>
  
  <blockquote>
    <p>Microsoft JScript runtime error: 'personnelClassViewModel' is undefined</p>
  </blockquote>
  
  <p>I have no clue anymore. Can anyone help me fix this?</p>