Create Your First ASP.NET MVC Application - Step By Step For Beginners

Introduction

In this article we will learn how to create our First Asp.Net MVC Application using Model class, View and Controller. We will learn the individual components and display a message on screen using MVC. Let's  start the step by step proccess to create our application. 
 
Step 1
 
Download the latest Visual Studio version or Use Visual Studio 2013 or above. ( I am Using Visual Studio 2017)
 
Step 2
 
Open Visual Studio 2017 and click on File Menu ->New ->Project
 
Create First ASP.NET MVC Application - Step By Step For Beginner
 
Step 3
 
In the left side template expand Visual C# and select Web -> ASP.NET Web Application. Enter the name of your a pplication. (I used FirstMvcApplication) and if you want to change project location then click on browse and set location.
 
Create First ASP.NET MVC Application - Step By Step For Beginner
 
Step 4
 
Select MVC and Check checkbox MVC for adding folder and core reference. (Note-:on Right side Authentication-No Authentication)
 
Click on OK
 
Create First ASP.NET MVC Application - Step By Step For Beginner
 
Step 5
 
When you click ok, Visual Studio automatically creates the MVC Application. On the right side you will see the following folders:
 
App_Data : Used for Database File Stored
App_Start
Content: Where we store css files and any other client file.
Controller: Provides action
Fonts: Required for Text or any other action
Models: Domain classes are here
Views: In the View name after controller,  it is used for displaying view to the user.
 
Firstly we working onModel: Right Click on Model Folder -> Add -> class -> Name it Game
 
Create First ASP.NET MVC Application - Step By Step For Beginner
 
Step 6
 
Create two properties in Model
  • id
  • Name
Create First ASP.NET MVC Application - Step By Step For Beginner
 
Step 7
 
We want to work with Controller
 
Right click on controller folder -> add -> Controller -> Name it [ GamesController ]
 
Create First ASP.NET MVC Application - Step By Step For Beginner
 
Create First ASP.NET MVC Application - Step By Step For Beginner
 
Step 8
 
Modify your Controller code with the following code 
 
Create First ASP.NET MVC Application - Step By Step For Beginner
 
Step 9
 
Now we are working with View.
 
Right click on created Game Folder ->add ->View
 
Create First ASP.NET MVC Application - Step By Step For Beginner
 
Set View Name is random because we create Fuction in controller with a Random Name. Go to the previous step and check it for confirmation.
 
Ensure tick on Layout Pages and Browse the Layout, then New window appears on screen.
 
Step 10
 
Expand View folder -> Click on Shared folder -> select _Layout_cshtml -> click on OK
 
Create First ASP.NET MVC Application - Step By Step For Beginner
 
Step 11
 
After clicking on ok, Modify view code with the following code 
 
Create First ASP.NET MVC Application - Step By Step For Beginner
 
Step 12
 
Run your Project by pressing the  F5 key or clicking on Green Run Button. This view appears on screen. 
 
OUTPUT
 
Create First ASP.NET MVC Application - Step By Step For Beginner

Conclusion

 
This article showeds you how to easily create web based MVC Application using Model, View and Controller. The sample code is attached for downloading and testing the code. Post your suggestions and queries to the comment section.