MVC stands for Model,View and Controller.Nothing Get cleared right? What the heck model,View and Controller actually do?
Ok,suppose you are a civil engineer or an architect,who has the responsibility to construct a house.
what steps will you follow ,I think you will follow below steps:-
1. You will bring raw materials like wood,bricks,cement etc. from any source call it source of material.
2. You will store these materials in a temporary place near to the place of interest where the actual house is going to build.You will also keep material in some logical manner for easy use.
3. Now you will start construction in the real physical form into the land of interest(Place for construction) and design a beautiful home.
Great,Now just change the terminology:-
Home-->Web Application.
Architect-->web developer
Source of Material -->Database (source of data for web Application)
Temporary place -->Model(for business entity and Business logic of webapp)
Place for construction-->Controller (for your logic)
Beautiful Home design-->View (html)
Now change the story a little bit.
You will keep your business entities into model and will write some business logic there.And start coding for the web application in controller whenever you will need some entity you will create the object of model ie entity and populate data from database.Finally you will design a view and and will send this model object to view.
The request from browser always go to the controller first where your logic will be processed model object will populate with data and finally the view will be rendered as response.
Now put some effort and think what we did here.
We actually created a pattern to separate different logical parts for better maintenance and processing.
This is what we call MVC , an architectural pattern for separation of concern.
Lets Understand it by example
open visual studio. And follow below steps:-
step 1) Go to File-->New--> project
step 2)Go to installed template-->visual c#-->Asp.Net Web Application.Here set Name and location for your application.
step 3)Select Empty Template and check MVC checkbox if you want an empty MVC template or Directly select MVC template if you need some code examples.
Below are the figures for above steps.
In the right side you can see MVC directory structure with Model,View and MVC folder.This is called the solution explorer.As shown Below.
Note:-If you are unable to see it then go to View-->Solution Explorer.
Now ,suppose we have to create a web application to show the details of students of any school.
For now we will not use database to retrieve student information and will hard code the information,as the focus is only understanding the MVC Request response flow.
step 1)create a controller (the real land for construction) and name it student controller.
note:-Each controller must suffix with Controller name ,so just change the prefix and keep the word controller as it is.
[Controller folder-->Right Click-->New-->controller]
Step 2)Go to Model folder and Create a class name it as Student with some property.Here we are actually creating a business Entity.
public class Student
{
public int Id { get; set; }
public string Name { get; set; }
}
Step 3) Create a Method in controller which will return a View as shown below:-
public ActionResult ShowStudent()
{
return View();
}
Note:-Here the return type is ActionResult which is capable of returning view ,you will learn more about ActionResult in ActionResult Section.
step 4) Create List of student class and populate some data. and pass this object to view as shown below.
public class StudentController : Controller
{
//
// GET: /Student/
public ActionResult ShowStudent()
{
List<student>
studentList = new List<student>
() {
new Student(){Id=1,Name="Michael"},
new Student(){Id=2,Name="John"},
new Student(){Id=3,Name="Lucy"},
};
return View(studentList);
}
}
Note:- Don't forget to import Model name space.
using MVCExample.Models;
step 4) Finally add view and Make it strongly typed as shown below and with foreach loop try to show the student List.
Note:-You will learn more about strongly typed view in latter section.
@using MVCExample.Models
@model IEnumerable<Student>
@{
ViewBag.Title = "ShowStudent";
}
<h2>ShowStudent</h2>
@foreach (var item in Model)
{
<ul>
<li>@item.Id</li>
<li>@item.Name</li>
</ul>
}
Step 5) Change the default route in the RouteConfig.cs in App_Start.As shown below.
routes.MapRoute(
name: "Student",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Student", action = "ShowStudent", id =
UrlParameter.Optional }
);
You will learn everything about routing in next article.
Now run the application you will get below result.
