Using ASP.Net MVC RC1

ASP.Net MVC

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.

Tools:

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:

clip_image002

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:

clip_image004

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.

clip_image006

We click add and proceed with the wizard. When visual studio asks what the model should contain, we choose to create from a Database.

clip_image008

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.

clip_image010

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.

clip_image012

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”

clip_image014

Visual Studio will then generate a controller for you.

clip_image016

I ticked the checkbox so that my controller will have methods for Create, Update, and Details scenarios.

Let’s look at the created controller.

clip_image018

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.

clip_image020

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:

clip_image022

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.

clip_image024

Then, to create a View for this method, we simply right-click beside the code and choose to create a view for this method.

clip_image026

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

clip_image028

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

clip_image030

Lets run the application and see what it looks like.

clip_image032

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

3 Responses to Using ASP.Net MVC RC1

  1. janzen jino says:

    sir edu.. this is janzen balasbas.. hope u still remember me.. sir gusto ko sana magtanong ng konti about asp.net.. im lately exposed to PHP Programming..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s