First Application in ASP.NET MVC

By | December 18, 2015

Open visual studio so following like window will open:
01
From above window click on File Menu -> New -> Project as follows:
02
So a dialog box will appear to us. From this dialog click “Web” menu so it will show “ASP.NET Web Application” template as follows:
03
Inside above “Web” menu there is also a submenu named “Visual Studio 2012” and if we click on the submenu it will show different templates as follows:
04
In above picture we see different templates including ASP.NET MVC4 template remains.
Now the question is “What exactly is this two links means?”
When we click on Web link only “ASP.NET Web Application” template shown but when we click on “Visual Studio 2012” link it shown different templates including “ASP.NET MVC4 Web Application” template.
In case of using MVC4 we will click on “Visual Studio 2012” link and select “ASP.NET MVC4 Web Application” template but if we want to work with MVC5 then we’ll click on “Web” link and select “ASP.NET Web Application” template.
This is the big difference between MVC4 and MVC5.
Before going to check the difference between MVC4 and MVC5 we’ll discuss “ASP.NET”, “Web Forms” and “MVC”. Lot of peoples thinks that ASP.NET is different and MVC is different. It is absolutely wrong. Our base framework is .NET. From .NET ASP.NET is created. ASP.NET is the framework for develop web application. .NET also has various frameworks like “Windows Framework”, “Web Framework” etc. ASP.NET is a web framework. Microsoft has created Web Forms and MVC using ASP.NET. So don’t think MVC is different than ASP.NET. Actually MVC uses ASP.NET framework also Web Forms uses ASP.NET framework. So we can say that both MVC and Web Forms build on the top of ASP.NET Framework. Consider following picture it will clarify your confusion:
05
So if both ASP.NET Web Forms and MVC build up on the top of ASP.NET framework so why should become up separate templates like “ASP.NET Empty Web Application”/ “ASP.NET Web Forms Application” / “ASP.NET MVC4 Web Application” /…. … … as following picture:
06
So in visual studio 2013 it creates only one template “ASP.NET Web Application” for everything. From this template we can create different application like “ASP.NET Web Forms” application or “ASP.NET MVC” application or “ASP.NET Web Api” application etc.
Though all the application we can create by selecting one template so it is called one ASP.NET. By using ASP.NET one we will avoid a lot of confusion specially confusion about ASP.NET and MVC.

Now click on “Web” menu -> Select “ASP.NET Web Application” template -> Give a name “HelloWorld” as follows:
07
Now click on “Ok” button. So following dialog will open:
08
Though it is one ASP.NET so all the templates that builds on the top of ASP.NET framework will shown above.
From above link we can select any application template like “Web Forms” or “MVC” or “Web API” or “Single Page Application”. We can also uses multiple format in one template e.g. if we want to use both “Web Forms” and “Web API” in a single template we will check both MVC and Web API check box immediate below of template list.
Though we’ll learn MVC so we’ll select MVC template as follows:
09
Note: As soon as we select “MVC” template the MVC check box checked and disabled automatically.
This is a first “HelloWorld” program so we’ll not use any authentication or security mechanism. So click on “Change Authentication” button and select “No Authentication” button as follows:
10
Finally click on OK button. So no authentication will be assigned to this application. Now we’ve selected MVC template. Unassigned authentication. Finally click on OK button. So MVC project created as follows:
11
We created our solution here.
Now we’ll talk about MVC?
MVC stands for Model-View-Controller.
MVC is an architectural Pattern where we divide our web application into three layers. They are the Controller, the Model and the View. Every layer in MVC is assigned a unique responsibility. So
The View is uses for look and fill and positioning. The view is something that the end user will see.
The Model supplies data and business logic so the models are nothing but the classes that will contain different entities and business logics. The model can interact with the data access layer or some kind of services like WCF service or Web Service that will gives data.
The Controller is the heart of the MVC architecture. It acts like the coordinator between Model and View.
So when the end user sends a request (request are actually action because in MVC architecture end user actually sends action from browser) it first heats the controller. Depending on the action the controller picks up the appropriate model and binds it with the view and the result is send to the end user browser.

Following picture shows the details working process of MVC:
12
According to above image
End User send request (request are actually action because in MVC architecture end user actually sends action from browser) from browser. The Controller gets the request. Depending on the request picks the appropriate model and binds with the view and send the result to end user browser. Model can interact with Data Access Layer or different services like WCF Service or Web Service for Get/Set data From/To database.

