Creating our first MVC 4 application

First of all I would like to welcome any first time visitors to my blog. Before I start this blog I would like to give a brief introduction to myself. My name is Mark Anthony Farrugia and, apart from being a Computing Teacher, I am a freelance web developer based in Malta which is a small island in the Mediterranean. So now let me start this blog post :) .

In this blog post I will focus on the creation of our first ASP.NET MVC application using Visual Studio. If you are familiar with ASP.NET you will soon realize that an ASP.NET MVC project folder structure is totally different from an ASP.NET application.

To start off you need to create a new ASP.NET MVC project type using Visual Studio, as shown in the underneath screenshot. In my case I will be creating an ASP.NET MVC 4 application. If you do not have this project template you can download it from here.

Basically you can now decide to either create an EMPTY ASP.NET MVC application or an ASP.NET MVC template project which will include some sample classes to help you get familiar with ASP.NET MVC. Frankly, especially if you’re still a beginner in ASP.NET MVC, it’s best to select the sample ASP.NET MVC application so you can have some initial understanding on how ASP.NET MVC works.

Creating our first ASP.NET MVC application

Creating our first ASP.NET MVC application

In the next step as shown underneath you will need to select which VIEW ENGINE you wish to use. You can either choose ASPX or RAZOR. Basically these VIEW ENGINE types relate to how you would write inline code inside VIEWS. For someone who is familiar with ASP.NET the ASPX engine might look much more familiar than Razor. However the code inside VIEWS using the Razor engine is much more readable than code written in ASPX. In this, and future blogs, I will be using the Razor syntax to create my own own VIEWS. I will be covering the fundamentals of Razor. So do not worry because even if you do not know anything about Razor you would still be able to understand what I will be doing.

Selecting between RAZOR or ASPX

Selecting between RAZOR or ASPX

Different folders will be created once you create an ASP.NET MVC application, as shown underneath. The most important folders which you definietly need to understand are the following

  1. Controllers – in this folder you will find all the available controllers which will be used to pass data from the model to the view
  2. Model – in this folder you will find all the available models which will be used by the controllers back to the views. In this folder you will find C# classes which might include business methods, or other classes which will be used by controllers.
  3. Views – in this folder you will have all the available Views which are the actual pages which your users will be viewing. When creating a project with Razor syntax the extension of these views will be .CSHTML whilst if you select the ASPX view engine the extension would be .ASPX.
  4. Content – This is where items such as stylesheets are stored.
  5. Scripts - This is where Javascript files are stored. You will note that Visual Studio automatically adds JQuery files to this folder since the sample application makes use of JQuery to implement validation.
  6. Images – This is where specific images used by your website can be stored.
  7. App_Start – This is a new folder introduced in ASP.NET MVC 4 and include some classes which are responsible for some initial configuration of your website.
ASP.NET MVC Folder Structure

ASP.NET MVC Folder Structure

You can now run your first MVC application. You will note that the sample application which Visual Studio provides contains all the familiar elements of all the popular websites such as Registration, Login, Forgot Password etc. We will be creating some new pages and modify this sample website to start learning how MVC works. Underneath a screenshot of your the sample application should look like.

ASP.NET MVC 4 Sample Application

ASP.NET MVC 4 Sample Application