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”

image 

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.

image

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.

image

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.

image

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!!!

Print | posted on Saturday, February 25, 2012 6:51 PM

Comments on this post

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

Requesting Gravatar...
When I was a student at the university, I learnt this program. It's so useful for class structure. A lot of problems can be solved by this program.
Thanks for excellent post.
Left by bayrak on Feb 29, 2012 1:50 AM

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

Requesting Gravatar...
I read this blog.This kind of coding language is the best way to make games and software.I also doing work on the coding language.

Left by Shed on Mar 13, 2012 11:15 AM

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

Requesting Gravatar...
In this part, I am starting to have fun because you have provided the right thing to do. Thank you for this. pmp certification toronto
Left by Kristin Williams on Apr 20, 2012 5:17 PM

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

Requesting Gravatar...
I will be starting to build an application from here. Thank you .
web designers bangalore
Left by William on May 15, 2012 3:56 PM

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

Requesting Gravatar...
I am really enjoying of doing this at home. Thank you for these guidelines that you have shared in this first page. pmp online questions
Left by Honey Parker on May 22, 2012 12:12 AM

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

Requesting Gravatar...
Joe Namath, designed an off-the-cuff victory guarantee into a rowdy Colts fan throughout an excellent Bowl press meeting. In response on the heckling Colts supporter
Left by Beats By Dre Australia on Nov 29, 2012 4:54 PM

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

Requesting Gravatar...
For me as a ASP Net Beginner this was a useful tutorial. Many thanks.
Left by Markus on Dec 01, 2012 6:00 PM

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

Requesting Gravatar...
Truly, this Single Page Application Framework is a great thing. I learnt it while I was at the university and it was really useful.It gave me a better and detailed understanding of JavaScript.
Left by Reverse Lookup Wikicallfinder on Dec 06, 2012 4:24 PM

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

Requesting Gravatar...
sweet potato, sweet potato leaves purple light Gogo. Black children know thisIs the new sweet potato varieties, short, fruiting vine children, face big taste sweet the white red flesh children
Left by Beats By Dre Australia on Dec 12, 2012 11:41 AM

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

Requesting Gravatar...
this is a really nice way to learn the success of camping landes
Left by excellent on Mar 29, 2013 4:36 PM

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

Requesting Gravatar...
Greet thing to think about drone
Left by good on Mar 30, 2013 10:10 PM

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

Requesting Gravatar...
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. http://www.seattlepi.com/business/press-releases/article/Top-7-Brands-of-Latex-Mattresses-Reviewed-by-4280144.php
Left by adf on Apr 02, 2013 1:32 PM

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

Requesting Gravatar...
its a bad thing according to me in best camping hendaye
Left by good on Apr 12, 2013 3:37 PM

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

Left by colliur on Apr 29, 2013 4:42 AM

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

Requesting Gravatar...
comprar dhea
Left by colliur on Apr 29, 2013 4:43 AM

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

Requesting Gravatar...
comprar melatonina
Left by colliur on Apr 29, 2013 4:43 AM

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

Left by colliur on Apr 29, 2013 4:44 AM

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

Requesting Gravatar...
making it a quick start to develop SPAs
Left by alianças on May 10, 2013 8:17 AM

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

Requesting Gravatar...
If you started salivating last month when the Underground Gourmet brought Herbalife
Left by jenna on Jun 15, 2013 5:01 AM

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

Requesting Gravatar...
What is assertiveness, and what are benefits? Filled with straightforward portas de aço automáticas
Left by jeremy on Jun 21, 2013 11:05 PM

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

Requesting Gravatar...
Komend najaar biedt het Centrum Management & Bedrijf van Hogeschool Leiden in bbom paga mesmo
Left by jeremy on Jun 21, 2013 11:09 PM

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

Requesting Gravatar...
Check out a video of the band playing a brand new song in LA, along with their full list of tour dates, below upessencia
Left by jomior on Aug 27, 2013 4:50 AM

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

Requesting Gravatar...
When i went minor in evaluating the sort of records developed and discovered it generates a new ContextNameController and ContextNameController. Type. cs document in the Controllers besides the precise Controller we developed that in your circumstance will be TasksController.mice pest control east london
Left by Modin on Oct 16, 2013 6:02 PM

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

Requesting Gravatar...
Later on Namath, designed an off-the-cuff victory assure in to a rowdy Colts fan in the course of a fantastic Jar mass media meeting. Throughout reply around the heckling Colts supporter.help me do my homework
Left by Modi on Oct 21, 2013 11:07 AM

Your comment:

 (will show your gravatar)