How to access the entire model client side - asp.net-mvc

Question

I have the following code.
Index.cshtml:
#using System.Web.Script.Serialization
#model MvcApplication3.Models.Person
<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 -->
<p>First name: <input data-bind="value: firstName" /></p>
#*<p>Last name: <input data-bind="value: lastName" /></p>*#
<script type="text/javascript">
var initialData = #Html.Raw(
new JavaScriptSerializer().Serialize(Model.FirstName));
alert(initialData);
// The *viewmodel* - JavaScript that defines data and behavior of the UI
function AppViewModel() {
this.firstName = ko.observable(initialData);
// this.lastName = ko.observable("Bertington");
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
</script>
HomeController:
public class HomeController : Controller
{
public ActionResult Index()
{
var people = new PeopleEntities();
var person = people.People.First();
return View(person);
}
}
Basically what this does is loads a person from the database and using knockout makes an editable field for the first name and loads the FirstName into it.
This works fine, however, I also want to load the LastName. I'm unsure how to do this because I'm serializing just the first name. I'm thinking I want to serialize the whole model but am not sure how I would then get access to each name.

Answer 1

The JavaScriptSerializer converts an object to a JSON string. If you serialize the entire model you can then access its fields the same way you do in C# using the dot notation more specifically initialData.FirstName and initialData.LastName.
This works because initialData contains a javascript object initialized from the JSON string obtained from the serializer. If the model contained only the first and last name properties this would be the string generated by the serializer:
{"FirstName":"John","LastName":"Doe"}

Answer 2

Here is how I do it:
var initialData = #(new MvcHtmlString(Model.ToJson()));
var viewModel = new AppViewModel(ko.toJS(initialData));
function AppViewModel(m) {
this.firstName = ko.observable(m.FirstName);
this.lastName = ko.observable(m.LastName);
}
$(function () {
ko.applyBindings(viewModel, document.body);
}
Where the .ToJson() method on the Model is an extension method:
public static class HtmlHelperExtensions
{
public static string ToJson(this object item)
{
return Newtonsoft.Json.JsonConvert.SerializeObject(item);
}
}
You can see I used the Newtonsoft.Json converter, but you could probably use the JavaScriptSerializer as well.