Saturday, February 25, 2012 #

Building a Northwind Single Page Application using ASP.NET MVC 4 Beta - Part 2

This post is in continuation with my earlier post, so you may want to read that first before continuing.

Once I removed all the TasksController files and the TodoItem, I chose the Models folder, right click and “Add New Item” and searched for “ADO.NET Entity Model” and added it to the folder.


It allowed me to connect to the Northwind database through “Generate from database” and I selected just three tables “Products”, “Categories” and “Suppliers” table for simplicity.  At the end of the wizard, we get a EDMX design file with the 3 tables.  On this screen I right clicked and choose “Add Code Generation Item” as below


and then in the dialog that came up, chose the “ADO.NET DbContext Generator” and Added (note, if you don’t see this template, you probably don’t have Entity Framework 4.1 installed)

This step created the Model1.Context (not required for us though Smile) and the template which groups the individual class files for each of the tables above (these are required Smile)

The next thing I did, was to remove the NorthwindEntities connectionstring that got automatically added when we followed the ADO.NET Entity Model wizard.  We don’t need this connection string.

Also, I deleted the Model1.Context file and also the Model1.cs files which are not required (we will be generating a new context to suit our database name)


Note that these files are not required only for our SPA approach here and they are required when working with EF CodeFirst normally as they do the DbSet Tracking and whole bunch of things

So, we now have the basic model classes required for wiring up our Controller required to create the SPA Pages.   One important thing I learnt in this process was that, I had to edit the Model classes as follows:-

In Supplier.cs added the “private” keyword to the ICollection<Products> property.  Same is the case with Category.cs.  Otherwise you would run into an error explained here.


After this, I added Controller for Products as per the settings below (Right Click Controller – Add –Controller)


Note several important things.  I have chosen the “Single Page Application with read/write actions and views, using Entity Framework” template under Scaffolding options.  Also, I have edited the Data context class and made it simply MvcApplication126.Models.Northwind.  This would be referenced in the web.config connection string as well so that SPA picks up our existing Northwind database instead of creating a new one.

Once you click “Add” the following files are generated. 

Under Controllers

  • NorthwindController.cs
  • NorthwindController.Product.cs
  • ProductsController.cs

Under Scripts

  • ProductsviewModel.js

Under Views

  • Products folder and the Views and Partial Views required

Repeat the steps for adding Controllers for “Categories” and “Suppliers” and the only change would be the respective Model Classes.

One important thing to do is to add the following connectionstring to the web.config file

<add name="Northwind" connectionString="Data Source=SERVERNAME;Initial Catalog=Northwind;User Id=YOUR USER NAME;Password=YOUR PASSWORD" providerName="System.Data.SqlClient" />

Then, when you run the project, it opens up the default Home Page. 

  • Navigate to /Products and it should load the list of Products from Northwind database.
  • Click on each product and edit and note that everything happens in a single page inline. 
  • Just notice the URLs change in pattern with hash tags. 
  • Notice that the Categories and Suppliers are wired up as dropdownlists since these are foreign key references.
  • Notice that all the items load asynchronously

I went ahead and edited the Shared –> Layout.cshtml under Views folder to add Menu Items for Products, Categories and Suppliers, as below:-

<ul id="menu">
         <li>@Html.ActionLink("Home", "Index", "Home")</li>
         <li>@Html.ActionLink("Products", "Index", "Products")</li>
         <li>@Html.ActionLink("Categories", "Index", "Categories")</li>
         <li>@Html.ActionLink("Suppliers", "Index", "Suppliers")</li>
         <li>@Html.ActionLink("About", "About", "Home")</li>
         <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

Now, we have our full blown Northwind Traders Application running as a SPA. 

You can download the sample from!919&parid=root

I have also hosted the sample online at 

Cheers !!!

Posted On Saturday, February 25, 2012 6:53 PM | Comments (43)

Building a Northwind Single Page Application using ASP.NET MVC 4 Beta - Part 1

