Learn MVC Step by step – Part 1

Introduction

ASP.NET and MVC are the same

Model View Control

Creating our first MVC hello world in 5 steps

Step 1 :- Create a New Project

Step 2 :- Adding a controller

Step 3 :- Adding a view

Step 4 :- Connecting controller and view

Step 5 :- Run the application

Action name and view name confusion

Introduction

Hello friends today, I have started learning MVC and would like to share my learning’s on this site.My belief is that sharing knowledge only increases knowledge. I may make some mistakes in the article. Please correct any mistakes in the article by posting comments below.

ASP.NET and MVC are the same

Lot of developers think ASP.NET is different and MVC is different. So let’s remove this confusion before we go start our tutorial.

As we know Microsoft has developed a base framework called .NET Framework for all the application that runs in Windows platform. So if you want to develop WPF ,Winforms , WCF or anything they use .NET internally.

ASP.NET is a server-side Web application framework designed for Web development to produce dynamic Web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.

Using ASP.NET framework Microsoft created Webforms and MVC. Webforms and MVC are templates in visual studio , they are coding styles. So hence forth never say ASP.NET is different from MVC , actually its ASP.NET MVC and the old one is ASP.NET Webforms.

Model View Control

MVC is an Architectural pattern where we divide our Web application into three layers:

1. Controller( Coordinator between the model and the view)
2. Model(Data, Business Logic Classes(Customer class, ETC)
3. View(Look and feel Webpage)

MODEL VIEW CONTROLLER

Creating our first MVC hello world in 5 steps

Before you are start MVC please download the visual studio community edition software from https://www.visualstudio.com/ , it’s free and then follow the below steps.

Open visual studio select web and select Visual C# Web.

Now here we find there are two options available for development one is ASP.NET Web Application and one is set of templates for ASP.NET Web Forms, ASP.NET MVC 4 etc. as shown below.

If we are using MVC 4 then we will be creating project using Visual Studio 2012 depending upon your need In 2013 they have created only 1 template rather than having different templates so in 2013 we can select one template what kind of web application we want to create WEB.Api, ASP.NET Web Forms, ASP.NET MVC.

Now we use default template of Web and click OK.

As we discussed we can develop different web application MVC, Web Forms, Web API. So in this click MVC and change the authentication to none and press OK. We will learn about authentication later.

Once you press ok you can see a new Project has been created.

Now we can see there are folders created like Controller, Model, Views etc. This is where all the coding of MVC we will be doing.

As we are learing MVC lets delete all files from the views and controller folder and start from sratch.

Now add a new Controller as Home .The home controller will have actions like “gotoHome”, “AboutUs” and so on.

A soon as we add a controller a new template appears as shown below , this is nothing scaffolding.

ASP.NET Scaffolding is a code generation framework for ASP.NET Web applications. Visual Studio includes pre-installed code generators for MVC and Web API projects. You add scaffolding to your project when you want to quickly add code that interacts with data models. Using scaffolding can reduce the amount of time to develop standard data operations in your project.

As we are learning MVC let’s use empty controller for now. Because code generated template would not teach you a lot.

As soon as we add a Controller Name window appears we can see that Default1 is shaded while in Controller it’s not showing. Here Controller is a reserved Keyword so don’t delete the word Controller from the Controller Name.

I named the Controller as HomeController

As soon as we add a controller the Home folder is created with the same name as controller in view section, this is where the Views exist.

Now we have the controller , we also a need a view for the same. So right on the “Home” view folder and add a view.

Uncheck use Layout Page(Layout Page is used for Master Page which we will talk in next time). Now our View has been added as MyHomePage.cshtml (note cs.html view are termed as razor view and in razor view syntax always start with @

Now when the user starts surfing your site he first hits the controller. So we need to write some code in the controller to tell that in this action open this view. Actions in controller are nothing but the action what end user does.

You can see I have added action “GotoHome” and in that I am invoking “MyHomePage” view.

So in short when the user hits “GotoHome” my view “MyHomePage” view will be displayed.

So let’s hit control + F5 and let’s see the output. You will end with below errors but do not get depressed :)

The error is common and easy one. Error says that it is not able to find Index page , by default the controller hits the default action called Index and as we do not have Index page this error is happening.

Now goto the browser and type the below URL. The structure of invoking an MVC action is by typing Controller name ( with out the word controller) followed by the action name.

Now we can see that our application is running and our view has appeared. So we have to type ControllerNamethen action name that is needed to be performed.

Action name and view name confusion

We need to note a important point around action name and view name.When a user hits an action that is needed to be performed the hits comes to controller i.e. coordinator for Model and View so Controller executes the Action that is needed to be performed we wrote

Let’s take an example if our View Name is same Action Name GotoHome.

I will just put “View()”.

Now when we call page from action if we have same name for Action as well as View we don’t need specify the page name i.e. We don’t have to use return View ("MyHomePage");and we will just write return View ();

Now we again press Ctrl+f5, we will found that our application is running fine.

Hope you have enjoyed this tutorial. part 2 will be coming very soon. Below is a nice video on Learn MVC step by step from youtube , do have a look once if you want to see the whole thing visually.