Tutorial: Microsoft .NET MVC Framework, Part 1: Building You First Page

While you may know what a Model-View-Controller architecture is (if you don’t I suggest you learn it first), you probably could use some tips and guidance on how to create your first page using Microsoft’s .NET MVC Framework if you have never used it.

In this article, for the purposes of illustration, I am using Visual Studio 2010 and MVC Framework 4 Developer Edition, which should be very similar to what you use if you are still on MVC 2 or are using MVC 3, You can download MVC 4 at http://www.asp.net/mvc/mvc4 (at the time of this writing).

The first thing, of course, is to create a new MVC project:

Create the Visual Studio MVC Project

Create the Visual Studio MVC Project

Select the Empty template with ASPX view engine to create the solution:

Empty ASPX MVC Project

Empty ASPX MVC Project

This will create the project for you and create the default structure of an MVC web site:

Default Structure of a .NET MVC Project

Default Structure of a .NET MVC Project

At this point, you got a solution that will compile but will fail to run because you are lacking controllers, views and models. Your first stop is a model class – now, in this example we only want one page that does not depend on data so we can skip that step. Let’s create it anyway for the sake of an example – as you guessed – under Models folder. Now, you do not need to create that class right under the Models folder – you can create it under a subfolder structure and put the class where it logically makes sense, it will be available to you when you create a view. So, let’s create one:

Create a MVC Model

Create a MVC Model

This is what I did for this example:

A Model Class

A Model Class

Now, Models are your Business Objects and should only contain data.

The next step is to create a View which will render your data. Each View corresponds to an Action, such as View, Edit, Delete, Update, Filter, etc. and will have to reside in a subdirectory of /Views named after the respective controller and bearing the name of the action. So if your Controller is Home and your Action is Index, your file is going to be /Views/Home/Index.aspx.

If you look at your directory structure in the project you created, the Views directory has a Shared subdirectory – this directory is typically used for global stylesheets as well as master page files. In our example to create a one page website, I chose to keep the default name of Home for the controller and Index as an action for the home page. So go ahead and create a subdirectory called Home under Views, and then Index.aspx underneath that – Home is your Controller, Index is being the action you are defining:

Create a MVC View

Create a MVC View

Now all that’s left is to add a Controller – right-click on Controllers and choose to add one. Note that the Controller name should match the directory name you just created for the View with a “Controller” appended.

Add Controller

Add Controller

Add Controller

Add Controller

Now, go back to your Index.aspx and add “Hello, MVC!” or any other however pleasing text in between the <div> tags and run it! You just got your first .NET MVC website up and running!

This entry was posted in MVC and tagged , , , , , , , , , . Bookmark the permalink.

One Response to Tutorial: Microsoft .NET MVC Framework, Part 1: Building You First Page

  1. iphone 5 says:

    That is a superb suggestions particularly to these new to blogosphere, short and exact information… Many thanks for sharing this 1. A need to study post.

Leave a Reply

Your email address will not be published. Required fields are marked *