Introduction
Single-Page Applications (SPAs) are Rich, Responsive Web apps that load a single HTML page and dynamically update that page as the user interacts with the app.
This code sample gives the demo application for creating Single Page Application using Hot Towel SPA Template (Knockout, Durandal, Breeze).
This application will be useful for understanding the basics of Single Page Application in some extend. If you follow and create the application your own, it will give great experience on SPA.
Background
Please take a look into the Durandal, Knockout and Breeze basics for more understands the below steps.
Durandal is small JavaScript framework designed to make building Single Page Applications (SPAs) simple and elegant.
Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.
Breeze
Breeze is a JavaScript library that helps you manage data in rich client applications. It store & retrieve the data in database, execute queries etc.
Hot Towel creates a great starting point for building a Single Page Application (SPA) with ASP.NET. It provides a modular structure for your code, view navigation, data binding, rich data management and simple but elegant styling.
The purpose of the Open Data protocol (OData) is to provide a REST-based protocol for CRUD-style operations (Create, Read, Update and Delete) against resources exposed as data services.
Pre-requisites
To run this sample in development machine, machine should have Visual Studio 2012 or higher and MVC 4 with Hot Towel Template. If reader has some basic knowledge on MVVM pattern it helps to understand better Hot Towel SPA.
Description
This code sample describes step by step creation of My Contact project using MVC 4 - Hot Towel Single Page Application Template.
I am explaining the step by step creation of My Contact project using MVC 4 Hot Towel SPA and I have written inline comment in the source code for better understanding the code. In this web page I am concentrating on steps for creating this application.
Step 1: Create My Contacts project using MVC 4 -> Hot Towel SPA.
Step 2: Create database & table.
Create database under App_Data folder, please see the below image for database creation.
App_Data -> Add -> New Items -> SQL Server Compact 4.0 Local Database.
It can be any database, but corresponding connection string has to mention in the web.config file.
I am taking SQL Server Compact 4.0 Local Database.
Double click the MyContact.sdf file and create table with column Id, Name, Mobile, Email, see the below image.
Add the connection string information into web.config file.
<connectionStrings>
<add name="MyContactDB" connectionString="Data Source=|DataDirectory|MyContact.sdf" providerName="System.Data.SqlServerCe.4.0" />
</connectionStrings>
Step 3: Create Model and DataContext Classes
Contact model class, Contact.cs and datacontext class MyContactDbcontext.cs under Models folder.
Contact.cs
public class Contact
{
public int Id { get; set; }
[Required, MaxLength(100)]
public string Name { get; set; }
[Required]
[RegularExpression(@"\(?\d{3}\)?-? *\d{3}-? *-?\d{4}",
ErrorMessage = "Invalid mobile")]
public string Mobile { get; set; }
[RegularExpression(
@"^\w+[\w-\.]*\@\w+((-\w+)|(\w*))\.[a-z]{2,3}$",
ErrorMessage = "Invalid email")]
public string Email { get; set; }
} MyContactDbContext.cs
public class MyContactDBContext : DbContext
{
public MyContactDBContext()
: base(nameOrConnectionString: "MyContactDB")
{
}
protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
Database.SetInitializer<MyContactDBContext>(null);
}
public DbSet<Contact> Contacts { get; set; }
} Step 4: Web API class for Breeze framework contact with database. BreezeController.cs (ApiController) under Controller folder.
BreezeController.cs
[BreezeController]
public class BreezeController : ApiController
{
readonly EFContextProvider<MyContactDBContext> _contextProvider =
new EFContextProvider<MyContactDBContext>();
[HttpGet]
public string Metadata()
{
return _contextProvider.Metadata();
}
[HttpGet]
public IQueryable<Contact> Contacts()
{
return _contextProvider.Context.Contacts;
}
[HttpPost]
public SaveResult SaveChanges(JObject saveBundle)
{
return _contextProvider.SaveChanges(saveBundle);
}
}
System.web.Http.OData - reference has to add for getting Metadata using Breeze
Until now we created database and web API for breeze communicate with database. Before going into next session, please take a look into the Durandal, Knockout and Breeze basics.
Client Side Code
Hot Towel SPA client side code constructed using MVVM pattern, client html/java script file will act Model, View & ViewModel classes. Let us see client side code in the below section.
All client side code comes under App folder in the My Contact project. It has three folders
services (model) -> contains java script files for model, datacontext, log and Breeze.partial-entities.
viewmodels -> contains java script files it act as viewmodel classes for html view files
view-> contains html files mostly view (UI) files.
From here I am start mentioning the file name, it has to copy from the downloaded source code. Source code has inline comment whenever if necessary.
Step 5: Bootstrapper and Configuration files
main.js files works like bootstrapper and config.js (it has to create or copy from source code) contain configuration information like remoteServicName.
Step 6: Create file in services folder (copy files from source code) - MODEL
model.js file helps to sync up table column using Breeze Metadata file.
breeze.partial-entities.js into App->services folder, some reason template is not creating this file or I was missing something on this. But this is the way to work around.
datacontext.js file is getting data, add/updating using Breeze API controller, Breeze framework will take care all the service calls.
Step 7: Create html files under view folder (copy files from source code) - VIEW
contacts.html -> list all available contacts extracted from the database, knockout framework helps for data-binding from viewmodel to view.
Similarly contactadd.html & contactedit.html are used for add and edit respectively.
Step 8: Create java script files under viewmodel folder (copy files from source code) - VIEWMODEL
Usually viewmodel file contains properties, methods and command which can be invoke by the view.
Note: naming convention of both view & viewmodel should be same, and then durandal understands view & its corresponding viewmodel files.
contacts.js -> contacts properties contains list of contacts and some other properties/command for searching by name.
contactadd.js/contactedit.js - doing add/edit properties and commands. For understanding purpose add/edit files are created two separate views, also it helps to navigate independently each other.
Step 9: Updating routes for navigating Contacts, Contact Add views.
shell.js (App->viewmodels), below code has to update for display Contacts, Add item in the menu list.
Step 10: Build & Run
Once done all the above steps, add the required namespaces in all .cs files and Build & Run the application. It will redirect to contacts list page. Click 'Add' menu, then add some contact information and click 'Save'. Then you can able to see the newly added record in contacts view.
Conclusion
I hope this article helps to understands MVC 4 Hot Towel SPA and able to create your own My Contact project. Please let me your valuable comments, suggestions and quires on this article. Thanks to John Papa for Hot Towel template.
You can use Fiddler Web Debugger tool for analyzing OData request from Breeze framework.
