Click here to Skip to main content
Click here to Skip to main content

Loading KnockoutJS View Models from ASP.Net MVC, for faster page loads

, 7 Jan 2013
Rate this:
Please Sign up or sign in to vote.
This is a little deep dive that came out of a previous post on my SignalR Series.   Background First lets talk about a little background.  The popularity of the Single Page Application (SPA) has seen its rise and fall, … Continue reading →

This is a little deep dive that came out of a previous post on my SignalR Series.

Background

First lets talk about a little background.  The popularity of the Single Page Application (SPA) has seen its rise and fall, as companies like twitter moved from server side page renering to loading the initial page with ajax calls back to the server. Then after a few months, they moved back to initial server side rendering because of the perceived page load to the browser. After all, the aspect of user experience that matters on the web is perceived page load.

The Problem

Now, lets fast forward. While we can deliver a faster initial page load using server side rendering, if we want to update the web page after it has loaded with data from an ajax call we get into a dilemma of having both server side templates and client side templates to maintain.  This is the part that sucks from a code maintainability aspect. This means extra work when you add a new feature or fix a bug. Even worse, you may fix a bug in on and not realize it needed to be fixed in the other template technology.

A Solution

The solution using ASP.Net MVC and KnockoutJS is pretty simple. Rather then loading the viewmodel from an ajax call just write the viewmodel from the server side razor template as a JSON object into the javascript of the page. Then use the KnockoutJS Mapping plugin to map from the json object to the observable objects required by KnockoutJS. To install the mapping plugin, use the nuget package.

There are two pieces of code needed to make this solution work.

<script src="https://gist.github.com/4166568.js?file=gistfile1.html"></script>

Access the mapping plugin by calling ko.mapping in the view and pass in the JSON representation of your server side view model.  That brings us to the .ToJson extension method. This is a small piece of code I wrote to simplify the Json serialization using Json.Net.

<script src="https://gist.github.com/4166568.js?file=ToJsonExtension.cs"></script>

This little trick will simplify your code maintenance and also clean up your client side view models, by reducing the amount of object initialization you need to write. This really comes into play when you have a number of collections on your viewmodel.

License

This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0

About the Author

eric hexter
Chief Technology Officer
United States United States
I am an Architect for Dell.com on the Engineering Excellence team. I (co)Founded MvcContrib, Should, Solution Factory, and Pstrami open source projects. I have co-authored MVC 2 in Action, MVC3 in Action, and MVC 4 in Action. I am a Microsoft MVP.
 
I have founded some online conferences like aspConf, mvcConf, Community For MVC
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 7 Jan 2013
Article Copyright 2013 by eric hexter
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid