Basics Of ASP.NET MVC

Design Pattern

Before going into the definition of MVC, let us see what design pattern is. Design pattern is a solution to a commonly occurring problem in software design.

Ex Singleton,N-tier,MVC etc

ASP.NET MVC

ASP.NET MVC is a web development framework from Microsoft that follows the MVC design pattern. It divides the applications into three main components.

Model
View
Controller

We will go into the details of it later on.

Why ASP.NET MVC is better than Web forms

Strong control over the HTML

In web forms, we have server side controls. For these controls, the corresponding HTML is generated by .NET itself and you do not have any control over the generated output.

Ex - GridView gets translated mostly into HTML table but if I do not wanta table, then in web forms, I do not have any option. But in MVC, you have strong control over the generated HTML.
High Testability

Unit testing is an integral part of software development process. In unit testing, the smallest testable parts of an application, called unit, are tested. In applications, we have n number of unit tests. Running all makes sure that the whole application works smoothly.

Web forms are unsuitable for unit testing. But with MVC, you can easily perform the unit testing.
No Viewstate

Web forms maintain data on a form between postbacks with the help of view states. This data moves back and forth between client and server, thereby affecting the performance.

In MVC, there is no view state
RESTful Urls

RESTful Urls are very important from the perspective of user and SEO.

Suppose, I am developing the web application that holds employee information. My RESTful URL to get the employee details will be like http://www.testapp.com/employee/1

Where 1 is nothing but employee id, so if employees knows their id, they can directly navigate to the details by typing in the URL and just putting the appropriate id, instead of going through the links in web app. Web forms do not come by default with RESTful Urls. With MVC you will get those by default.
Separations of Concerns
In web forms, there is no separation of concerns. You may see that the page (.aspx) has separate code behind (.aspx.cs) there by separating the presentation logic from business but actually both are tightly coupled. With MVC, there is a clean separation of concerns.
Easier integration with client side libraries
Web forms are not easy to integrate with client side libraries like jQuery. MVC works seamlessly with client side libraries.
No Page Life Cycle
In web forms, page has to go through a number of stages before rendering, affecting the response time of application.

But in MVC, there is no page life cycle.

ASP.NET MVC In Details

As we know, MVC divides the applications into three parts.

Model
View
Controller

Model

It is a set of classes that holds the data users are working with. It includes the business logic of an application. It also is responsible for retrieving and storing the model state to database. So, this is the part of MVC that should interact with database.

View

View contains the things that are needed to show the model elements to the user.

Controller

The component that connects the Model to the View. It is also responsible for accepting the incoming requests. Let us see step by step how these parts connect when a request comes in.

Step 1

Incoming request is forwarded to Controller.
Step 1.PNG
Step 2

Controller accepts the request and prepares the Model. For preparing the Model or saving Model, it interacts with database.

Step 3

Controller passes the prepared Model to View.

Step 4

View processes the Model and response is sent to the client.

All the steps are shown in the below diagram.
All Steps.PNG
Now, let us see the basic example of this.

Suppose, we want to show the list of employees on a page, as shown below.

I have taken the MVC project from File ->New Project option.

When the request comes in, the Controller is responsible for accepting it, so I added a Controller by right clicking the "Controllers" folder, selected "Add" and then "Controller option" as shown below.

On the next screen, choose "MVC 5 Controller-Empty" option and select "Add".

Next put the Controller name as "Employee" and click on "Add".

We need a View to show the data. So, for adding the View, just right click inside the List action and select "Add View" option.

On the next screen, keep the default settings and select "Add".

As we know, Controller is responsible for populating the Model. In this case, the Model is nothing but employee data. So, the Controller needs a model.

For adding model, right click on "Models" folder and select "Add class" option and give name as Employee.

Suppose, we want to show Employee Id and Employee Name on the page. So, I have added two properties to the Employee Model, as shown below.

public class Employee
{
public int EmpId {
get;
set;
}
public string EmpName {
get;
set;
}
}

I have also included the method that will give us employee data. The complete Employee Model is as shown below.

public class Employee {
public int EmpId {
get;
set;
}
public string EmpName {
get;
set;
}
public static List < Employee > GetAllEmployees() {
List < Employee > employees = new List < Employee > ();
employees.Add(new Employee {
EmpId = 1, EmpName = "John"
});
employees.Add(new Employee {
EmpId = 2, EmpName = "Tom"
});
employees.Add(new Employee {
EmpId = 3, EmpName = "Chris"
});
return employees;
}
}

To make the example simpler, I have not shown interaction of Model with database and assumed some static data of employees. In real time, your Model will interact with database and will get the data.

Now, the Controller will populate model by calling method which is inside the Model.

public ActionResult List() {
List < Employee > employees = Employee.GetAllEmployees();
return View();
}

So now, we have Model populated in our Controller in the form of employees object.

The next step is to pass this Model to View. We will do this by passing Model to View() method as below.

public ActionResult List() {
List < Employee > employees = Employee.GetAllEmployees();
return View(employees);
}

Now, the View will just render the passed Model.

@using BasicMVCApplication.Models;
@model List < BasicMVCApplication.Models.Employee > @
{
ViewBag.Title = "List";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<table border="1">
<thead>
<tr>
<th>Employee Id</th>
<th>Employee Name</th>
</tr>
</thead>
<tbody> @foreach (Employee emp in Model) {
<tr>
<td>@emp.EmpId</td>
<td>@emp.EmpName</td>
</tr> } </tbody>
</table>

I have uploaded the source code of this example. You can download the same.