Creating an MVC 3 Web Application with the Razor View Engine, HTML5 and IIS Express 7.5

This was originally going to be a few simple steps, but I decided to go the whole hog. Good first read if your getting started with MVC3! (Rough knowledge required, when I say rough, I mean VS, aspx and O-O knowledge)


Creating new MVC 3 Web Application in VS 2010
1. Create a new MVC 3 Web Application
2. Select an Empty template from the templates dialog (the others ship with authentication that were not goign to use).
3. View engine, select Razor (This will allow us to use the Razor view engine which has slightly different markup and uses .cshtml files rather than .aspx pages). Note: Razor view can be rendered inside unit tests, something that aspx pages cannot.
4. Use HTML5 semantic markup, check it!
5. OK to create.

Note: You can see that quite a lot of libraries are included by default. You will also notice that JQuery (JS and CSS) is included as standard and we have a good base setup to begin developing our web application.



WHAT IS MVC and Order of execution

Init
Within an MVC application, you have a list of routes and filters defined when the application starts. These are defined the the Global.asax.cs file (yes it still exists!). The routes are referenced everytime a page is requested (URL is entered that is associated with the application). The routes describe which Controller will serve the view's content.

Controller
The Controller is responsible for all the business logic. This is the "C" part of MVC. The Controller may utilise the Model ("M" in MVC) to manipulate the datastore is some way (basically ask the database to grab something). The Controller may do some casting or validation on the data, then render the View (may also pass data to the view when rendering).

Model
The Model is all about the database and the database layer. Usually you will have a framework here for managing access and control to your database. In this example, we are using the entity framework. So we will have our .edmx files and our template files here. Our classes will also be defined here as they will be generated automatically from our database content!

View
The "V" in MVC. View's should know nothing about how the data is constructed and how the data works internally. The view should be essentially be dumb and told nothing about the data, other than anything required to display the data to the user. The reason for this aides the seperation of concerns principle of O-O programming. This allows us to clearly seperate are busienss logic. The rewards consist of: Unit testable busienss layer, designers can work with views without worrying about learning C#/VB etc.


Razor View Engine
I don't want to explain everything in this post or were gonna be writing a novel. Here is a good link by ScottGu on the Razor view engine. Either than, or you can just trust me that it's great!


Note about Razor 'master' pages and entry points
_ViewStart.cshtml - Does what it says! This is executed first and initialises the view.
_Layout.cshtml - Razor's answer to aspx master pages.



Creating a Controller
1. Right click the Controllers directory.
2. Add > Controller.
3. Name the controller HomeController (We already have a route defined in the Global.asax as default that points to a Home Controller - So there is no extra work required to link it up yet).
4. Set the template as an empty template
5. OK to create!
6. You will notice that you controller contains an Index method. Will will be executed by default when the user hits the 'Home' directory for your application. I.e. http://localhost/Home


Creating a View based off the Controller
1. Each method in our controller can map to its own view page. This is what we will be doing in this example. Once the controller is created, then creating a view is simple!
2. Open the HomeController, and right click on the Index method.
3. Select 'Add View...'
4. The view name will be Index by default. This is fine...
5. THe view engine will be Razor, this again is fine...
6. Creating a strongly typed view just means that this view will only accept classes of a single type. So if you are ALWAYS passing a TEST class to this view, then it should be strongly typed.
7. Partial view can be compared to an aspx user control. It's a partial view, not a complete one! This can be re-used throughout the web application. We are not creatign one of these now...
8. "Use layout or master page". We are using this (as describes before). Set this as the _Layout.cshtml file. It will reside in the Shared folder within Views (~/Views/Shared/_Layout.cshtml).
9. OK to create!



Setting up test server and launching application

Note: I recommend using IIS Express (7.5 latest at time of writing) or something different to the visual studio server for this application. MVC uses URL Routing (aka URL rewriting before MVC), so sometimes the routing gets a little confusing with the visual studio development server. IIS7 handles URL routing out of the box (Whereas more steps were requried for IIS 6, and you can't install IIS7 on windows XP). However, IIS Express 7.5 solves all of these problems becaue it performs both nicely!


Setting up IIS Express 7.5
1. If you don't have it, its a lightweight seperate install. Simply get it via the web platform intaller
2. Right click the web application in Visual Studio > Properties.
3. Web tab
4. Use local IIS Web server
5. Check "Use IIS Express".
6. Click create virtual directory button
7. OK to execute application!


Now, simply execute the application and you'll be presented with a very blank dull webpage. Congratulations, you did it! It's the start of something good, trust me!



Reference Links
Building an MVC 3 App with Database First and Entity Framework 4.1
Creating an MVC3 Application with Razor and JS