title: How to post a viewModel back instead of the model MVC using knockout
body: <p>I have the following code:</p>
  
  <p>Index.cshtml:</p>
  
  <pre><code>@using System.Web.Script.Serialization
  @model MvcApplication3.ViewModels.PersonViewModel
  
  &lt;script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- This is a *view* - HTML markup that defines the appearance of your UI --&gt;
  &lt;form data-bind="submit: save"&gt;
  
      &lt;p&gt;First name: &lt;input data-bind="value: firstName" /&gt;&lt;/p&gt;
      &lt;p&gt;Last name: &lt;input data-bind="value: lastName" /&gt;&lt;/p&gt;
  
      &lt;table&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                        &lt;th&gt;Name&lt;/th&gt;
                    &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody data-bind="foreach: activities"&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;input data-bind="value: Name" /&gt;&lt;/td&gt;
              &lt;/tr&gt;    
          &lt;/tbody&gt;
      &lt;/table&gt;
  
      &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
  
      var initialData = @Html.Raw(new JavaScriptSerializer().Serialize(Model));
  
      // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
      var viewModel = { 
          firstName : ko.observable(initialData.Person.FirstName),
          lastName : ko.observable(initialData.Person.LastName),
          activities : ko.observableArray(initialData.Person.Activities),
  
          save: function() {
              $.ajax({
                  type: "POST",
                  url: "/Home/Index",
                  data: ko.toJSON(viewModel),
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function(data) {
                      $("#resultCount").html(data);
                  }
              });
          }
      }
  
      // Activates knockout.js
      ko.applyBindings(viewModel);
  
  &lt;/script&gt;
  </code></pre>
  
  <p>HomeController:</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  using Ahb.Insite.HerdRegistration.WebUI;
  using MvcApplication3.Models;
  using MvcApplication3.ViewModels;
  
  namespace MvcApplication3.Controllers
  {
      public class HomeController : Controller
      {
          public ActionResult Index()
          {
              var person = new Person {FirstName = "John", LastName = "Cool"};
  
              person.Activities = new List&lt;Activity&gt; { new Activity { Name = "Skiing" } };
  
              var personViewModel = new PersonViewModel (person);
  
              return View(personViewModel);
          }
  
          [HttpPost]
          public ActionResult Index(Person person)
          {
              //Save it
  
              return View();
          }
      }
  }
  </code></pre>
  
  <p>PersonViewModel:</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using MvcApplication3.Models;
  
  namespace MvcApplication3.ViewModels
  {
      public class PersonViewModel
      {
          public Person Person { get; set; }
      }
  }
  </code></pre>
  
  <p>Basically what this does is it provides an editable template for a person's firstname, lastname and the name of any activities in a list in which they are involved in.</p>
  
  <p>So the person is sent through in a personViewModel.</p>
  
  <p>The change I would like to make here is that instead of posting back a person I would like to post the person back inside a personViewModel.</p>
  
  <p>Does anyone know how to change the code to facilitate this?</p>