Welcome to the part 2 of this tutorial. if you need to read the first part, you can find it here : Mvc Basics Part 1

In Part 2  we will look at Models / Routes in order to get a better understanding of the MVC pattern. We will continue using the project we created in Part 1 of this tutorial.

We’re going to create a list of people that we want to display in our Test/Index view.

For this we will use a model Person.

What is a Model ? A Model is a simple representation of the data the View needs to display. It is a simple class, with public properties and maybe a constructor and no other functionality.

The purpose of a Model is not to operate on data in any way, it’s sole purpose is to prepare it for the View. Any functionality that needs to happen in order to achieve this is done in a Controller.

So, let’s start by creating our Person Model. Let’s go the Models folder and create a new class called TestModels. This is simply a convention. I’ve used the name of the Test Controller and added Models because all the models needed by the functionality in this controller will reside here. We will effectively have 1 class per model inside this container class.

Now we need to build the project so that the dll has this new class and then tell the Index view to expect this Model.

Open up the Index View inside the Views\Test folder and right at the top add this line : @model List<Mvc.Models.PersonModel>

Assuming we rebuilt the project before attempting this we should see our new Model class in Intellisense.

At this point, the Index View knows that it’s supposed to receive data in the format of a PersonModel.

Let’s populate some data and send it to the View.

Remember any data retrieval / manipulation happens inside the Controller so that’s where we will instantiate the PersonModel and send it to the view.

Open up the TestController and edit the Index action with the following code :

Please note that we changed the return statement to include our new data. This is the basic way in which we send data to a View. The object we return there must be of the same type we tell the View t expect.

Next open up the View and let’s write some Razor code to actually display this data :

Let’s look closer at this code. We used @ to tell the view that what follows is Razor code and then simply wrote some C#.

The word @Model is a generic keyword which will be of the type of the model we told the View to expect. This means that we get Intellisense on it if there are properties or items to work with. In our case @Model is a list of PersonModel and as such we can iterate over it as we would normally do and then write some basic HTML to display the data.

If we run the project now we will see the result of our work :

This concludes Part 2 of this Tutorial.

In Part 3 we will look at how we can build forms and post back some data.

Part 1 Part 3