title: ASP.NET MVC with nested view model and Knockout
body: <p>Cannot get my brain around how to implement knockout for the following ASP.NET MVC 4 <strong>nested</strong> view model :</p>
  
  <pre><code>public class MyProfile
  {
    public string Name { get; set; }
  
    public IList&lt;VM1&gt;   List1    { get; set; }
    public IList&lt;VM2&gt;   List2    { get; set; }
    ....
    public IList&lt;VM10&gt;  List10    { get; set; }
  }
  // example of VM view model
  public class VM1
  {
     IList&lt;Label&gt; Labels { get; set; }
     IList&lt;Contact1&gt; Contact1 { get; set; }
  }
  </code></pre>
  
  <p>In the view I accept model like this:</p>
  
  <pre><code>@model MyProfile
  
  @using (Html.BeginForm("Index", "Profile", FormMethod.Post, new { id = "profileEditorForm" }))
  {
  
    @Html.ValidationSummary(false)
      &lt;fieldset&gt;
    &lt;legend&gt;User's data&lt;/legend&gt;
    &lt;label for="name"&gt;Name:&lt;/label&gt;
    &lt;input type="text" id="name" name="name" class="required" data-bind="value: Name"/&gt;
      &lt;/fieldset&gt;
  
   @Html.EditorFor(m =&gt; @Model.List1, "List1") @* Editpr model for List1*@
   @Html.EditorFor(m =&gt; @Model.List2, "List2")
   .....
   @Html.EditorFor(m =&gt; @Model.List10, "List10")
  
   &lt;p&gt;
     &lt;input type="submit" value="Save" data-bind="enable: (List1().length &gt; 0) &amp;&amp; (List2().length &gt; 0) &amp;&amp; ...(List10().length &gt; 0)" /&gt;
  &lt;a href="/"&gt;Cancel&lt;/a&gt;
   &lt;/p&gt;
  }
  </code></pre>
  
  <p>The EditorTemplate for <code>List1</code> would look like this with multiple questions in:</p>
  
  <pre><code>@model IList&lt;FiveW.ViewModels.List1&gt;
  
  &lt;fieldset&gt;
  
    &lt;table&gt;
      &lt;tbody data-bind="foreach: Contact1"&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;label&gt;Email:&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;
            @* How do you put combobox here with labels here?
            How do you tie selected label to selected property on your Contact1 object *@
            @*&lt;select data-bind="options: Labels, optionsText: 'LabelName', value: selectedLabel, optionsCaption: 'Choose...'"&gt;&lt;/select&gt;&lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text" data-bind="value: Name, uniqueName: true" class="required" /&gt;&lt;/td&gt;
          &lt;td&gt;
            &lt;a href="#" data-bind="click: function() { viewModel.removeContact1(this); }"&gt;Delete&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
  
    &lt;button data-bind="click: addContact1"&gt;Add Contact1&lt;/button&gt;
  
  &lt;/fieldset&gt;
  </code></pre>
  
  <p><strong>Edit</strong></p>
  
  <p>VM1 through VM10 are the same except the validation logic, so I have to make them different classes (unfortunately, since it TONS of repetition in models, and in the views).</p>
  
  <p>Client side - this is what I am asking about:
  I need to pass from ASP MVC models containing nested lists and have them presented on the client with knockout (I found it to do best pertaining dynamic lists).
  It is something similar to gmail contacts - you have home/work/mobile/fax phone - so one list is label for the phone (what phone is it) and should be presented as combobox, another one is dynamic lists of phones that can increase as per user clicks.</p>
  
  <p><strong>End edit</strong></p>
  
  <ol>
  <li><p>I don't understand how to create a knockout viewModel from this nested model, obviously Name should be part of it, but the rest are lists and they also contain lists. </p></li>
  <li><p>How to map it?</p></li>
  <li><p>how to handle it (one goes into dropdownlist that will be the label of the other list, which is variable in length - the only reason to use knockout here).?</p></li>
  <li><p>once filled out, how to put it all together and ship back to controller action?</p></li>
  <li><p>how to write that editor model when label is dropdownlist (or combobox) of labels for  the name (example is: [label]home/work [name]email, [label]mobile/home/car [name]phone)</p></li>
  </ol>
  
  <p>If it was simple class with <code>IList</code> inside - its like <a href="https://stackoverflow.com/questions/11881191/how-to-post-a-viewmodel-back-instead-of-the-model-mvc-using-knockout">here</a>. Problem is that there are lists inside lists, Knockout demands that everything is observable, not sure how to express in java script this nesting model.</p>
  
  <p>Please help. Thanks in advance!</p>