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

 

 

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.

 

 

Step 4

 

Select MVC and Check checkbox MVC for adding folder and core reference. (Note-:on Right side Authentication-No Authentication)

 

Click on OK

 

 

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

 

 

Step 6

 

Create two properties in Model

• id
• Name

 

Step 7

 

We want to work with Controller

 

Right click on controller folder -> add -> Controller -> Name it [ GamesController ]

 

 

 

Step 8

 

Modify your Controller code with the following code 

 

 

Step 9

 

Now we are working with View.

 

Right click on created Game Folder ->add ->View

 

 

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

 

 

Step 11

 

After clicking on ok, Modify view code with the following code 

 

 

Step 12

 

Run your Project by pressing the  F5 key or clicking on Green Run Button. This view appears on screen. 

 

OUTPUT

 

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.