MVC (Model – View – Controller) is ASP.Net’s new paradigm in web application development.
This guide will show you how to create a simple MVC application using Visual Studio 2008 and ASP.Net MVC RC1.
Visual Studio 2008 with SP1 and ASP.Net MVC RC1 installed. MVC supports a full Test Driven Development pattern but for this to function, you will need Visual Studio Professional and above. I am using the standard edition so this feature is not available.
Included in this kit is the Northwind.MDF database, which we will use for this exercise.
First, you create a new ASP.Net MVC application with Visual Studio as shown:
It is your choice of what language you want to use, but for this guide I shall be using C#.
The next step is to add a database file (Northwind.mdf) to our App_Data folder. You can do this by either right-clicking on the App_Data folder and choosing “Add – Existing Item” or by simply dragging and dropping the MDF file from Windows Explorer to the App_Data folder.
After adding the file, you should have something like this:
Now we are going to do the following:
1. Add an Entity Framework object to serve as our object mapper.
2. Create a Controller and a View for our Products table.
Adding an Entity Framework object.
To add an EF object to our project, we right-click on the Models folder and choose Add – New Item then choose the ADO.Net Entity Data Model object under the Data item types.
We click add and proceed with the wizard. When visual studio asks what the model should contain, we choose to create from a Database.
Then the wizard will ask you from which database will it generate the Data Model. Here we choose the MDF file that we added earlier.
Take note of the name that will be saved in the Web.Config file. After clicking Next, the wizard will ask you which objects in the database you wish to add to the Data Model. Let’s choose all the tables.
When you click Finish, the wizard will then generate the data models that we will be using for our application.
Now that we have our Data Model, let’s add a controller to our project by Right-Clicking the Controllers folder and choosing “Add Controller”
Visual Studio will then generate a controller for you.
I ticked the checkbox so that my controller will have methods for Create, Update, and Details scenarios.
Let’s look at the created controller.
Here we see the Index method which will display the data. I am going to add a few lines of code so this method will give data to the view.
Here you see that when I start to type the name of our data model, the IDE does not recognize it yet. So I copy it from the Web.Config file and:
It appears to be that there is something wrong. I have copied the name of the model from Web.Config, but the IDE still cannot recognize it! But take note of the encircled tooltip. When you see this, hit Ctrl + . (dot) then hit enter, and the appropriate Using statement will be added by the IDE.
Then, to create a View for this method, we simply right-click beside the code and choose to create a view for this method.
We now follow a few short steps to create the view. Along the way, we customize our view to fit our needs.
First we need to create a strongly typed view for this controller
Then we choose the data class and then we choose a form in which the data shall be presented by the View. I chose List as the way to display our content.
After clicking Add, a new View shall be added for you in your Views folder
Lets run the application and see what it looks like.