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.

image

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

image

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 Model1.tt 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)

image

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.

image

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

image

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>
</ul>

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

You can download the sample from https://skydrive.live.com/redir.aspx?cid=069f94a102eff49a&resid=69F94A102EFF49A!919&parid=root

I have also hosted the sample online at http://northwindspa.cloudapp.net/ 

Cheers !!!

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

Comments on this post

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

Requesting Gravatar...
Thanks for this information.

one question that cames to me is hwat is going to happend with this complicated models of SPA like the presented on Silk microsoft patterns project?

Left by Jose Luis on Mar 02, 2012 6:16 PM

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

Requesting Gravatar...
ASP.NET is the best coding language.Hoe to use this kind of steps are show in this article.This kind of information are really important for us.
Left by Shed on Mar 13, 2012 11:12 AM

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

Requesting Gravatar...
I am glad that you have post the part 2 of this Single Page Application. Thank you for this information that you have provided. project management certification
Left by Kristin Williams on Apr 20, 2012 5:14 PM

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

Requesting Gravatar...
I following this post from it's first part. Actually I tried starting out with building this app but gave it up half way :(
bangalore web designers
Left by William on May 15, 2012 3:57 PM

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

Requesting Gravatar...
This is very useful to my job. Thank you for this very detailed information about Single Page application using ASP.NET MVC 4 Beta. pmp practice tests
Left by Honey Parker on May 21, 2012 11:57 PM

# Mr

Requesting Gravatar...
really nice :)
Left by poss taridli on Jun 08, 2012 3:59 PM

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

Requesting Gravatar...
can't enter the online sample in:
http://northwindspa.cloudapp.net/
I'll appreciate your solutiuon
Left by Michael Lev on Aug 05, 2012 3:40 PM

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

Requesting Gravatar...
I never thought it could be so easy... You've described everything very distinctly. Thanks!
Left by Debussy on Dec 03, 2012 2:34 AM

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

Requesting Gravatar...
The "frame1" referred in Find Control is the ID as declared in the ASPX Page.
Left by grama sintetica on Dec 20, 2012 7:25 PM

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

Requesting Gravatar...
Note that we are entering a period of lower solar action and look at what has occurred in the past in such instances.
Left by jocuri mario on Feb 05, 2013 7:59 PM

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

Requesting Gravatar...
That's absolutely interesting for me and I do agree with the thoughts shared here on comments. Great..
Left by selling Home mississauga on Feb 13, 2013 6:12 PM

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

Requesting Gravatar...
Se acentuado por una gran cantidad de visitas grises y también de negro y rojo aparecerá a lo largo de la parte superior también. Éstos están a la venta en estos momentos.
Left by jocuri on Mar 02, 2013 8:30 PM

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

Requesting Gravatar...
que la información publicada aquí parece ser muy fiable, creo que realmente han demostrado una obra excepicional, creo que es muy bueno, te envió este tipo de artículo, siga metiendo cosas interesantes, abrazos!
Left by jocuri cu mario on Mar 02, 2013 8:32 PM

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

Requesting Gravatar...
Very interising post.
Left by Fotowoltaika on Mar 20, 2013 8:27 PM

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

Requesting Gravatar...
Ciekawa strona o fotowoltaika.
Left by Fotowoltaika on Mar 29, 2013 2:38 PM

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

Requesting Gravatar...
A whole new exercising time Disc along with blu-ray, a growth rope, or perhaps gym profile is a great method to put into practice muscle tissue stress and your body pondering.
Left by drpciv on Apr 20, 2013 6:41 PM

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

Requesting Gravatar...
You should receive the invitation code in an email from an alias “SQL Azure Talk” or something similar (note this may take from a day to a week until the CTP is available)
Left by oxyelite pro on May 04, 2013 2:31 AM

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

Requesting Gravatar...
lo largo de la parte superior también. Éstos están a la?
Left by ganhar dinheiro na internet on May 09, 2013 5:13 AM

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

Requesting Gravatar...
Interesting thoughts here, thank you so much for exposing your ideas. Thank you so much!
Left by my site on Jan 11, 2014 10:58 PM

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

Requesting Gravatar...
Interesting thoughts here, thank you so much for exposing your ideas. Thank you so much!
Left by my site on Jan 11, 2014 10:58 PM

# great

Requesting Gravatar...
Your article shows tells me you must have a lot of background in this topic. Can you direct me to other articles about this? I will recommend this article to my friends as well. Keep it up. Life Experience Degrees | Animated Explainer Videos
Left by jimcastro on Mar 22, 2014 12:23 AM

Your comment:

 (will show your gravatar)