ASP.NET MVC Quick Start Tutorial - Create a Small ASP.NET MVC application step by step

Introduction

This tutorial will help you create a small ASP.NET MVC sample step by step. 

Using the Code

In this tutorial, we will be creating our own Model, View and Controller and make them all work together. For this tutorial, create a new ASP.NET MVC application using Visual Studio. The motive of this tutorial is to print our information on the webpage using MVC philosophy.

Let's briefly understand what we intend to do and then we shall perform these steps one by one to create our web page. For our motive, we need a model to hold the information. The model would be a class with the required properties. Then we will create a View to display the information in a tabular format. Finally we will need a Controller to receive our request from the webpage and return the response to us. Let’s get started with our task.

Creating the Model

On the Models folder, right click and create a new class by clicking on Add -> Class. See figure below:

Name the class as PersonalInformation.cs. Create the following properties in the Model:

These properties have been created using C# 3.0 specifications and they do not need private fields to be created for them. This completes our model. Let’s now create our View which we shall use to display the information in the browser.

Creating the View

On the views folder, right click and create a new folder. Name the folder as PersonalInformation. Right click on the PersonalInformation folder and select Add -> View . See the figure below:

Name the View as Index and check the box which says “Create a strongly-typed view” and select the class that will act as a Model for this View. You might not see any class in the View data class drop down. Compile the application once and then add a View. You will see the PersonalInformation class in the dropdown list. Select a master page for your View. Once these steps are finished, click Add and the View gets created. Refer to the figure below.

Creating our Controller

Now that we are done with creating the Model and the View, let's create our Controller. Right click on the Controllers folder and select Add -> Controller.

Name the Controller as PersonalInformation. Please make sure that the name of the Controller and the name of the folder that we created under the Views folder are the same.

You will see that by default a method by the name Index is created in the Controller class. This method has ActionResult as a return type and it returns a View. We will dig into the details of the return type and other details in the next tutorials. Let’s now do some coding and pass the Model to the View so that it can display the information on the webpage. Type in the following code into your Controller class:

This code creates a Model and fills data into it. We then pass on that model to the view. Now the last piece that is left is to display the information using the View. For this, open up the View that we created and type in the following code in it:

That’s it. We have finished with our Model, View and Controller. Now let’s compile and run our application. Below is the final output that you will see in the browser. Please carefully look at the URL in the address bar of the browser.

With this, we finish this tutorial. For a few more ASP.NET MVC tutorials, please visit my blog.

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)