How to publish viewModel back instead of MVC model using knockout

Question

I have the following code:

Index.cshtml:

@using System.Web.Script.Serialization @model MvcApplication3.ViewModels.PersonViewModel <script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script> <!-- This is a *view* - HTML markup that defines the appearance of your UI --> <form data-bind="submit: save"> <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <table> <thead> <tr> <th>Name</th> </tr> </thead> <tbody data-bind="foreach: activities"> <tr> <td><input data-bind="value: Name" /></td> </tr> </tbody> </table> <button type="submit">Submit</button> </form> <script type="text/javascript"> 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); </script> 

HomeController:

 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<Activity> { new Activity { Name = "Skiing" } }; var personViewModel = new PersonViewModel (person); return View(personViewModel); } [HttpPost] public ActionResult Index(Person person) { //Save it return View(); } } } 

PersonViewModel:

 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; } } } 

Basically, this is that it provides an editable template for the person firstname, lastname, and the name of any actions in the list in which they participate.

So the person is sent to personViewModel.

The change I would like to make here is that instead of sending the person back, I would like to send the person back to personViewModel.

Does anyone know how to change the code to facilitate this?

Answer 1

It depends on your PersonViewModel, but if it is something like:

 class PersonViewModel { public Person Person { get; set; } // other properties } 

Then it's as easy as changing

 data: ko.toJSON(viewModel), 

to

 data: ko.toJSON( { Person: viewModel, // Other properties } ), 

Hope this helps.