This is second article of the series of How to learn Asp.Net MVC step by step. Today, we will learn how to create our first application in Asp.Net MVC. We will learn to create a demo application with Empty Project Template. In the first article, we have learn overview on Asp.Net MVC.

 

 
Pre-requisite for MVC

Before start, there are lots of versions like MVC2, MVC3, MVC4, MVC5 and MVC6. So, It is depends to you which version you are using to integrate with Visual Studio.

If you are working with MVC 5, it needs VS 2013. We can download it from following links

 http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx 

If you are working with MVC 3 and 4 you need VS 2012. 

http://www.microsoft.com/en-us/download/details.aspx?id=34673

If you are working with MVC 2 then you need Visual Studio 2010 or 2008.

 

Create New Project

To create new project,  Open Visual Studio, I am using Visual Studio 2013 and click on File Menu and click on New and choose Project.

 

 

It will open a new window from where you can choose the application type. Choose Web from Installed and then choose Asp.Net Web Application. Give it proper project name and also provide the location of project to save and click on OK.

 

 

This will open a dialog where we can choose New Asp.Net Project, So, here we are going to choose an Empty Project, and actually here we will learn everything from beginning so an empty application is best. From project type, we need to use MVC and choose OK.

 

 

So, finally we have created a Asp.Net MVC empty application. When you go through the Solution Explorer, project structure will look like as following. Here we can see different type of folders and files like Controllers, Models etc but these are empty.

 

Adding Controller

As we all know that Controller is responsible for handling the request which is coming from the user interface [ex: View]. So, first we are going to add a new controller and corresponding that we will also add a View.

To add new controller, Right click on Controllers folder and choose Add and then click on Controller.

 

 

It will open Add Scaffold window, where we can choose different types of controller. Here we are interested to add simple mvc controller. So, choose MVC 5 Controller – Empty and click on Add.

 

 

After clicking to add, it will open a Add Controller window, here you need to pass the name of controller and choose Add.

 

 

So, finally we have added a HomeController, the sample code of HomeController will be like this.

 

 

Adding View

So, it’s time to create a user interface, So, we can add a view where we will display the data. Actually View are used to show the data which is come from controller. It is basically a GUI of Asp.Net MVC application.

To add a view, Right click on Action Name or View() and choose Add View.

 

 

It will open a Add View dialog where we can choose the name of view, type of template, also we can choose here layout page for the view. It will auto take the name of View as per Action Name, So, click on OK.

 

 

When we click on Ok button, It will create a Home folder inside the Views directory and inside the Home directory, it will create a "index.cshtml" page as view.

When we created the project, there was not any layout page added into the project, but after adding a view, it will auto create the _Layout.cshtml page for layout.

We can make some changes in Vies as following.

 

 

So, finally everything is ready for basic Asp.Net MVC application. It's time to run the project, So, press F5.

 

 

When we open this application in small screen size, it auto convert as responsive application. It is because, it is using bootstrap.

Conclusion:

So, today we learned how to create our basic and first Asp.Net MVC application step by step.

I hope this post will help you. Please put your feedback using comment which helps me to improve myself for next post. If you have any doubts please ask your doubts or query in the comment section and if you like this post, please share it with your friends. Thanks