Example:
Say a user sends a request (action) for “AddCustomer” to database this “AddCustomer” request first comes to the Controller. The controller finds the appropriate model for this request. Here the appropriate model is the Customer model. So it creates an object for Customer model and ties up with the view i.e. Customer.cshtml.
13
With this approach we assign unique responsibility to each layer so when we changes in one layer the other layer is not affected and its makes our software project more maintainable and more better in terms of architecture.
Now let us map our solution “HelloWorld” that we created with MVC architecture.
14
In above solution we have Controllers folder inside above solution where all our Controller classes will go inside this folder. We have a Models folder that will contain all the Model classes i.e. domain objects. We have the Views folder that will contain .cshtml UI. So we can say that our solution is completely mapped with MVC architecture.
In order to start from scratch
#. Delete HomeController.cs class from Controllers folder
#. Also delete Home and Shared folders from Views folder.
We’ll start by Hello World program. In this program we’ll not create any Model class. We’ll just work with View and Controller.
So now create an Empty Controller inside Controllers folder.
Right Mouse Click on Controllers folder -> Add -> Controller as follows:
15
As soon as we click on Controller another window will pop up with some Controller templates as follows:
16
In above window we have three templates of Controller
Empty Controller: – Full empty controller will get when added this template
Controller with read/write actions: – we’ll get read/write action methods when added the controller template.
Controller with views, using Entity Framework: – we’ll get some readymade code that will help us to connect with Entity Framework.
When we’ll try to learn something we should start from scratch. So we’ll select the Empty template as our HomeController template -> Then Click Add button.
So another window will appear to us to name the new Controller as follows:
17
As we see that inside Add Controller window it has only highlighted the Controller name i.e. “Default” and not highlighted the suffix word Controller. The word Controller is a reserved word. So don’t delete this word.
So name the Controller as HomeController as follows:
18
Then Click on Add button.
So there will be a class created named HomeController.cs inside Controllers folder. Also inside the Views folder there will be created a folder named “Home” as follows:
19
That’s means that all the views of HomeController will lie inside the Home folder of Views.
So add a view inside the Views folder and named it MyHomePage as follows:
Right Mouse Click on Home folder (lies inside Views folder)-> Add -> View-> Give the name as “MyHomePage” as follows:
20
Uncheck “Use a Layout Page:” checkbox. Select Template as Empty (without model). Then Click on “Add” Button.
So inside the Home folder it added a MyHomePage.cshtml as follows:
21
Now Open HomeController.cs and create an Action named method GotoHome as follows:
22
Inside the action method we returned a View where we passed “MyHomePage” i.e. the view name as parameter.
Now go to the MyHomePage.cshtml as write
“Welcome to our first MVC view” inside the

tag of tag of the view as follows:
23
Now run the application. If we run the application it will show an Error as follows:
24
This Error message indicates that it is not able to find the Index page. This Error coming because there is an Action method called “Index” exists inside the HomeController.cs. So when we run the application by default it hit Index method of HomeController and though we didn’t created any View for this Index method so it doesn’t find any View for this Action. That’s why this Error message returned.

We need to get the GotoHome not Index. So inside the url we will write the Controller/Action i.e. Home/GotoHome as follows:
25
Note: during writing Controller name we will avoid suffix “Controller” word and just write core name i.e. “Home” for HomeController.
Press Enter. So it will show GotoHome View as follows:
26
So we’ve created our first application using ASP.NET MVC.

Tips:
We have to put our View either inside Same folder of Controller Name or in Shared folder otherwise it will return an error that View could not found as follows:
27
According to above image it searches the view inside Home folder (Though the action method lies inside the HomeController) and shared folder. If view not found both of these folders then it will return above error.
If our Action method and View name same in that case we don’t need to pass the View name as parameter value.
For example in above our View name is MyHomePage.cshtml and the Action method name is GotoHome(). So we have to return the View name as the parameter value as follows:
28
If our View name is same with the Action name i.e. if our View name is GotoHome.cshtml then we don’t need to pass the View name as the parameter value. In that case our Action method code will be as follows:
29
It will work same and return same result as previous.

630 Total Views 1 Views Today
Md. Mojammel Haque

CSM, CSPO, CSD, CSP-SM, CSP-PO (ScrumAlliance.org)
Certification Profile Link-
https://www.scrumalliance.org/community/profile/mhaque13

Currently working as Lead Team (Application Architecture) at Raven Systems Ltd. Passion for software development especially agile practices such as TDD with in depth knowledge of Object Oriented Programming, SOLID Principles, Gang of Four Design Patterns, Some Enterprise Application Architectural Patterns. Over 8 years of software development experience ASP.NET. Has the ability to understand and transform complex business requirements into software ensuring applications are delivered on time. Also experience in non Microsoft .NET technologies such as Dapper.Net, Git, Structure Map & Angular, Bootstrap, HTML-5, CSS-3 etc.

Category: 1.10-Asp.net MVC Uncategorized
Md. Mojammel Haque

About Md. Mojammel Haque

CSM, CSPO, CSD, CSP-SM, CSP-PO (ScrumAlliance.org) Certification Profile Link- https://www.scrumalliance.org/community/profile/mhaque13 Currently working as Lead Team (Application Architecture) at Raven Systems Ltd. Passion for software development especially agile practices such as TDD with in depth knowledge of Object Oriented Programming, SOLID Principles, Gang of Four Design Patterns, Some Enterprise Application Architectural Patterns. Over 8 years of software development experience ASP.NET. Has the ability to understand and transform complex business requirements into software ensuring applications are delivered on time. Also experience in non Microsoft .NET technologies such as Dapper.Net, Git, Structure Map & Angular, Bootstrap, HTML-5, CSS-3 etc.

Leave a Reply

Your email address will not be published. Required fields are marked *