title: C# model to Javascript object- using knockout.js
body: <p>I'm trying to use knockout.js to perform add/remove operations on a server-side property. Here's what my C# Model looks like:</p>
  
  <pre><code>public class MyModel
  {
      [Key]
      public int MyModelId { get; set; }
  
      [Required]
      public string Name { get; set; }
  
      private IEnumerable&lt;string&gt; _Items;
  
      [Required]
      public IEnumerable&lt;string&gt; Items
      {
          get { return _Items; }
          set { _Items = value; }
      }
  
      //Used to store in SQL database
      public string ItemsSQL
      {
          get { return _Items != null ? String.Join(";", _Items) : null; }
          set { _Items = value != null ? value.Split(';').ToList() : null; }
      }
  }
  </code></pre>
  
  <p>Here's what my ViewModel looks like:</p>
  
  <pre><code>@model MyProject.Models.MyModel
  
  &lt;script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      @{
          var initialData = new JavaScriptSerializer().Serialize(Model);
      }
      var viewModel = {
          MyModel: ko.observable(@Html.Raw(initialData)),
  
          //Commented out on purpose
          //Items: ko.observableArray(this.MyModel.Items),
  
          addItem: function() { 
              this.MyModel.Items.push("");
          },
  
          removeItem: function(item) {
              this.MyModel.Items.remove(item);
          },
      };
  
      alert(JSON.stringify(@Html.Raw(initialData)));
  
      $(document).ready(function() {ko.applyBindings(viewModel); });
  &lt;/script&gt;
  </code></pre>
  
  <p>And Here's my view:</p>
  
  <pre><code>Name: &lt;span data-bind="text: MyModel().Name"&gt;&lt;/span&gt;
  &lt;br /&gt;
  Items: &lt;button data-bind="click: addItem"&gt;Add Item&lt;/button&gt;
  
  &lt;table&gt;
      &lt;tbody data-bind="template: { name: 'itemTemplate', foreach: MyModel().Items}"&gt;&lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;script type="text/html" id="itemTemplate"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;input data-bind="value: $data" /&gt;
              &lt;a href="#" data-bind="click: function() { 
                                     viewModel.removeItem($data) }"&gt;Remove Item&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>This displays <code>MyModel.Name</code> along with each item in <code>MyModel.Items</code>displayed in a textbox. My problem is when I try to instantiate <code>Items</code>, it spits out the error message: 
  <code>Unable to get value of the property 'Items': object is null or undefined.</code> 
  This also affects my add and remove operations.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>When I do <code>alert(JSON.stringify(this.MyModel));</code>, it shows that MyModel is undefined, but when I do <code>alert(JSON.stringify(@Html.Raw(initialData)));</code> my model is displayed in JSON format. So, my Model is serializing correctly, but knockout is unable to create an observable property from a C# variable? I don't know. Razor is a pain.</p>