Single Page Application Frameworks are gaining popularity in the ever evolving web community with lot of libraries such as JavaScriptMVC, Backbonejs and many other libraries.  ASP.NET MVC 4 introduces experimental support for building single page application (SPA) through a template.  Much of the plumbing work of wiring up the client side scripts, javascript modelviews and the controllers is automated, making it a quick start to develop SPAs relatively easier.  Lets examine a scenario where we are building a Northwind Store using SPA.

I installed the ASP.NET MVC 4 Beta for Visual Studio 2010 and the Northwind Sample Database for SQL Server

Post that I did a “File – New Project – ASP.NET MVC 4 Web Application”


In MVC 3 we are used to see a screen with 3 options i.e. Intranet, Internet and Empty templates.  In MVC 4 we have additional templates as you can see below and I chose the “Single Page Application” template and created the project template.


The default template creates the scaffolding templates for Models, Views and Controllers as it would do for any regular ASP.NET MVC Project.  The differences with SPA template is that, it adds a Model class “ToDoItem.cs” and opens it up by default.  The next step as outlined here in the ASP.NET Site Getting Started with SPA Page is to build the solution as this Model gets registered into the Models dictionary and then adding a Controller named “TasksController” which would use this “ToDoItem” as Model class and creating a new DataContext class and then running the solution.  When you run the solution and navigate to /Tasks, you get to see nice javascript based Tasks Page where one can create Tasks, Edit Tasks etc.,  I went little into examining the kind of files created and found that it creates a ContextNameController and ContextNameController.Model.cs file inside the Controllers in addition to the actual Controller we created which in our case is TasksController.


Next, the important folder Smile is the Scripts folder and there I found that it creates a <Modelname>ViewModel.js file that holds all the observer pattern script required.  In addition, this folder contains a truckload of JavaScript files including jQuery, Knockout, upshot and modernizr.


Finally, inside the “Views” folder, it creates the necessary Partial Views and Index View for Tasks.   Once you build and run, you can experience all of this SPA for your TodoItem Model without having written a single line of JavaScript code yet.

Now, things I learnt

1. The ContextName that you select when creating the TasksConroller (inour case it is MVCApplication126Context)is important for you to work with other Databases.  By default when you run this solution, Visual Studio would create a SQL Express Database in C:\Program Files\Microsoft SQL Server\MSSQL10.SQLEXPRESS\MSSQL\DATA folder with the name MVCApplication126Context. 

The way I see the SPA framework identifies is, if you don’t have a connectionstring by the name of the Context, it defaults to creating a database in SQL Express with the ContextName in the above mentioned path.

If you have a connectionstring mentioned with the same contextname, it tries and uses that Database (SQL Express, SQL Server). However, when you are running for the first time, if you create a Database and point it in the connectionstring, it would expect that the Table (mapped to the model i.e. TodoItems) need to exist.  Otherwise, it throws an exception.  So best, is to either use a Model for which there is a Table that already exists in the Database or provide a new Database name in which case, VS would create the Database with the TodoItems Table as well.   There must be someplace to configure all of these, but for the lack of time I didn’t delve deep into these things for now.

So, coming to our Northwind Sample.  Northwind has been Developers’ best friend to experiment new things and the saga continues here.

I had to do a couple of things though.  First I removed the TodoItem.cs class and also removed the TasksController, Views since we don’t need them.  So, for all practical purposes, it is now a plain MVC 4 Application with the default Home & Account Controllers and their respective Views.   I also removed the Contextfiles created inside the Controllers Folder.

A bit of analogy on how I built this Northwind App before I explain the actual steps.

The TodoItem is a simple class file and can be hand wired.  However, in real world, or for that matter, a simple Northwind database table has a lot of columns and hence properties to be wired up.  Also, it requires to map foreign relationships and other things.  So, I decided to use the ADO.NET Entity Data Model first to create a model class for the Northwind Database.    This would help me in generating DbContext classes using EF CodeFirst Template, which are much simpler than the complex EDMX file that is created by the ADO.NET Entity Model.  Thereafter, I can use the class files generated to create the Controller, View and JS ViewModels.

More on these in the next part!!!

Posted On Saturday, February 25, 2012 6:51 PM | Comments (35)