title: Sending knockout viewmodel to controller is missing items from drop down box
body: <p>Little by little I'm learning this...</p>
  
  <p>In my C#/MVC4 demo build I've created a controller to send data to my view through JSON.  In my view I am able to parse the response and populate a drop down list.</p>
  
  <p>I'm using knockout similar to a cart to create additional lines (colors) for posting to the controller.</p>
  
  <p>code:</p>
  
  <p>MVC ViewModel:</p>
  
  <pre><code>function Color(data) {
      this.ID = ko.observable(data.ID);
      this.ColorName = ko.observable(data.ColorName);
      this.Duration = ko.observable(data.Duration);
      this.bNotPermanent = ko.observable(1);
  }
  
  function ViewModel() {
      self = this;
      self.CurrentColors = ko.observableArray([]);
      self.AddColors = ko.observableArray([]);
      self.AllColors = ko.observableArray([]);
  
      $.ajax({
          type: "POST",
          url: '@Url.Action("GetUsersColors", "EditUser")',
          data: { szUserRecID: RecID },
          success: function (data) {
              var colors = $.map(data, function (item) {
                  return new Color(item)
              });
              self.CurrentColors(colors);
          },
          error: function (err) {
              alert(err.status + " : " + err.statusText);
          }
      })
  
      $.ajax({
          type: "POST",
          url: '@Url.Action("GetVisibleColors", "EditColor")',
          contentType: "application/json; charset=utf-8",
          dataType: "json", 
          data: {},
          success: function (data) {
              var colors = $.map(data, function (item) {
                  return new Color(item)
              });
              self.AllColors(colors);
          },
          error: function (err) {
              alert(err.status + " - " + err.statusText);
          }
      })
  
      self.removeLine = function (color) { self.AddColors.remove(color);
  
      };
      self.addColor = function (color) { 
          self.AddColors.push(new Color({ ColorName: "", ID: "", Duration: "Permanent" }))
      };
  
      self.save = function () 
      {
          // I've also tried data: ko.mapping.toJSON(this) 
          // based on my issues I've seen, I'm almost positive this is where my issue is
          // I think the mapping is having an issue but I don't know what it should look like
          // with an array of objects
          $.ajax({
              url: '@Url.Action("PostColors", "EditColor")',
              type: "POST",
              data: ko.mapping.toJSON(this.AddColors()),
              async: true,
              contentType: "application/json"
          }).success(function (data) {
  
          });
  
  };
  </code></pre>
  
  <p>this does work... </p>
  
  <p>View</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
      &lt;tr data-bind =" visible: $root.AddColors().length &gt; 0"&gt;
          &lt;th padding: 10px; &gt;Color&lt;/th&gt;
          &lt;!--&lt;th padding: 10px; &gt;Duration&lt;/th&gt;--&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody data-bind="foreach: AddColors"&gt;
      &lt;tr&gt;
      &lt;!-- This works, it displays all the colors provided by the controller --&gt;
          &lt;td&gt;&lt;select data-bind="options: $root.AllColors, optionsText: 'ColorName', value: ID, optionsCaption: 'Select Color...'"&gt;&lt;/select&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;a href='#' data-bind='click: $parent.removeLine'&gt;Remove&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;button data-bind='click: addColor'&gt;Add Color&lt;/button&gt;
  
  
  &lt;button data-bind='click: save'&gt;Submit Colors&lt;/button&gt;
  </code></pre>
  
  <p>controller:</p>
  
  <pre><code>    [HttpPost]
      public void PostColors(List&lt;ViewModels.ColorList&gt; AddColors)
      {
  
             int t = 0; // to set a break point only
      }
  </code></pre>
  
  <p>C# ViewModel </p>
  
  <pre><code>    public class ColorList
  {
      public int? ID { get; set; }
      public string ColorName { get; set; }
      public string Duration{ get; set; }
      public bool bNotPermanent { get; set; }
  }
  </code></pre>
  
  <p>when I inspect AddColors in the above function, the Duration is set but the ColorName is null but I do have the correct number of elements coming through.</p>
  
  <p>I can add lines(colors) over and over on the form and selecting them on the list.  But why are they not showing in "AddColors" object list?</p>
  
  <p>I did find another article on here referring to get; set; in the viewmodel and I did add that.  Up until that point everything coming through was null.</p>
  
  <p>Fiddler is showing this (and it doesn't look quite right...?)</p>
  
  <pre><code>[{"ID":    {"ID":11,"ColorName":"Green","Duration":null,"bNotPermanent":1},"ColorName":"","Duration":"Permanent","bNotPermanent":1},{"ID":    {"ID":17,"ColorName":"Red","Duration":null,"bNotPermanent":1},"ColorName":"","Duration":"Permanent","bNotPermanent":1}]
  </code></pre>
  
  <p>I really think my issue is with the data conversion / ajax post.  Question is, what should it look like?</p>