The document discusses building a single page application (SPA) using the HotTowel template in Visual Studio. It provides instructions on setting up the HotTowel template, adding new pages, modeling and accessing data via Entity Framework and Breeze, and building out the view models and views to display and interact with the data. Key aspects covered include setting up the project structure, routing, data modeling, controllers, services, view models and views.

1. Parth Pandya
parth@varahitechnologies.com

2.  Application contained in only page and all
other resource are dynamically loaded in
single page container
 Some of benefits of it is
◦ You can easily make them compatible with different
devices (Such as mobile and web browsers)
◦ Being single page application it has reach user
experience and less round tripping to server

3.  Set of library as part of the visual studio
template that can be used to SPA
 It contains
◦ Durandal(For navigation)
◦ Knockout(For binding)
◦ Breeze(For client side data access)
◦ Toastr (For messages)
◦ Twitter bootstrap(For mobile compatibility and CSS
styling)

4.  Download WebTools 2012.2 update
http://weblogs.asp.net/scottgu/archive/2013/0
2/18/announcing-release-of-asp-net-and-web-
tools-2012-2-update.aspx or Install nuget
package for HotTowel
 Follow jonh papa’s blog at
http://www.johnpapa.net/hottowel/ or go
through
http://pluralsight.com/training/courses/TableOf
Contents?courseName=single-page-apps-
jumpstart and download complete plurasight
code from
https://github.com/johnpapa/PluralsightSpaJum
pStartFinal

5. •In HotTowel one can see App folder which
contains overall structure of the application and the
way it is going to behave
• Durandal folder contains navigation logic for
viewmodel , view and provide proper mapping
between different folder part of the project
• Shell.js contains navigation details and project
startup events. We can use activate or boot events
in order to register startup parameters for the in
our SPA or add new pages navigation inside boot
function.
• Services folder contains various services that we
are planning to use throughout our application
such as logger.js is already there for showing
toaster message. Similarly, we can create services
that will talk to our controller for retrieving data
•Viewmodels foder will contain JavaScript files
where will put logic to bind ui and call services to
save data
•Views folder will contain html files where we will
be putting UI markups

6.  Add new link in navigation (shell.js)
router.mapNav('employee');
 Add employee.js and employee.html
viewmodels and view respectively
 Modify content on employee.html and run
the application in order to see that the
content are reflected properly

7.  Create a model named Employee with Id and
Name property
 Run Enalbe-Migration command (Enable-
Migrations -ContextTypeName
HotTowelExample1.Models.EmployeeDBConte
xt)
 Execute add-migration Initial for creating
scripts for database tables
 Seed data in Configuration class
 Run update-database to populate data with
dummy records

8.  Create a Controller in Controller folder and
inherit it from ApiController and provide
[BreezeController] attribute for class
 Implement readonly property for
ContextAccess and Metadata() method for
consuming it with Breeze
 Implement GetEmployees method to return all
employees from BreezeController which will
be consumed by our client side application

9.  In App/Services crate model.js and
datacontext.js files
 In datacontex.js implement a function to
retreive data
 Take object of breeze.EntityQuery for
querying breeze controller and configure
manager by calling registerEntityTypeCtor on
each entity to be used in javascript
 This part is written in model.js file
 Create function getEmpoyees to retreive and
set observable collecton to be used by UI

10.  In ViewModel(employee.js) create file to
return observable to be used in view. Include
observable as part of return vm as to be
consumable with view
 Observable array will be passed to data
context for loading data and will be set with
employeeObservable(data.results)
 Use knockout binding to on UI
 Tip:() use to evaluate knockout properties

11.  Example for the slide can be found at
http://dms.varahitest.in/Example/HotTowelE
xample1.zip